banner

src/main/nine-space/.env.development

@@ -1 +1 @@
-VUE_APP_BASE_URL=http://localhost:8080
+VUE_APP_BASE_URL=https://nft.9space.vip

src/main/nine-space/src/mixins/banner.js

@@ -0,0 +1,9 @@
+export default {
+    methods: {
+        goNext(info) {
+            if (info.link && info.linkType === 'collection') {
+                this.$router.push(`/productDetail?id=${info.linkContent}`);
+            }
+        }
+    }
+};

src/main/nine-space/src/views/Discover.vue

@@ -14,7 +14,7 @@
 
         <swiper pagination class="mySwiper" :autoplay="{ delay: 3500 }" v-if="banners.length > 0">
             <swiper-slide v-for="item in banners" :key="item.id">
-                <img :src="item.pic" />
+                <img :src="item.pic" @click="goNext(item)" />
             </swiper-slide>
         </swiper>
 
@@ -81,10 +81,12 @@ import SwiperCore, { Pagination, Autoplay } from 'swiper';
 SwiperCore.use([Pagination, Autoplay]);
 
 import ProductInfo from '../components/product/productInfo.vue';
+import banner from '../mixins/banner';
 
 export default {
     name: 'discover',
     inject: ['bar'],
+    mixins: [banner],
     components: {
         Swiper,
         SwiperSlide,

src/main/nine-space/src/views/Home.vue

@@ -85,6 +85,7 @@ import SwiperCore, { EffectCoverflow, Autoplay } from 'swiper';
 import ProductInfo from '../components/product/productInfo.vue';
 // import ProductSmall from "../components/product/productSmall.vue";
 import CreatorInfo from '../components/creator/CreatorInfo.vue';
+import banner from '../mixins/banner';
 
 // install Swiper modules
 SwiperCore.use([EffectCoverflow, Autoplay]);
@@ -92,6 +93,7 @@ SwiperCore.use([EffectCoverflow, Autoplay]);
 export default {
     name: 'Home',
     inject: ['bs'],
+    mixins: [banner],
     components: {
         Swiper,
         SwiperSlide,
@@ -173,11 +175,6 @@ export default {
                 .then(res => {
                     this.miners = res.content;
                 });
-        },
-        goNext(info) {
-            if (info.link) {
-                this.$router.push(`/productDetail?id=${info.linkContent}`);
-            }
         }
     }
 };

src/main/pc-space/src/components/CollectionInfo.vue

@@ -107,7 +107,7 @@ export default {
                 top: 0;
                 right: 0;
                 bottom: 0;
-                background-color: fade(@warn, 70%);
+                background-color: fade(@prim, 70%);
             }
 
             &::after {

src/main/pc-space/src/components/PageHeader.vue

@@ -19,7 +19,7 @@
                     </div>
                 </div>
                 <div class="btn-list" v-if="isLogin">
-                    <el-dropdown @command="onCommand" style="margin-left: 20px" trigger="click">
+                    <el-dropdown @command="onCommand" placement='' style="margin-left: 20px">
                         <span class="el-dropdown-link">
                             <img class="img" :src="avatarBox" />
                         </span>
@@ -36,7 +36,7 @@
                     </el-dropdown>
                 </div>
                 <div v-else class="login" @click="show = true">[登录]</div>
-                <div class="login login1">中文</div>
+                <!-- <div class="login login1">中文</div> -->
             </div>
         </div>
         <login-info :Show="show" @close="show = false"></login-info>
@@ -186,6 +186,9 @@ export default {
                     height: 34px;
                     border-radius: 50%;
                     display: block;
+                    margin-right: 30px;
+                    border: 2px solid #fff;
+                    cursor: pointer;
                 }
             }
 

src/main/pc-space/src/views/Home.vue

@@ -54,10 +54,11 @@
         </div>
         <div class="content1 center-content">
             <div class="hot">官方活动</div>
-            <div class="imgBox">
-                <img class="imgBox1" src="../assets/img/888.jpg" alt="" />
-                <img class="imgBox1" src="../assets/img/888.jpg" alt="" />
-            </div>
+            <swiper class="mySwiper" ref="mySwiper" :options="swiperOptions">
+                <swiper-slide v-for="(item, index) in banners" :key="index">
+                    <el-image @click="goNext(item)" :src="item.pic" fit="fill" :lazy="true"></el-image>
+                </swiper-slide>
+            </swiper>
             <more-title path="/collection"></more-title>
             <div class="describe">
                 <div class="box">
@@ -119,17 +120,24 @@
 </template>
 <script>
 import CollectionInfo from '../components/CollectionInfo.vue';
-import GoodsInfo from '../components/GoodsInfo.vue';
 import MoreTitle from '../components/MoreTitle.vue';
+import { Swiper, SwiperSlide } from 'vue-awesome-swiper';
+import 'swiper/css/swiper.css';
 export default {
-    components: { GoodsInfo, CollectionInfo, MoreTitle },
+    components: { CollectionInfo, MoreTitle, Swiper, SwiperSlide },
     data() {
         return {
             creators: [],
             showCreator: 3,
             initChange: true,
             timer: null,
-            products: []
+            products: [],
+            banners: [],
+            swiperOptions: {
+                slidesPerView: 2,
+                spaceBetween: 20,
+                autoplay: true
+            }
         };
     },
     mounted() {
@@ -140,19 +148,19 @@ export default {
         });
 
         this.$http
-                .post(
-                    '/banner/all',
-                    {
-                        query: {
-                            type: 'HOME'
-                        },
-                        sort: 'createdAt,desc'
+            .post(
+                '/banner/all',
+                {
+                    query: {
+                        type: 'HOME'
                     },
-                    { body: 'json' }
-                )
-                .then(res => {
-                    this.banners = res.content;
-                })
+                    sort: 'createdAt,desc'
+                },
+                { body: 'json' }
+            )
+            .then(res => {
+                this.banners = res.content;
+            });
     },
     methods: {
         getCreators() {
@@ -200,6 +208,11 @@ export default {
                 .then(res => {
                     return Promise.resolve(res.content);
                 });
+        },
+        goNext(info) {
+            if (info.link && info.linkType === 'collection') {
+                this.$router.push(`/collectionDetail?id=${info.linkContent}`);
+            }
         }
     },
     watch: {
@@ -395,6 +408,7 @@ export default {
             height: 114px;
             border: 1px solid;
             margin-bottom: 30px;
+            cursor: inherit;
             .box1 {
                 margin: 30px 0 0 40px;
                 .text1 {
@@ -491,4 +505,13 @@ export default {
         padding: 0;
     }
 }
+
+.mySwiper {
+    .el-image {
+        width: 100%;
+        height: 260px;
+        border-radius: 8px;
+        cursor: pointer;
+    }
+}
 </style>