主题4

src/components/product/NewsLarge.vue

@@ -6,25 +6,19 @@
                 id: info.id
             }
         }"
-        class="product"
+        class="news-small"
+        :class="{ isLight: type === 'light' }"
     >
-        <van-image :src="getImg(info.pic)" :radius="30" width="100%" height="calc(100vw - 32px)" fit="cover" />
+        <van-image :src="getImg(info.pic)" :radius="12" width="120" height="120" fit="cover" />
 
         <div class="content">
-            <div class="name van-ellipsis">{{ info.title }}</div>
-            <div class="sales-list">
-                <div class="sales">
-                    <span>绿洲头条新闻</span>
-                </div>
-            </div>
-            <div class="bottom">
-                <div class="miner">
-                    <span style="margin-left: 0">{{ info.subtitle }}</span>
-                </div>
-            </div>
+            <div class="name van-multi-ellipsis--l2">{{ info.title }}</div>
+            <div class="flex1"></div>
+            <van-button type="primary" round plain size="mini"> 查看</van-button>
         </div>
 
-        <img class="bg" src="@assets/png-diwen2.png" alt="" />
+        <img class="bg" v-if="type === 'dark'" src="@assets/png-diwen2.png" alt="" />
+        <img class="bg" v-else src="@assets/png-diwen3.png" alt="" />
         <!-- <img class="top-bg" v-if="time" src="@assets/collecbg.png" alt="" /> -->
     </router-link>
 </template>
@@ -39,6 +33,10 @@ export default {
             default: () => {
                 return {};
             }
+        },
+        type: {
+            type: String,
+            default: 'dark'
         }
     },
     computed: {
@@ -90,19 +88,19 @@ export default {
 </script>
 
 <style lang="less" scoped>
-.product {
+.news-small {
     width: calc(100vw - 32px);
     margin: 8px 16px;
     position: relative;
-    background-color: @bg2;
-    display: inline-block;
-    border-radius: 30px;
+    background-color: var(--bglight);
+    display: inline-flex;
+    border-radius: 12px;
     overflow: hidden;
 
     .bg {
         position: absolute;
-        width: 100px;
-        height: 182px;
+        width: 92px;
+        height: 116px;
         right: 0;
         bottom: 0;
         z-index: 0;
@@ -131,14 +129,28 @@ export default {
         display: block;
         position: relative;
         z-index: 2;
+        flex-shrink: 0;
     }
     .content {
-        padding: 10px 16px 18px;
+        padding: 16px 15px 16px 12px;
+        .flex-col();
+        flex-grow: 1;
         .name {
-            font-size: @font2;
+            font-size: 16px;
             font-weight: bold;
-            color: @text0;
-            line-height: 24px;
+            color: var(--text1);
+            line-height: 22px;
+        }
+
+        .van-button {
+            width: 68px;
+            --van-button-plain-background-color: var(--fadePrimlight);
+            --van-button-primary-background-color: var(--primlight);
+            --van-button-mini-font-size: 14px;
+        }
+
+        .flex1 {
+            flex-grow: 1;
         }
 
         .sales-list {
@@ -170,7 +182,7 @@ export default {
 
         .bottom {
             display: flex;
-            margin-top: 14px;
+            // margin-top: 14px;
             align-items: center;
 
             .miner {
@@ -211,6 +223,20 @@ export default {
         top: 0;
         left: 0;
     }
+
+    &.isLight {
+        background-color: @bg;
+        .content {
+            .name {
+                color: #000000;
+            }
+            .bottom {
+                .miner {
+                    color: #939599;
+                }
+            }
+        }
+    }
 }
 
 .status {

src/components/product/productLarge.vue

@@ -7,6 +7,7 @@
             }
         }"
         class="product"
+        :class="[`product-${theme}`]"
     >
         <van-image
             :radius="30"
@@ -38,20 +39,24 @@
                     </div>
                     <div class="flex1"></div>
                     <div class="price" v-if="info.salable">
-                        <img src="@assets/icon_jiage.png" alt="" />
+                        <van-icon name="icon-icon_jiage" class-prefix="font_family" />
                         <span> {{ info.price }}</span>
                     </div>
                     <div v-else class="status">仅展示</div>
                 </div>
             </div>
-
             <div class="sold xianliang" v-if="time && info.scheduleSale">
-                <img src="@assets/shizhong.png" alt="" />
+                <van-icon name="icon-clock" class-prefix="font_family" />
                 <span>即将开售：{{ startTime || time }}</span>
             </div>
-
-            <div class="sold" v-if="isSolded">已售罄</div>
-            <div class="sold" v-else-if="isSold" style="color: #ff4f50">即将售罄</div>
+            <div class="sold" v-if="isSolded">
+                <van-icon name="icon-jinzhi" class-prefix="font_family" />
+                <span>已售罄</span>
+            </div>
+            <div class="sold" v-else-if="isSold">
+                <van-icon name="icon-info_icon_qianggouzhong" class-prefix="font_family" />
+                <span>即将售罄</span>
+            </div>
         </template>
 
         <div class="content" v-else>
@@ -67,13 +72,15 @@
                 </div>
             </div>
         </div>
+        <img class="bg" v-if="theme === 'theme4'" src="@assets/png-diwen-bai.png" alt="" />
+        <img class="bg" v-else src="@assets/png-diwen.png" alt="" />
 
-        <img class="bg" src="@assets/png-diwen.png" alt="" />
         <!-- <img class="top-bg" v-if="time" src="@assets/collecbg.png" alt="" /> -->
     </router-link>
 </template>
 
 <script>
+import { mapState } from 'vuex';
 import product from '../../mixins/product';
 export default {
     mixins: [product],
@@ -90,6 +97,7 @@ export default {
         }
     },
     computed: {
+        ...mapState(['theme']),
         time() {
             if (this.info.startTime) {
                 if (this.dayjs().isSameOrBefore(this.info.startTime, 'YYYY-MM-DD HH:mm:ss')) {
@@ -161,7 +169,7 @@ export default {
         top: 16px;
         left: 16px;
         font-size: @font1;
-        color: @prim;
+        color: var(--prim);
         display: flex;
         align-items: center;
         // border-radius: 13px !important;
@@ -185,7 +193,7 @@ export default {
         .name {
             font-size: @font2;
             font-weight: bold;
-            color: #fff;
+            color: var(--text1);
             line-height: 24px;
         }
 
@@ -206,7 +214,7 @@ export default {
                 display: inline-block;
                 &.sales-fir {
                     background: var(--prim);
-                    color: #000000;
+                    color: var(--text2);
                 }
                 background-color: var(--fadePrim);
                 color: var(--prim);
@@ -234,12 +242,14 @@ export default {
 
             .price {
                 font-size: @font4;
-                color: #fff;
+                color: var(--text1);
                 line-height: 20px;
                 font-family: OSP;
-                img {
-                    width: 8px;
-                    display: inline-block;
+                .flex();
+                .font_family {
+                    font-size: 8px;
+                    line-height: 16px;
+                    margin-top: 4px;
                 }
             }
         }
@@ -259,22 +269,46 @@ export default {
         top: 0;
         left: 0;
     }
+
+    &.product-theme4 {
+        .content {
+            .sales {
+                span {
+                    background: var(--fadePrimlight);
+                    &.sales-fir {
+                        background: var(--primlight);
+                    }
+                }
+            }
+        }
+        .xianliang {
+            color: var(--primlight);
+        }
+    }
 }
 
 .status {
     font-size: @font2;
-    color: #fff;
+    color: var(--text1);
 }
 .sold {
-    background-color: @bg2;
+    background-color: var(--bglight);
     font-size: @font1;
-    color: @text3;
-    padding: 0 17px;
+    color: var(--info);
+    padding: 0 17px 0 10px;
     border-radius: 13px;
     line-height: 24px;
     position: absolute;
     top: 16px;
     left: 16px;
     z-index: 3;
+    .flex();
+    .font_family {
+        margin-right: 4px;
+    }
+
+    &.preSold {
+        color: var(--danger);
+    }
 }
 </style>

src/router/index.js

@@ -42,7 +42,7 @@ function jsapiSign() {
                             imgUrl: 'https://9space-2021.oss-cn-shenzhen.aliyuncs.com/nft/2021-11-05-15-58-30YwqLzMjy.jpg'
                         });
                         wx.updateTimelineShareData({
-                            title: '绿洲宇宙-全球首个基于区块链的游戏资产集换中心',
+                            title: '宇宙-全球首个基于区块链的游戏资产集换中心',
                             link: location.origin + '/saas',
                             imgUrl: 'https://9space-2021.oss-cn-shenzhen.aliyuncs.com/nft/2021-11-05-15-58-30YwqLzMjy.jpg'
                         });
@@ -328,7 +328,7 @@ const routes = [
                 component: () => import('../views/product/NewsList.vue'),
                 meta: {
                     pageType: Page.Every,
-                    title: '绿洲头条',
+                    title: '新闻公告',
                     tabColor: '#222426'
                 }
             },
@@ -506,7 +506,7 @@ const routes = [
                 component: () => import('../views/asset/AuctionPublish.vue'),
                 meta: {
                     pageType: Page.Every,
-                    title: '绿洲宇宙'
+                    title: '宇宙'
                 }
             },
             {
@@ -588,7 +588,7 @@ const routes = [
                 name: 'auctionOrderDetail',
                 component: () => import('../views/order/AuctionDetail.vue'),
                 meta: {
-                    title: '绿洲宇宙'
+                    title: '宇宙'
                 }
             },
             {

src/styles/font.less

@@ -24,6 +24,14 @@
     -webkit-font-smoothing: antialiased;
     -moz-osx-font-smoothing: grayscale;
 }
+.font_family-icon-icon_inter1:before {
+    content: '\e64e';
+    font-size: 24px;
+}
+.font_family-icon-icon_inter:before {
+    content: '\e631';
+    font-size: 24px;
+}
 .font_family-icon-phone:before {
     content: '\e64b';
     font-size: 20px;
@@ -33,7 +41,18 @@
     content: '\e616';
     font-size: 20px;
 }
-
+.font_family-icon-jinzhi:before  {
+    content: '\e610';
+    font-size: 18px;
+}
+.font_family-icon-clock:before  {
+    content: '\e617';
+    font-size: 18px;
+}
+.font_family-icon-info_icon_qianggouzhong:before  {
+    content: '\e64d';
+    font-size: 18px;
+}
 .font_family-icon-yanzhengma:before {
     content: '\e624';
     font-size: 20px;

src/styles/theme.less

@@ -5,6 +5,13 @@
     --primlight: #3ab200;
     --btnText: #fff;
     --bglight:#373b3e;
+    --danger:#FF4F50;
+    --info:#939599;
+    --bg:#181818;
+    --bg2:#272b2e;
+    --bg3:#272b2e;
+    --text1:#fff;
+    --text2:#000;
 }
 
 .theme2 {
@@ -14,6 +21,13 @@
     --primlight: #f5ab23;
     --btnText: #000;
     --bglight:#2F2519;
+    --danger:#FF4F50;
+    --info:#939599;
+    --bg:#181818;
+    --bg2:#272b2e;
+    --bg3:#272b2e;
+    --text1:#fff;
+    --text2:#000;
     --van-primary-color: var(--prim);
     --van-tabbar-item-active-color: var(--prim);
     --van-tabs-default-color: var(--prim);
@@ -33,6 +47,13 @@
     --primlight: #979DFF;
     --btnText: #000;
     --bglight:#3C3766;
+    --danger:#FF4F50;
+    --info:#939599;
+    --bg:#181818;
+    --bg2:#272b2e;
+    --bg3:#272b2e;
+    --text1:#fff;
+    --text2:#000;
     --van-primary-color: var(--prim);
     --van-tabbar-item-active-color: var(--prim);
     --van-tabs-default-color: var(--prim);
@@ -44,3 +65,30 @@
     --van-number-keyboard-button-background-color: var(--prim);
     --van-button-primary-background-color:var(--prim);
 }
+
+.theme4 {
+    --prim: #51B8FF;
+    --fadePrim: #51B8FF20;
+    --darkPrim: #367bd7;
+    --primlight: #4092FF;
+    --fadePrimlight: #4092FF20;
+    --btnText: #000;
+    --bglight:#fff;
+    --danger:#FF4F50;
+    --info:#939599;
+    --bg:#fff;
+    --bg2:#F5F7FA;
+    --bg3:#fff;
+    --text1:#000;
+    --text2:#fff;
+    --van-primary-color: var(--prim);
+    --van-tabbar-item-active-color: var(--prim);
+    --van-tabs-default-color: var(--prim);
+    --van-tabs-bottom-bar-color: var(--prim);
+    --van-tab-active-text-color: var(--prim);
+    --van-field-error-message-color: var(--prim);
+    --van-button-primary-background-color: var(--prim);
+    --van-button-primary-border-color: var(--prim);
+    --van-number-keyboard-button-background-color: var(--prim);
+    --van-button-primary-background-color:var(--prim);
+}

src/views/Home.vue

@@ -21,7 +21,7 @@
             ></van-image>
             <div class="text1" :class="{ text3: isLogin }">{{ companyInfo.name }}</div>
         </div>
-        <div class="welcom" v-else>
+        <div class="welcom" v-else-if="theme === 'theme1' || theme === 'theme2'">
             <div class="left">
                 <div class="text1">WELCOME</div>
                 <div class="text2" :class="{ text3: isLogin }">{{ companyInfo.name }}</div>
@@ -33,22 +33,47 @@
                 :src="companyInfo.logo || require('@assets/img_default_photo.png')"
             ></van-image>
         </div>
+        <template v-if="theme === 'theme1' || theme === 'theme2' || theme === 'theme3'">
+            <swiper
+                pagination
+                @slideChange="changeMySwiper"
+                :space-between="theme === 'theme2' || theme === 'theme3' ? 8 : 16"
+                class="mySwiper"
+                :class="[`swiper-${theme}`]"
+                :autoplay="{ delay: 5000, disableOnInteraction: false }"
+                v-if="banners.length > 0"
+                slidesPerView="auto"
+                centeredSlides
+            >
+                <swiper-slide v-for="item in banners" :key="item.id">
+                    <product-small :info="item"></product-small>
+                </swiper-slide>
+            </swiper>
+        </template>
+        <div class="large-logo" v-else>
+            <van-image
+                width="100%"
+                height="100%"
+                radius="12"
+                fit="cover"
+                :src="companyInfo.logo || require('@assets/img_default_photo.png')"
+            ></van-image>
+        </div>
+
+        <div class="home-title" @click="goNews">
+            <span>新闻公告</span>
+
+            <div class="title-more">
+                <span>更多</span>
+                <van-icon name="icon-icon_inter" class-prefix="font_family" />
+            </div>
+        </div>
+
+        <div class="newsList">
+            <news-large v-for="(item, index) in news" :key="index" v-model:info="news[index].obj"></news-large>
+        </div>
 
-        <swiper
-            pagination
-            @slideChange="changeMySwiper"
-            :space-between="theme === 'theme2' || theme === 'theme3' ? 8 : 16"
-            class="mySwiper"
-            :class="[`swiper-${theme}`]"
-            :autoplay="{ delay: 5000, disableOnInteraction: false }"
-            v-if="banners.length > 0"
-            slidesPerView="auto"
-            centeredSlides
-        >
-            <swiper-slide v-for="item in banners" :key="item.id">
-                <product-small :info="item"></product-small>
-            </swiper-slide>
-        </swiper>
+        <div class="home-title">数字艺术品</div>
 
         <!-- <div class="tabs" v-if="!empty">
             <div class="tab" :class="{ active: active === 0 }" @click="active = 0">数字藏品</div>
@@ -96,6 +121,7 @@ SwiperCore.use([Pagination, Autoplay]);
 
 import banner from '../mixins/banner';
 import ProductLarge from '../components/product/productLarge.vue';
+import NewsLarge from '../components/product/NewsLarge.vue';
 import ProductSmall from '../components/product/productSmall.vue';
 import { mapState } from 'vuex';
 
@@ -107,7 +133,8 @@ export default {
         Swiper,
         SwiperSlide,
         ProductLarge,
-        ProductSmall
+        ProductSmall,
+        NewsLarge
     },
     computed: {
         ...mapState(['userInfo', 'theme', 'companyId', 'companyInfo']),
@@ -176,6 +203,11 @@ export default {
         // });
     },
     methods: {
+        goNews() {
+            this.$router.push({
+                name: 'newsList'
+            });
+        },
         changeSwiper() {
             console.log(this.swiperRef.activeIndex);
             this.active = this.swiperRef.activeIndex;
@@ -257,7 +289,6 @@ export default {
             // let show = window.sessionStorage.getItem('riskShow')
             //     ? JSON.parse(window.sessionStorage.getItem('riskShow'))
             //     : false;
-
             // if (!show) {
             //     this.riskShow = true;
             //     window.sessionStorage.setItem('riskShow', JSON.stringify(true));
@@ -274,9 +305,11 @@ export default {
                     this.products = res.filter(item => {
                         return item.type === 'collection';
                     });
-                    this.news = res.filter(item => {
-                        return item.type === 'news';
-                    });
+                    this.news = res
+                        .filter(item => {
+                            return item.type === 'news';
+                        })
+                        .slice(0, 3);
                 })
             ]).then(() => {
                 this.$toast.clear();
@@ -434,7 +467,7 @@ export default {
 
 <style lang="less" scoped>
 .darkBg {
-    background-color: #181818;
+    background-color: var(--bg);
 }
 .theme2-bg {
     width: 221px;
@@ -455,7 +488,7 @@ export default {
 .top {
     display: flex;
     padding: 9px 16px;
-    background-color: @bg;
+    background-color: var(--bg);
     display: flex;
     align-items: center;
     .logo {
@@ -486,7 +519,7 @@ export default {
     // background-color: @bg3;
     position: relative;
     z-index: 1;
-    background-color: #272b2e;
+    background-color: var(--bg2);
     padding-top: var(--safe-top);
 }
 
@@ -540,6 +573,20 @@ export default {
         }
     }
 }
+
+::v-deep(.swiper-theme4),
+::v-deep(.swiper-theme5) {
+    padding: 20px 0 16px;
+    .swiper-slide {
+        height: 42.67vw;
+    }
+}
+
+.large-logo {
+    padding: 20px 16px 16px;
+    height: 42.67vw;
+    overflow: hidden;
+}
 // .swiper-slide {
 //     width: 255px;
 // }
@@ -722,4 +769,29 @@ export default {
         border-radius: 8px;
     }
 }
+
+.home-title {
+    font-size: 18px;
+    font-weight: bold;
+    color: var(--color1);
+    line-height: 24px;
+    padding: 10px 16px 8px;
+    .flex();
+
+    span {
+        flex-grow: 1;
+    }
+
+    .title-more {
+        .flex();
+        font-size: 12px;
+        color: #939599;
+        .font_family {
+            font-weight: normal;
+        }
+    }
+}
+.newsList {
+    padding-bottom: 8px;
+}
 </style>

src/views/Index.vue

@@ -1,5 +1,5 @@
 <template>
-    <div class="index">
+    <div class="index" :class="[`index-${theme}`]">
         <router-view v-slot="{ Component }">
             <keep-alive :include="keeps">
                 <component :is="Component" class="container barTop" />
@@ -11,7 +11,7 @@
             z-index="20"
             safe-area-inset-bottom
             ref="tabbar"
-            class="bgBack"
+            :class="bgClass"
             @change="changeTab"
         >
             <van-tabbar-item replace v-for="item in menus" :name="`${item.name}`" :key="item.name">
@@ -26,8 +26,32 @@
 </template>
 
 <script>
+import { computed, ref, watch } from 'vue-demi';
+import { useRoute } from 'vue-router';
+import { mapState, useStore } from 'vuex';
 export default {
+    setup() {
+        const store = useStore();
+        const route = useRoute();
+        const bgClass = ref('bgBack');
+        const setClass = () => {
+            if (store.state.theme === 'theme4' && route.name === 'home') {
+                bgClass.value = '';
+            } else {
+                bgClass.value = 'bgBack';
+            }
+        };
+        setClass();
+        watch(route, () => {
+            setClass();
+        });
+
+        return {
+            bgClass
+        };
+    },
     computed: {
+        ...mapState(['theme']),
         menus() {
             let menus = [
                 {
@@ -116,7 +140,7 @@ export default {
 }
 
 .index {
-    background-color: #272b2e;
+    background-color: var(--bg2);
     .flex-col();
     padding-top: 0 !important;
 }
@@ -132,4 +156,11 @@ export default {
         }
     }
 }
+
+.index-theme4 {
+    --van-tabbar-item-active-color: var(--primlight);
+    .bgBack {
+        --van-tabbar-item-active-color: var(--prim);
+    }
+}
 </style>

src/views/product/NewsList.vue

@@ -13,6 +13,7 @@
 <script>
 import list from '../../mixins/list';
 import NewsSmall from '../../components/product/NewsSmall.vue';
+import { mapState } from 'vuex';
 
 export default {
     mixins: [list],
@@ -23,12 +24,16 @@ export default {
         };
     },
     components: { NewsSmall },
+    computed: {
+        ...mapState(['companyId'])
+    },
     methods: {
         beforeData() {
             return {
                 query: {
                     onShelf: true,
-                    del: false
+                    del: false,
+                    companyId: this.companyId
                     // display: true
                 }
             };