home

src/assets/svgs/login_icon_code.svg

@@ -1,12 +1,11 @@
 <?xml version="1.0" encoding="UTF-8"?>
 <svg width="24px" height="24px" viewBox="0 0 24 24" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
     <title>login_icon_mima</title>
-    <g id="H5" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd" stroke-linecap="round" stroke-linejoin="round">
-        <g id="验证码登录—01" transform="translate(-61.000000, -262.000000)" stroke="#FFFFFF" stroke-width="1.4">
-            <g id="编组-9" transform="translate(45.000000, 195.000000)">
-                <g id="编组-7" transform="translate(16.000000, 67.000000)">
-                    <path d="M4.40886423,4.84667591 L12,2 L12,2 L19.5911358,4.84667591 C20.3717432,5.13940371 20.8888889,5.88564515 20.8888889,6.71933427 L20.8888889,12 C20.8888889,16.010046 18.4014174,19.5994685 14.6466944,21.0074896 L12,22 L12,22 L9.35330563,21.0074896 C5.59858258,19.5994685 3.11111111,16.010046 3.11111111,12 L3.11111111,6.71933427 C3.11111111,5.88564515 3.62825678,5.13940371 4.40886423,4.84667591 Z" id="矩形"></path>
-                    <polyline id="直线" points="8.9096665 10.8801592 10.5763332 13.3801592 15.5763332 10.0468259"></polyline>
+    <g id="页面-1" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
+        <g id="短信登录" transform="translate(-46.000000, -244.000000)" fill="#FFFFFF">
+            <g id="编组-11备份-11" transform="translate(46.000000, 232.000000)">
+                <g id="编组-7" transform="translate(0.000000, 12.000000)">
+                    <path d="M12,3 L18.7022469,5.51334258 C19.4828543,5.80607037 20,6.55231181 20,7.38600094 L20,12 C20,15.6090414 17.7612757,18.8395216 14.3820249,20.1067406 L12,21 L9.61797507,20.1067406 C6.23872432,18.8395216 4,15.6090414 4,12 L4,7.38600094 C4,6.55231181 4.51714567,5.80607037 5.29775312,5.51334258 L12,3 Z M15.71793,9.90932317 C15.5341186,9.63360596 15.1615969,9.55910164 14.8858797,9.74291311 L14.8858797,9.74291311 L10.884,12.409 L9.71793003,10.6593232 L9.6574108,10.5827015 C9.46058228,10.3712883 9.13402523,10.3274828 8.88587974,10.4929131 C8.61016252,10.6767246 8.5356582,11.0492462 8.71946968,11.3249634 L8.71946968,11.3249634 L10.2194697,13.5749634 L10.2799889,13.6515851 C10.4768174,13.8629983 10.8033745,13.9068038 11.05152,13.7413735 L11.05152,13.7413735 L15.55152,10.7413735 L15.6281416,10.6808542 C15.8395549,10.4840257 15.8833604,10.1574687 15.71793,9.90932317 Z" id="形状结合"></path>
                 </g>
             </g>
         </g>

src/assets/svgs/login_icon_mima.svg

@@ -1,16 +1,12 @@
 <?xml version="1.0" encoding="UTF-8"?>
 <svg width="24px" height="24px" viewBox="0 0 24 24" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
     <title>login_icon_mima</title>
-    <g id="H5" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd" stroke-linecap="round" stroke-linejoin="round">
-        <g id="账号密码登录-01" transform="translate(-61.000000, -262.000000)" stroke="#FFFFFF" stroke-width="1.4">
-            <g id="编组-9" transform="translate(45.000000, 195.000000)">
-                <g id="编组-11备份-11" transform="translate(16.000000, 67.000000)">
-                    <g id="编组-4" transform="translate(3.500000, 2.000000)">
-                        <path d="M2,9.06666667 L15,9.06666667 C16.1045695,9.06666667 17,9.96209717 17,11.0666667 L17,18.4 C17,19.5045695 16.1045695,20.4 15,20.4 L2,20.4 C0.8954305,20.4 8.94280938e-16,19.5045695 0,18.4 L0,11.0666667 C-3.57315355e-16,9.96209717 0.8954305,9.06666667 2,9.06666667 Z" id="矩形"></path>
-                        <line x1="5.1" y1="13.0333333" x2="5.1" y2="16.4333333" id="直线"></line>
-                        <line x1="11.9" y1="13.0333333" x2="11.9" y2="16.4333333" id="直线备份"></line>
-                        <path d="M13.6,3.4 L13.6,3.96666667 C13.6,6.78331889 11.3166522,9.06666667 8.5,9.06666667 C5.68334778,9.06666667 3.4,6.78331889 3.4,3.96666667 C3.4,3.4 3.4,2.83333333 3.4,2.26666667 C3.4,2.26666667 3.4,1.88888889 3.4,1.13333333 L3.4,0" id="路径" transform="translate(8.500000, 4.533333) scale(1, -1) translate(-8.500000, -4.533333) "></path>
-                    </g>
+    <g id="页面-1" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
+        <g id="密码登陆" transform="translate(-46.000000, -244.000000)">
+            <g id="编组-11备份-11" transform="translate(46.000000, 232.000000)">
+                <g id="编组-7" transform="translate(0.000000, 12.000000)">
+                    <path d="M17.9082108,10.4820031 C19.0127803,10.4820031 19.9082108,11.3774336 19.9082108,12.4820031 L19.9082108,19.4820031 C19.9082108,20.5865726 19.0127803,21.4820031 17.9082108,21.4820031 L5.90821082,21.4820031 C4.80364132,21.4820031 3.90821082,20.5865726 3.90821082,19.4820031 L3.90821082,12.4820031 C3.90821082,11.3774336 4.80364132,10.4820031 5.90821082,10.4820031 L17.9082108,10.4820031 Z M12,13.9 C11.6686292,13.9 11.4,14.1686292 11.4,14.5 L11.4,14.5 L11.4,17.5 L11.407853,17.5973231 C11.4543532,17.8824104 11.7017662,18.1 12,18.1 C12.3313708,18.1 12.6,17.8313708 12.6,17.5 L12.6,17.5 L12.6,14.5 L12.592147,14.4026769 C12.5456468,14.1175896 12.2982338,13.9 12,13.9 Z" id="形状结合" fill="#FFFFFF"></path>
+                    <path d="M16.5,6 L16.5,6.5 C16.5,8.98528137 14.4852814,11 12,11 C9.51471863,11 7.5,8.98528137 7.5,6.5 C7.5,6 7.5,5.5 7.5,5 C7.5,5 7.5,4.66666667 7.5,4 L7.5,3" id="路径" stroke="#FFFFFF" stroke-width="1.6" stroke-linecap="round" stroke-linejoin="round" transform="translate(12.000000, 7.000000) scale(1, -1) translate(-12.000000, -7.000000) "></path>
                 </g>
             </g>
         </g>

src/assets/svgs/login_icon_zhanghao.svg

@@ -1,18 +1,11 @@
 <?xml version="1.0" encoding="UTF-8"?>
 <svg width="24px" height="24px" viewBox="0 0 24 24" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
     <title>login_icon_zhanghao</title>
-    <g id="H5" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
-        <g id="账号密码登录-01" transform="translate(-61.000000, -213.000000)" stroke="#FFFFFF" stroke-width="1.4">
-            <g id="编组-9" transform="translate(45.000000, 195.000000)">
-                <g id="编组-11备份-12" transform="translate(16.000000, 16.000000)">
-                    <g id="编组-6" transform="translate(0.000000, 2.000000)">
-                        <path d="M11.8494862,9.25096392 C12.489192,9.25096392 13.0683369,9.51025591 13.4875553,9.92947434 C13.9067737,10.3486928 14.1660657,10.9278377 14.1660657,11.5675434 C14.1660657,12.2072492 13.9067737,12.7863941 13.4875553,13.2056125 C13.0683369,13.6248309 12.489192,13.8841229 11.8494862,13.8841229 C11.2097805,13.8841229 10.6306356,13.6248309 10.2114171,13.2056125 C9.79219871,12.7863941 9.53290671,12.2072492 9.53290671,11.5675434 C9.53290671,10.9278377 9.79219871,10.3486928 10.2114171,9.92947434 C10.6306356,9.51025591 11.2097805,9.25096392 11.8494862,9.25096392 Z" id="椭圆形" transform="translate(11.849486, 11.567543) rotate(5.000000) translate(-11.849486, -11.567543) "></path>
-                        <path d="M19.9138547,15.6893633 C20.3368515,14.7696871 20.5727354,13.7461465 20.5727354,12.6675122 C20.5727354,10.475382 19.5984583,8.51080632 18.0592935,7.18317458" id="路径" stroke-linejoin="round" transform="translate(19.316014, 11.436269) rotate(5.000000) translate(-19.316014, -11.436269) "></path>
-                        <rect id="矩形" x="2.83159827" y="19.6906567" width="18.7795588" height="3.08434641" rx="1.5421732"></rect>
-                        <path d="M19.8571184,5.48257944 C18.0067606,3.33255748 15.2655942,1.97113125 12.2064497,1.97113125 C6.63401837,1.97113125 2.11667026,6.48847937 2.11667026,12.0609107 C2.11667026,15.0424029 3.85080359,18.266989 5.90687169,20.1140943 M19.7147375,18.8011694 C20.5185786,17.9063266 21.1647649,16.8669949 21.6095833,15.7268876" id="形状" stroke-linecap="round" stroke-linejoin="round" transform="translate(11.863127, 11.042613) rotate(5.000000) translate(-11.863127, -11.042613) "></path>
-                        <line x1="21.3506284" y1="16.7231563" x2="14.154184" y2="12.6887744" id="路径"></line>
-                        <line x1="13.7923423" y1="10.3706389" x2="20.3112877" y2="6.20045932" id="路径"></line>
-                    </g>
+    <g id="页面-1" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
+        <g id="密码登陆" transform="translate(-46.000000, -180.000000)" fill="#FFFFFF">
+            <g id="编组-11备份-12" transform="translate(46.000000, 168.000000)">
+                <g id="编组-6" transform="translate(0.000000, 12.000000)">
+                    <path d="M19.261771,15.0167729 L19.261771,19.2047729 C19.261771,20.3093424 18.3663405,21.2047729 17.261771,21.2047729 L6.26177099,21.2047729 C5.15720149,21.2047729 4.26177099,20.3093424 4.26177099,19.2047729 L4.26177099,15.0167729 L19.261771,15.0167729 Z M13.861771,17.2047729 L9.86177099,17.2047729 L9.76444787,17.2126259 C9.4793606,17.2591261 9.26177099,17.5065391 9.26177099,17.8047729 C9.26177099,18.1030066 9.4793606,18.3504196 9.76444787,18.3969199 L9.86177099,18.4047729 L13.861771,18.4047729 L13.9590941,18.3969199 C14.2441814,18.3504196 14.461771,18.1030066 14.461771,17.8047729 C14.461771,17.473402 14.1931418,17.2047729 13.861771,17.2047729 Z M17.261771,2.20477288 C18.3663405,2.20477288 19.261771,3.10020338 19.261771,4.20477288 L19.261771,13.9077729 L4.26177099,13.9077729 L4.26177099,4.20477288 C4.26177099,3.10020338 5.15720149,2.20477288 6.26177099,2.20477288 L17.261771,2.20477288 Z" id="形状结合"></path>
                 </g>
             </g>
         </g>

src/components/PassCard.vue

@@ -0,0 +1,113 @@
+<template>
+    <div class="card" :class="{ prim: isChoose }">
+        <div class="title">青铜通行证</div>
+        <div class="img">
+            <van-image
+                width="100%"
+                radius="4"
+                fit="cover"
+                height="82"
+                src="https://fastly.jsdelivr.net/npm/@vant/assets/cat.jpeg"
+            />
+        </div>
+        <div class="price">
+            <span>¥</span>
+            <span>10.00</span>
+        </div>
+        <img src="@assets/png_xuanzhong.png" v-if="isChoose" class="choose-icon" alt="" />
+        <img src="@assets/png-weigouxuan.png" v-else class="choose-icon" alt="" />
+    </div>
+</template>
+
+<script>
+export default {
+    props: {
+        isChoose: {
+            type: Boolean,
+            default: false
+        }
+    }
+};
+</script>
+
+<style lang="less" scoped>
+.card {
+    background: @bg2;
+    border-radius: 4px;
+    padding: 10px 0 0;
+    width: calc(50vw - 24px);
+    position: relative;
+    display: inline-block;
+    margin: 8px;
+    overflow: hidden;
+    .choose-icon {
+        width: 36px;
+        height: 36px;
+        position: absolute;
+        right: 0;
+        top: 0;
+        z-index: 4;
+    }
+}
+.img {
+    padding: 0 12px;
+}
+
+.title {
+    font-size: 14px;
+    color: #ffa371;
+    line-height: 24px;
+    padding: 0 12px 12px;
+}
+
+.price {
+    .flex();
+    justify-content: center;
+    font-size: 16px;
+    font-weight: bold;
+    color: #ffffff;
+    height: 24px;
+    span {
+        &:first-child {
+            font-size: 14px;
+            font-weight: normal;
+            margin-right: 2px;
+        }
+    }
+}
+
+.prim {
+    .price {
+        background: linear-gradient(225deg, @prim2 0%, @prim 100%);
+        color: #1A1C2B;
+    }
+
+    &::before {
+        content: '';
+        position: absolute;
+        top: 1px;
+        left: 1px;
+        right: 1px;
+        bottom: 1px;
+        background-color: #25283d;
+        z-index: 1;
+        border-radius: 4px;
+    }
+
+    &::after {
+        content: '';
+        position: absolute;
+        top: 0;
+        left: 0;
+        right: 0;
+        bottom: 0;
+        z-index: 0;
+        background: linear-gradient(225deg, @prim2 0%, @prim 100%);
+    }
+
+    & > div {
+        z-index: 2;
+        position: relative;
+    }
+}
+</style>

src/components/RoomInfo.vue

@@ -0,0 +1,88 @@
+<template>
+    <div class="room">
+        <van-image
+            class="room-icon"
+            width="58"
+            height="58"
+            radius="4"
+            src="https://fastly.jsdelivr.net/npm/@vant/assets/cat.jpeg"
+        />
+
+        <div class="room-info">
+            <div class="text1">
+                <span>1v1</span>
+                <span>不限英雄 墨家机关道</span>
+            </div>
+            <div class="text2">
+                <span>人数</span>
+                <van-progress track-color="#ffffff10" :show-pivot="false" :percentage="50" />
+                <span>1/2</span>
+            </div>
+            <div class="text3">
+                <span>QQ区</span>
+                <span>创建时间 07-05 14:56</span>
+            </div>
+        </div>
+    </div>
+</template>
+<script>
+export default {};
+</script>
+<style lang="less" scoped>
+/deep/.van-progress__portion {
+    background: linear-gradient(316deg, @prim2 0%, @prim 100%);
+}
+.room-icon {
+    flex-shrink: 0;
+}
+.room {
+    background: @bg2;
+    padding: 20px 12px 12px;
+    .flex();
+    box-sizing: border-box;
+    .room-info {
+        color: #fff;
+        flex-grow: 1;
+        margin-left: 10px;
+        .text1 {
+            font-size: 14px;
+            color: #ffffff;
+            line-height: 24px;
+        }
+        .text2 {
+            font-size: 12px;
+            height: 24px;
+            .flex();
+            .van-progress {
+                flex-grow: 1;
+                margin: 0 6px;
+
+                & + span {
+                    font-size: 10px;
+                    color: #ffffff;
+                    line-height: 12px;
+                    background: linear-gradient(305deg, @prim2 0%, @prim 100%);
+                    -webkit-background-clip: text;
+                    -webkit-text-fill-color: transparent;
+                }
+            }
+        }
+        .text3 {
+            font-size: 12px;
+            color: #6a6d83;
+            line-height: 17px;
+            .flex();
+            span {
+                .flex();
+            }
+            span + span {
+                &::before {
+                    content: '|';
+                    line-height: 17px;
+                    margin: 0 6px;
+                }
+            }
+        }
+    }
+}
+</style>

src/components/product/productSmall.vue

@@ -1,6 +1,6 @@
 <template>
     <div class="product" @click="goNext(info)">
-        <van-image width="100%" height="140px" :radius="30" :src="getImg(info.pic)" fit="cover" />
+        <van-image width="100%" height="calc(40.8vw - 13px)" :radius="4" :src="getImg(info.pic)" fit="cover" />
 
         <!-- <div class="content">
             <div class="name van-ellipsis">
@@ -35,7 +35,7 @@ export default {
     width: 100%;
     background-color: @bg2;
     display: inline-block;
-    border-radius: 30px;
+    border-radius: 4px;
     overflow: hidden;
 
     .van-image {

src/plugins/colors.js

@@ -1,23 +1,14 @@
 export default {
     install(app, options) {
-        if (process.env.VUE_APP_PAGE_TYPE == 'raex') {
-            app.config.globalProperties.$colors = {
-                prim: '#3AB200',
-                warn: '#3AB200',
-                font0: '#000000',
-                bg: '#ffffff',
-                bg3: '#f5f7fa',
-                bgBlack: '#0f0f0f'
-            };
-        } else {
-            app.config.globalProperties.$colors = {
-                prim: '#FDFB60',
-                warn: '#FF8F3E',
-                font0: '#ffffff',
-                bg: '#181818',
-                bg3: '#0f0f0f'
-            };
-        }
+        app.config.globalProperties.$colors = {
+            prim: '#F6ABF0',
+            prim2:'#10F7EE',
+            warn: '#FFE3A3',
+            font0: '#fffff',
+            bg: '#1A1C2B',
+            bg3: '#ffffff',
+            bgBlack: '#0f0f0f'
+        };
         if (process.env.NODE_ENV == 'development') {
             app.config.globalProperties.$rating = 10;
         } else {

src/router/index.js

@@ -74,27 +74,9 @@ const routes = [
                 }
             },
             {
-                path: '/discover',
-                name: 'discover',
-                component: () => import('../views/Discover.vue'),
-                meta: {
-                    pageType: Page.Every,
-                    menuPage: true
-                }
-            },
-            {
-                path: '/creator',
-                name: 'creator',
-                component: () => import('../views/Creator.vue'),
-                meta: {
-                    pageType: Page.Every,
-                    menuPage: true
-                }
-            },
-            {
-                path: '/store',
-                name: 'store',
-                component: () => import('../views/Store.vue'),
+                path: '/shop',
+                name: 'shop',
+                component: () => import('../views/Shop.vue'),
                 meta: {
                     pageType: Page.Every,
                     menuPage: true

src/styles/app.less

@@ -1,4 +1,5 @@
 :root {
+    --van-text-color-3: #6a6d83;
     --van-primary-color: @prim;
     --van-tabbar-item-active-background-color: transparent;
     --van-tabbar-background-color: @bg;
@@ -7,15 +8,17 @@
     --van-text-color: @text0;
     --van-gray-6: @text3;
     --van-gray-3: @bg3;
-    --van-tabbar-item-active-color: @textP;
+    --van-orange: @warn;
+    --van-tabbar-item-text-color: #4a4c5d;
+    --van-tabbar-item-active-color: #fff;
     --van-button-plain-background-color: transparent;
     --van-grid-item-content-background-color: transparent;
     --van-button-mini-height: 26px;
     --van-button-mini-font-size: 14px;
     --van-tabs-nav-background-color: @bg;
     --van-tabs-default-color: @prim;
-    --van-tabs-bottom-bar-color: @prim;
-    --van-tab-active-text-color: @prim;
+    --van-tabs-bottom-bar-color: #fff;
+    --van-tab-active-text-color: #fff;
     --van-tab-disabled-text-color: #fff;
     --van-cell-border-color: @bg3;
     --van-cell-background-color: transparent;
@@ -43,6 +46,10 @@
     --sab: env(safe-area-inset-bottom);
     --sal: env(safe-area-inset-left);
     --van-button-default-color: #626366;
+    --van-tabbar-item-font-size: 10px;
+    --van-tabbar-item-icon-margin-bottom: 2px;
+    --van-button-icon-size: 24px;
+    --van-field-input-text-color: #fff;
 }
 
 [contenteditable='true'],
@@ -95,8 +102,8 @@ body {
     opacity: 0;
 }
 input:-webkit-autofill {
-    box-shadow: 0 0 0px 1000px @bg inset;
-    -webkit-text-fill-color: @text0;
+    box-shadow: 0 0 0px 1000px #1a1c2b inset;
+    -webkit-text-fill-color: #6a6d83;
 }
 
 .van-dialog {
@@ -145,53 +152,58 @@ input:-webkit-autofill {
     height: 170px;
 }
 
-.van-tab {
-    color: @text3 !important;
-    font-size: @font2;
-    &.van-tab--active {
-        color: @prim !important;
-        font-weight: bold;
-    }
-    padding: 0 0 !important;
-    flex-shrink: 0 !important;
-    flex-grow: 0 !important;
-    margin-right: 50px;
-    word-break: keep-all;
-}
-.van-tabs__nav--line.van-tabs__nav--complete {
-    padding-left: 16px !important;
-    padding-right: 16px !important;
-    border-top: 1px solid #202122;
-    background-color: transparent;
-}
 .van-tabs__line {
     bottom: 20px;
 }
 .van-sticky--fixed {
     background-color: @bg;
 }
-.van-tab--active {
-    .tab {
-        .van-icon-arrow-up {
-            color: #646566;
-        }
-    }
-    &.asc {
-        .tab {
-            .van-icon-arrow-up {
-                color: @prim;
-            }
-            .van-icon-arrow-down {
-                color: #646566;
-            }
-        }
-    }
-}
 
+.van-button--small {
+    border-radius: 4px;
+}
+.van-button--block {
+    border-radius: 2px;
+}
 .van-button--primary {
     // background: linear-gradient(135deg, @prim 0%, #ff8f3e 100%);
     border-width: 0;
     color: @btnText;
+    background: linear-gradient(-225deg, @prim 0%, @prim2 100%);
+
+    &.van-button--plain {
+        &::before {
+            background-color: @bg;
+            width: calc(100% - 2px);
+            height: calc(100% - 2px);
+            z-index: 1;
+            opacity: 1;
+            border-width: 0;
+            left: 1px;
+            top: 1px;
+            transform: translateX(0);
+        }
+        &::after {
+            content: '';
+            background: linear-gradient(-225deg, #f6abf0 0%, #10f7ee 100%);
+            position: absolute;
+            top: 0;
+            left: 0;
+            right: 0;
+            bottom: 0;
+            z-index: 0;
+        }
+        .van-button__content {
+            z-index: 2;
+            position: relative;
+        }
+
+        .van-button__text {
+            background: linear-gradient(-225deg, @prim 0%, @prim2 100%);
+            -webkit-background-clip: text;
+            -webkit-text-fill-color: transparent;
+        }
+    }
 }
 
 .popup-content {
@@ -274,18 +286,6 @@ input:-webkit-autofill {
     }
 }
 
-.darkTabs {
-    background-color: #222426;
-    .van-tab.van-tab--active {
-        color: #43ce00 !important;
-    }
-    .van-tabs__line {
-        background-color: #43ce00 !important;
-        width: 16px;
-        height: 2px;
-    }
-}
-
 .van-action-sheet {
     .van-action-sheet__header {
         border-bottom: 1px solid #f2f4f5;
@@ -308,3 +308,6 @@ input:-webkit-autofill {
         padding-top: 16px;
     }
 }
+.van-tabbar-item__icon img {
+    height: 28px;
+}

src/styles/common/theme.less

@@ -1,23 +1,23 @@
 @divider: #f2f4f5;
-@prim: #3ab200;
-@prim2: #43ce00;
+@prim: #F6ABF0;
+@prim2: #10F7EE;
 @success: #67c23a;
 @danger: #f56c6c;
-@warn: #3ab200;
+@warn: #FFE3A3;
 @textP: #3ab200;
 @text0: #000000;
 @text1: #323233;
-@text2: #606266;
+@text2: #080909;
 @text3: #939599;
 @text4: #939599;
 @border1: #dcdfe6;
 @border2: #f2f3f5;
 @border3: #dfe1e6;
 @border4: #f2f6fc;
-@bg: #ffffff;
-@bg2: #ffffff;
-@bg3: #f5f7fa;
-@bgProductDetail: #0f0f0f;
+@bg: #1A1C2B;
+@bg2: #25283D;
+@bg3: #141624;
+@bgProductDetail: #1A1C2B;
 @menu-text-color: #bfcbd9;
 @menu-text-color-active: #409eff;
 @menu-bg: #324157;
@@ -29,5 +29,5 @@
 @font3: 16px;
 @font4: 20px;
 @hotBg: #f5f7fa;
-@btnText: #fff;
+@btnText: #1A1C2B;
 @tabBorder: #f5f7fa;

src/views/Discover.vue

@@ -1,674 +0,0 @@
-<template>
-    <van-pull-refresh
-        success-text="加载成功"
-        success-duration="500"
-        class="discover"
-        v-model="isLoading"
-        @refresh="onRefresh"
-    >
-        <van-sticky ref="top">
-            <div class="padding-safe-top">
-                <div class="top">
-                    <img src="@assets/nav_logo.png" class="logo" alt="" />
-
-                    <div class="search" @click="$router.push('/productSearch')">
-                        <img src="@assets/icon-sosuo.png" alt="" />
-                        <span>搜索你要的精彩</span>
-                    </div>
-                </div>
-            </div>
-        </van-sticky>
-        <!-- <swiper :slides-per-view="3" :space-between="16" class="mySwiper" :autoplay="{ delay: 3500 }">
-            <swiper-slide v-for="(item, index) in banners" :key="item.id">
-                <van-image
-                    width="100%"
-                    radius="8"
-                    height="calc(33vw - 21.3px)"
-                    :src="item.pic"
-                    fit="cover"
-                    @click="goNext(item)"
-                />
-                <div class="name">
-                    <img :src="icons[index]" alt="" />
-                    <span>{{ item.name }}</span>
-                </div>
-            </swiper-slide>
-        </swiper> -->
-
-        <div class="menu">
-            <div class="menu-item menu-left" @click="goHall">
-                <div class="text1">
-                    <img src="../assets/info_icon_yishuzhanguan.png" alt="" />
-                    <span>艺术展览</span>
-                </div>
-                <div class="text2">环球捕猎顶级艺术展览，尽在绿洲宇宙！</div>
-                <img src="../assets/discover/yishuzhanlan-diwen.png" alt="" class="menu-bg" />
-            </div>
-            <div class="menu-right">
-                <div class="menu-item" @click="$router.push('/hopeMarket')">
-                    <div class="text1">
-                        <img src="../assets/discover/info_icon_banquanshichang.png" alt="" />
-                        <span>版权市场</span>
-                    </div>
-                    <div class="text2">环球捕猎顶级艺术展览，尽在绿洲宇宙！</div>
-                    <img src="../assets/discover/banquanshichang-diwen.png" alt="" class="menu-bg" />
-                </div>
-                <div
-                    class="menu-item"
-                    @click="
-                        goWin(
-                            'https://shop103867459.m.youzan.com/v2/showcase/homepage?alias=Zp3noaegLR&reft=1649311507717_1652343999681&spm=f.100904662_f.100904662_t.1688564850'
-                        )
-                    "
-                >
-                    <div class="text1">
-                        <img src="../assets/info_icon_yanshengping.png" alt="" />
-                        <span>艺术衍生品商城</span>
-                    </div>
-                    <div class="text2">最酷炫的艺术衍生品集成店，快来pick你的精彩！</div>
-                    <img src="../assets/shangcheng-diwen.png" alt="" class="menu-bg" />
-                </div>
-            </div>
-        </div>
-
-        <van-grid :border="false" :column-num="$store.state.review ? 2 : 4">
-            <van-grid-item
-                text="绿洲头条"
-                :to="{
-                    path: '/newsList'
-                }"
-            >
-                <template v-slot:icon>
-                    <img class="grid-img" src="@assets/discover/info_icon_lvzhoutoutiao.png" />
-                </template>
-            </van-grid-item>
-            <van-grid-item
-                text="绿洲公益"
-                :to="{ name: 'newsDetail', query: { id: 5528513 } }"
-                v-if="!$store.state.review"
-            >
-                <template v-slot:icon>
-                    <img class="grid-img" src="@assets/discover/info_icon_lvzhougongyi.png" />
-                </template>
-            </van-grid-item>
-            <van-grid-item text="拍卖中心" @click="goAuction" v-if="!$store.state.review">
-                <template v-slot:icon>
-                    <img class="grid-img" src="@assets/info_icon_paimaixilie.png" />
-                </template>
-            </van-grid-item>
-
-            <van-grid-item text="铸造中心" :to="{ path: '/activityList' }">
-                <template v-slot:icon>
-                    <img class="grid-img" src="@assets/info_icon_weshoushichang.png" />
-                </template>
-            </van-grid-item>
-            <!-- <van-grid-item text="铸造商店" @click="wait">
-                <template v-slot:icon>
-                    <img class="grid-img" src="@assets/info_icon_zhuzaoshangdian.png" />
-                </template>
-            </van-grid-item> -->
-        </van-grid>
-
-        <div class="box" ref="box">
-            <van-sticky :offset-top="tabOffSet">
-                <van-tabs
-                    class="box-tabs"
-                    v-model:active="sort"
-                    shrink
-                    line-width="16"
-                    :before-change="beforeChange"
-                    line-height="2"
-                    @change="getList(true)"
-                >
-                    <van-tab
-                        v-for="(item, index) in selectOptions"
-                        :key="index"
-                        :title="item.label"
-                        :name="item.value"
-                    ></van-tab>
-                </van-tabs>
-            </van-sticky>
-
-            <van-list
-                style="padding-bottom: 100px"
-                class="box-list"
-                v-model:loading="loading"
-                :finished="finished"
-                finished-text=""
-                @load="getList"
-                :class="{ hotList: sort === 'hot' }"
-                :immediate-check="false"
-            >
-                <template v-for="(item, index) in list" :key="item.id">
-                    <product-info v-if="sort === 'collection'" v-model:info="list[index]" dark></product-info>
-                    <creator-small v-else-if="sort === 'creator'" v-model:info="list[index]"></creator-small>
-                    <show-info v-else-if="sort === 'hot'" v-model:info="list[index]" list></show-info>
-                </template>
-            </van-list>
-        </div>
-
-        <div class="tabbar-placeholder"></div>
-        <img src="../assets/icon_zhiding.png" @click="goTop" class="goTop" v-if="bodyScroll > 100" alt="" />
-    </van-pull-refresh>
-</template>
-
-<script>
-import product from '../mixins/product';
-import ProductInfo from '../components/product/productInfo.vue';
-import banner from '../mixins/banner';
-import CreatorSmall from '../components/creator/CreatorSmall.vue';
-import ShowInfo from '../components/asset/showInfo.vue';
-import { useCssVar } from '@vueuse/core';
-export default {
-    name: 'discover',
-    inject: ['bar', 'setKeeps', 'scrollWrapper', 'changeScroll', 'bodyScroll', 'safeTop'],
-    mixins: [banner, product],
-    components: {
-        ProductInfo,
-        CreatorSmall,
-        ShowInfo
-    },
-    data() {
-        return {
-            stiky: null,
-            banners: [],
-            box: [],
-            products: [],
-            hots: [],
-            miners: [],
-            list: [],
-            loading: false,
-            finished: false,
-            page: 0,
-            empty: false,
-            scrollTop: 0,
-            sort: 'collection',
-            selectOptions: [
-                {
-                    label: '最新发布',
-                    value: 'collection'
-                },
-                {
-                    label: '艺术机构',
-                    value: 'creator'
-                },
-                {
-                    label: '热力展览',
-                    value: 'hot'
-                }
-            ],
-            icons: [
-                require('../assets/info_icon_lvzhoutoutiao.png'),
-                require('../assets/info_icon_lvzhougongyi.png'),
-                require('../assets/info_icon_banquanshichang.png')
-            ],
-            swiperRef: null,
-            notLike: '',
-            safeTop: useCssVar('--safe-top', document.body)
-        };
-    },
-    computed: {
-        tabOffSet() {
-            return Number((this.safeTop || '0').replace('px', '')) + 50;
-        }
-    },
-    mounted() {
-        this.$store.dispatch('getUsedBuy');
-        this.getInit();
-
-        if (window.cordova && StatusBar && StatusBar.isVisible) {
-            StatusBar.styleLightContent();
-        }
-        this.$http
-            .get('/sysConfig/get/collect_not')
-            .then(res => {
-                console.log(res);
-                this.notLike = res.value;
-                return Promise.resolve();
-            })
-            .catch(e => {
-                return Promise.resolve();
-            })
-            .then(() => {
-                this.getList();
-            });
-    },
-    methods: {
-        getInit() {
-            this.$toast.loading({
-                message: '加载中...',
-                forbidClick: true
-            });
-            return this.getBanner();
-            // this.getProduct('BLIND_BOX', this.sortOptions['精选盲盒']).then(res => {
-            //     this.box = res;
-            // });
-            // this.getProduct('DEFAULT', this.sortOptions['最HOT收藏品'], 'TRANSFER', 4).then(res => {
-            //     this.hots = res;
-            // });
-            // this.getProduct('DEFAULT', this.sortOptions['本期推荐']).then(res => {
-            //     this.products = res;
-            // });
-            // this.getMiner();
-        },
-        setSwiperRef(ref) {
-            this.swiperRef = ref;
-        },
-        getProduct(type = '', sort = 'sort,desc', source = 'OFFICIAL', size = 4) {
-            return this.$http
-                .post(
-                    '/collection/all',
-                    {
-                        page: 0,
-                        size: size,
-                        query: {
-                            type: type,
-                            onShelf: true,
-                            del: false,
-                            source: source
-                        },
-                        sort: sort
-                    },
-                    { body: 'json' }
-                )
-                .then(res => {
-                    return Promise.resolve(res.content);
-                });
-        },
-        getBanner() {
-            return this.$http
-                .post(
-                    '/banner/all',
-                    {
-                        query: {
-                            type: 'DISCOVER',
-                            del: false
-                        },
-                        sort: 'sort,asc;createdAt,desc'
-                    },
-                    { body: 'json' }
-                )
-                .then(res => {
-                    this.banners = res.content;
-                    this.$toast.clear();
-                    if (this.swiperRef) {
-                        this.swiperRef.update();
-                    }
-                });
-        },
-        beforeChange(index) {
-            // if (index === 'hot') {
-            //     this.wait();
-            //     return false;
-            // }
-            return true;
-        },
-        getList(isFirst = false) {
-            if (isFirst) {
-                this.page = 0;
-                this.list = [];
-                this.changeScroll(this.$refs.box.offsetTop - 50);
-            }
-            this.loading = true;
-            this.finished = false;
-            this.empty = false;
-            let url = '/collection/all';
-            let query = {
-                onShelf: true,
-                del: false,
-                source: this.$store.state.reviewPay ? 'OFFICIAL' : '',
-                notLike: this.notLike
-            };
-            let sort = 'id,desc';
-            if (this.sort === 'creator') {
-                url = '/user/all';
-                query = {
-                    type: 'MINTER',
-                    del: false
-                };
-            } else if (this.sort === 'hot') {
-                url = 'showroom/all';
-                query = {
-                    del: false,
-                    status: 'SUCCESS',
-                    publish: true
-                };
-                sort = 'heats,desc';
-            } else {
-                query.minPrice = 0;
-            }
-
-            return this.$http
-                .post(
-                    url,
-                    {
-                        page: this.page,
-                        size: 20,
-                        query: query,
-                        sort: sort
-                    },
-                    { body: 'json' }
-                )
-                .then(res => {
-                    if (res.first) {
-                        this.list = res.content;
-                    } else {
-                        this.list = [...this.list, ...res.content];
-                    }
-                    this.empty = res.empty;
-                    this.loading = false;
-                    this.finished = res.last;
-                    if (!res.last) {
-                        this.page = this.page + 1;
-                    }
-                });
-        },
-        getMiner() {
-            this.$http
-                .post(
-                    '/user/all',
-                    {
-                        page: 0,
-                        query: { minter: true },
-                        size: 5,
-                        sort: 'sales,desc'
-                    },
-                    { body: 'json' }
-                )
-                .then(res => {
-                    this.miners = res.content;
-                    // console.log(this.miners);
-                });
-        },
-        onRefresh() {
-            this.page = 0;
-            Promise.all([this.getInit(), this.getList(), this.$store.dispatch('getUsedBuy')]).then(res => {
-                this.isLoading = false;
-            });
-        },
-        goTop() {
-            this.changeScroll(0, true);
-        },
-        goHall() {
-            this.$http
-                .get('/sysConfig/get/hall_show')
-                .then(res => {
-                    if (res.value === true || res.value === '1') {
-                        this.$router.push('/hallList');
-                    } else {
-                        return Promise.reject();
-                    }
-                })
-                .catch(() => {
-                    this.wait();
-                });
-        },
-        goAuction() {
-            this.$http
-                .get('/sysConfig/get/auction_show')
-                .then(res => {
-                    if (res.value === true || res.value === '1') {
-                        this.$router.push('/auction');
-                    } else {
-                        return Promise.reject();
-                    }
-                })
-                .catch(() => {
-                    this.wait();
-                });
-        }
-    },
-    activated() {
-        this.$nextTick(() => {
-            this.changeScroll(this.scrollTop);
-        });
-        if (window.cordova && StatusBar && StatusBar.isVisible) {
-            StatusBar.styleLightContent();
-        }
-    },
-    beforeRouteLeave(to, from, next) {
-        if (!to.meta.menuPage || to.path === '/hall') {
-            this.scrollTop = this.scrollWrapper.scrollTop;
-            this.setKeeps(['index', 'discover']);
-        } else {
-            this.scrollTop = 0;
-            this.setKeeps(['index', 'discover'], false);
-        }
-        next();
-    }
-};
-</script>
-
-<style lang="less" scoped>
-.top {
-    display: flex;
-    padding: 9px 16px;
-    background-color: #272b2e;
-    display: flex;
-    align-items: center;
-    .logo {
-        width: auto;
-        height: 24px;
-        display: block;
-    }
-
-    .search {
-        flex-grow: 1;
-        background-color: #373b3e;
-        display: flex;
-        align-items: center;
-        margin-left: 10px;
-        padding: 4px 20px;
-        border-radius: 21px;
-        img {
-            width: 16px;
-            height: 16px;
-            margin-right: 10px;
-        }
-        font-size: 14px;
-        color: @text3;
-        line-height: 24px;
-    }
-}
-
-.discover {
-    background-color: #272b2e;
-}
-
-.mySwiper {
-    margin: 16px 16px 0;
-
-    .swiper-slide {
-        position: relative;
-        border-radius: 8px;
-        overflow: hidden;
-        .van-image {
-            display: block;
-        }
-        .name {
-            position: absolute;
-            bottom: 0;
-            left: 0;
-            right: 0;
-            background-color: rgba(0, 0, 0, 0.5);
-            .flex();
-            justify-content: center;
-            height: 24px;
-            img {
-                width: 18px;
-                height: 18px;
-            }
-            span {
-                font-size: 12px;
-                font-weight: bold;
-                color: #ffffff;
-                line-height: 24px;
-                margin-left: 2px;
-            }
-        }
-    }
-}
-
-.menu {
-    .flex();
-    padding: 16px 16px 0;
-    justify-content: space-between;
-    .menu-item {
-        width: calc(50vw - 16px);
-        box-sizing: border-box;
-        position: relative;
-        padding: 8px;
-        background: linear-gradient(132deg, #3dbb00 0%, #01d890 100%);
-        border-radius: 6px 8px 8px;
-
-        .text1 {
-            .flex();
-            img {
-                width: 18px;
-                height: 18px;
-            }
-            span {
-                font-size: 14px;
-                font-weight: bold;
-                color: #ffffff;
-                line-height: 24px;
-                margin-left: 2px;
-            }
-        }
-
-        .text2 {
-            font-size: 10px;
-            color: rgba(255, 255, 255, 0.8);
-            line-height: 12px;
-            margin-top: 6px;
-        }
-
-        .menu-bg {
-            position: absolute;
-            right: 0;
-            top: 0;
-            width: 54px;
-            height: 34px;
-        }
-    }
-    .menu-left + .menu-right {
-        margin-left: 12px;
-    }
-    .menu-left {
-        align-self: stretch;
-        .menu-bg {
-            width: 100%;
-            height: 100%;
-        }
-
-        background: linear-gradient(136deg, #0bc734 0%, #0ed0d8 100%);
-    }
-    .menu-right {
-        .menu-item + .menu-item {
-            margin-top: 12px;
-        }
-
-        .menu-item {
-            &:nth-child(1) {
-                background: linear-gradient(132deg, #6c7df9 0%, #87acf0 100%);
-            }
-
-            &:nth-child(2) {
-                background: linear-gradient(132deg, #2f87d7 0%, #0ad2e6 100%);
-            }
-        }
-    }
-}
-
-.grid-img {
-    display: block;
-    width: 32px;
-    height: 32px;
-}
-// .van-grid {
-//     margin-top: 12px;
-// }ƒ
-/deep/.van-tab.van-tab--active {
-    color: #fff !important;
-    font-size: 16px;
-}
-/deep/.van-tabs__line {
-    background-color: #fff;
-}
-/deep/ .van-grid-item__content {
-    padding: 16px 0 16px;
-}
-/deep/ .van-grid-item__text {
-    color: #fff;
-    font-size: @font1;
-    line-height: 18px;
-    margin-top: 4px;
-}
-
-.title {
-    padding: 16px 20px 8px;
-    color: @prim;
-    font-size: @font3;
-    font-weight: bold;
-}
-
-.box-list {
-    // display: flex;
-    // flex-wrap: wrap;
-    padding: 0 8px 2px;
-
-    &.hotList {
-        padding: 16px;
-        background: #272b2e;
-
-        .showInfo + .showInfo {
-            margin-top: 16px;
-        }
-        .showInfo {
-            background: #373b3e;
-            border-radius: 12px;
-        }
-    }
-    min-height: 100vh;
-}
-
-/deep/.van-tabs__nav--line.van-tabs__nav--complete {
-    border-top-width: 0px !important;
-}
-
-/deep/.van-tab {
-    color: #fff;
-    flex: 0;
-    // padding: 20px;
-    flex-shrink: 0;
-    // min-width: 74px;
-    font-size: 16px;
-    margin-right: 30px !important;
-    &.van-tab--active {
-        color: @prim;
-    }
-}
-.casting {
-    padding-bottom: 10px;
-}
-.van-tabs {
-    border-top: 2px solid #373b3e;
-}
-/deep/.van-tab {
-    margin-right: 0;
-}
-
-/deep/.van-sticky--fixed {
-    background-color: #272b2e;
-}
-.goTop {
-    position: fixed;
-    right: 16px;
-    bottom: 70px;
-    bottom: calc(env(safe-area-inset-bottom) + 70px);
-    width: 44px;
-    height: 44px;
-    display: block;
-    z-index: 20;
-}
-</style>

src/views/DiscoverPre.vue

@@ -1,295 +0,0 @@
-<template>
-    <div class="discover">
-        <van-sticky ref="top" :offset-top="bar && bar.show ? bar.height : 0">
-            <div class="top">
-                <div class="top-btn">
-                    <div class="btn active">收藏探索</div>
-                    <div class="btn" @click="$router.replace('/creator')">铸造者</div>
-                </div>
-                <div class="search" @click="$router.push('/productSearch')">
-                    <img src="@assets/svgs/search.svg" alt="" />
-                </div>
-            </div>
-        </van-sticky>
-
-        <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" @click="goNext(item)" />
-            </swiper-slide>
-        </swiper>
-
-        <van-grid :border="false">
-            <van-grid-item text="精选推荐" :to="{ path: '/productList' }">
-                <template v-slot:icon>
-                    <img class="grid-img" src="@assets/info_icon_jingxuanxilie.png" />
-                </template>
-            </van-grid-item>
-            <van-grid-item
-                text="原创系列"
-                :to="{
-                    path: '/productList',
-                    query: {
-                        type: 'DEFAULT'
-                    }
-                }"
-            >
-                <template v-slot:icon>
-                    <img class="grid-img" src="@assets/info_icon_yuanchangxilie.png" />
-                </template>
-            </van-grid-item>
-            <van-grid-item
-                text="数字盲盒"
-                :to="{
-                    path: '/productList',
-                    query: {
-                        type: 'BLIND_BOX'
-                    }
-                }"
-            >
-                <template v-slot:icon>
-                    <img class="grid-img" src="@assets/info_icon_manghexilie.png" />
-                </template>
-            </van-grid-item>
-            <van-grid-item text="拍卖系列" @click="wait">
-                <template v-slot:icon>
-                    <img class="grid-img" src="@assets/info_icon_paimaixilie.png" />
-                </template>
-            </van-grid-item>
-        </van-grid>
-
-        <div class="title">本期推荐</div>
-
-        <van-list class="box-list" v-model:loading="loading" :finished="finished" finished-text="" @load="getList">
-            <template v-for="(item, index) in list" :key="item.id">
-                <product-info v-model:info="list[index]"></product-info>
-            </template>
-        </van-list>
-
-        <div class="tabbar-placeholder"></div>
-    </div>
-</template>
-
-<script>
-import { Swiper, SwiperSlide } from 'swiper/vue';
-
-import 'swiper/swiper.min.css';
-import 'swiper/swiper-bundle.min.css';
-
-import SwiperCore, { Pagination, Autoplay } from 'swiper';
-
-// install Swiper modules
-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,
-        ProductInfo
-    },
-    data() {
-        return {
-            stiky: null,
-            banners: [],
-            list: [],
-            loading: false,
-            finished: false,
-            page: 0,
-            empty: false
-        };
-    },
-    mounted() {
-        this.getInit();
-    },
-    methods: {
-        getInit() {
-            this.$toast.loading({
-                message: '加载中...',
-                forbidClick: true
-            });
-            this.getBanner();
-        },
-        getBanner() {
-            this.$http
-                .post(
-                    '/banner/all',
-                    {
-                        query: {
-                            type: 'DISCOVER'
-                        },
-                        sort: 'sort,asc;createdAt,desc'
-                    },
-                    { body: 'json' }
-                )
-                .then(res => {
-                    this.banners = res.content;
-                    this.$toast.clear();
-                });
-        },
-        getList() {
-            if (this.page === 0) {
-                this.list = [];
-            }
-            this.loading = true;
-            this.finished = false;
-            this.empty = false;
-            this.$http
-                .post(
-                    '/collection/all',
-                    {
-                        page: this.page,
-                        size: 20,
-                        query: {
-                            onShelf: true,
-                            del: false
-                        },
-                        sort: 'createdAt,desc'
-                    },
-                    { body: 'json' }
-                )
-                .then(res => {
-                    this.list = [...this.list, ...res.content];
-                    this.empty = res.empty;
-                    this.loading = false;
-                    this.finished = res.last;
-                    if (!this.finished) {
-                        this.page = this.page + 1;
-                    }
-                });
-        }
-    }
-};
-</script>
-
-<style lang="less" scoped>
-.top {
-    display: flex;
-    padding: 10px 16px;
-    background-color: @bg;
-    .top-btn {
-        flex-grow: 1;
-        .btn {
-            font-size: 16px;
-            // font-family: ZhenyanGB;
-            // font-weight: 400;
-            line-height: 26px;
-            display: inline-block;
-            vertical-align: text-bottom;
-
-            &.active {
-                color: @prim;
-                font-size: 20px;
-                font-weight: bold;
-                line-height: 30px;
-            }
-        }
-
-        .btn + .btn {
-            margin-left: 30px;
-        }
-    }
-}
-
-.discover {
-    background-color: @bg3;
-}
-
-::v-deep(.mySwiper) {
-    width: calc(100vw - 32px);
-    height: calc(50vw - 16px);
-    padding-top: 12px;
-
-    .swiper-pagination {
-        bottom: 12px;
-    }
-
-    .swiper-pagination-bullet {
-        width: 6px;
-        height: 2px;
-        border-radius: 1px;
-        background: #d7d7d7;
-    }
-
-    .swiper-pagination-bullet-active {
-        background: @prim;
-    }
-}
-
-.swiper-slide {
-    text-align: center;
-    font-size: 18px;
-
-    /* Center slide text vertically */
-    display: -webkit-box;
-    display: -ms-flexbox;
-    display: -webkit-flex;
-    display: flex;
-    -webkit-box-pack: center;
-    -ms-flex-pack: center;
-    -webkit-justify-content: center;
-    justify-content: center;
-    -webkit-box-align: center;
-    -ms-flex-align: center;
-    -webkit-align-items: center;
-    align-items: center;
-}
-
-.swiper-slide img {
-    display: block;
-    width: 100%;
-    height: 100%;
-    object-fit: cover;
-    border-radius: 4px;
-}
-.grid-img {
-    display: block;
-    width: 38px;
-    height: 38px;
-}
-.van-grid {
-    margin-top: 12px;
-}
-/deep/ .van-grid-item__content {
-    padding: 14px 0 16px;
-}
-/deep/ .van-grid-item__text {
-    color: #fff;
-    font-size: 13px;
-    line-height: 18px;
-    margin-top: 4px;
-}
-
-.title {
-    padding: 16px 20px 8px;
-    color: @prim;
-    font-size: 18px;
-    font-weight: bold;
-}
-
-.box-list {
-    // display: flex;
-    // flex-wrap: wrap;
-    padding: 0 8px 100px;
-}
-
-/deep/.van-tab {
-    color: #fff;
-    flex: 0;
-    padding: 20px;
-    flex-shrink: 0;
-    min-width: 74px;
-
-    &.van-tab--active {
-        color: @prim;
-    }
-}
-
-/deep/ .van-tabs__line {
-    bottom: 20px;
-}
-</style>

src/views/Home.vue

@@ -8,65 +8,44 @@
         @refresh="onRefresh"
         pageType="light"
     >
-        <div class="filter-bg" :style="{ backgroundImage: `url(${bgImg})` }"></div>
-        <div class="welcom">
-            <div class="left">
-                <div class="text1">WELCOME</div>
-                <div class="text2" :class="{ text3: isLogin }">{{ isLogin ? `${userInfo.nickname}!` : '探索者!' }}</div>
-            </div>
-            <van-image
-                width="38"
-                height="38"
-                :radius="32"
-                :class="{ activeAvatar: isLogin && userInfo.useCollectionPic }"
-                :src="isLogin ? userInfo.avatar : require('@assets/img_default_photo.png')"
-            ></van-image>
-        </div>
-
-        <swiper pagination :space-between="16" class="mySwiper" :autoplay="{ delay: 3500 }" v-if="banners.length > 0">
+        <swiper :space-between="16" class="mySwiper" :autoplay="{ delay: 3500 }" v-if="banners.length > 0">
             <swiper-slide v-for="item in banners" :key="item.id">
                 <product-small :info="item"></product-small>
             </swiper-slide>
         </swiper>
 
-        <!-- <div class="tabs" v-if="!empty">
-            <div class="tab" :class="{ active: active === 0 }" @click="active = 0">数字藏品</div>
-            <div class="tab" :class="{ active: active === 1 }" @click="active = 1">产品新闻端</div>
-        </div> -->
+        <div class="search">
+            <van-button type="primary" size="small" :icon="require('@assets/png-chuangjianfangjian.png')">
+                创建房间</van-button
+            >
 
-        <div class="list-top">
-            <van-badge :dot="isNewCollections" :offset="[-35, 15]">
-                <div class="text1" :class="{ active: active === 0 }" @click="changeActive(0)">数字文创</div>
-            </van-badge>
-            <van-badge :dot="isNewNews" :offset="[-35, 15]">
-                <div class="text1" :class="{ active: active === 1 }" @click="changeActive(1)">绿洲头条</div>
-            </van-badge>
+            <van-search v-model="search" left-icon=" " show-action placeholder="输入房间号码" action-text="搜索" />
         </div>
 
-        <swiper class="listSwiper" autoHeight @swiper="setSwiperRef" @slideChange="changeSwiper">
-            <swiper-slide>
-                <product-large
-                    v-for="(item, index) in products"
-                    :key="index"
-                    v-model:info="products[index].obj"
-                    :type="item.type"
-                ></product-large
-            ></swiper-slide>
-            <swiper-slide>
-                <news-small
-                    v-for="(item, index) in news"
-                    :key="index"
-                    v-model:info="news[index].obj"
-                    type="light"
-                ></news-small>
-                <!-- <product-large
-                    v-for="(item, index) in news"
-                    :key="index"
-                    v-model:info="news[index].obj"
-                    :type="item.type"
-                ></product-large> -->
-            </swiper-slide>
-        </swiper>
+        <div class="room-list">
+            <div class="room-title">房间列表</div>
+
+            <div class="tab-content">
+                <van-tabs swipeable sticky v-model:active="active" shrink line-width="34px" line-height="2px">
+                    <van-tab title="对局大厅">
+                        <div class="van-list">
+                            <room-info v-for="i in 10" :key="i"></room-info>
+                        </div>
+                    </van-tab>
+                    <van-tab title="我的房间">
+                        <div class="van-list">
+                            <room-info></room-info>
+                        </div>
+                    </van-tab>
+                    <template #nav-right>
+                        <van-tabs class="tabs" v-model:active="type" type="card">
+                            <van-tab title="QQ区"></van-tab>
+                            <van-tab title="微信区"></van-tab>
+                        </van-tabs>
+                    </template>
+                </van-tabs>
+            </div>
+        </div>
     </van-pull-refresh>
 </template>
 
@@ -83,11 +62,9 @@ import SwiperCore, { Pagination, Autoplay } from 'swiper';
 SwiperCore.use([Pagination, Autoplay]);
 
 import banner from '../mixins/banner';
-import ProductLarge from '../components/product/productLarge.vue';
 import ProductSmall from '../components/product/productSmall.vue';
 import { mapState } from 'vuex';
-import NewsInfo from '../components/product/NewsInfo';
-import NewsSmall from '../components/product/NewsSmall.vue';
+import RoomInfo from '../components/RoomInfo.vue';
 
 export default {
     name: 'home',
@@ -96,168 +73,42 @@ export default {
     components: {
         Swiper,
         SwiperSlide,
-        ProductLarge,
         ProductSmall,
-        NewsSmall
+        RoomInfo
     },
     computed: {
-        ...mapState(['userInfo']),
-        isNewCollections() {
-            let products = [...this.products];
-            let flag = false;
-            products.forEach(item => {
-                if (item.createdAt) {
-                    if (this.dayjs().isBefore(this.dayjs(item.createdAt, 'YYYY-MM-DD HH:mm:ss').add(6, 'hours'))) {
-                        flag = true;
-                    }
-                }
-            });
-            return flag;
-        },
-        isNewNews() {
-            let news = [...this.news];
-            let flag = false;
-            news.forEach(item => {
-                if (item.createdAt) {
-                    if (this.dayjs().isBefore(this.dayjs(item.createdAt, 'YYYY-MM-DD HH:mm:ss').add(6, 'hours'))) {
-                        flag = true;
-                    }
-                }
-            });
-            return flag;
-        }
+        ...mapState(['userInfo'])
     },
     data() {
         return {
             banners: [],
-            products: [],
+            scrollTop: 0,
+            search: '',
             active: 0,
-            news: [],
-            loading: false,
-            finished: false,
-            page: 0,
-            empty: false,
-            bgImg: '',
-            swiperRef: null,
-            scrollTop: 0
+            type: 0
         };
     },
     mounted() {
-        if (window.cordova && StatusBar && StatusBar.isVisible) {
-            StatusBar.styleDefault();
-        }
         this.getInit();
-        setTimeout(() => {
-            this.showTips();
-        }, 500);
 
-        this.$nextTick(() => {
-            this.$el.parentNode.childNodes[1].className = this.$el.parentNode.childNodes[1].className.replace(
-                / bgBack/,
-                ''
-            );
-        });
         // this.$http.get('sysConfig/get/home_bg').then(res => {
         //     this.bgImg = res.value || '';
         // });
     },
     methods: {
-        changeSwiper() {
-            console.log(this.swiperRef.activeIndex);
-            this.active = this.swiperRef.activeIndex;
-        },
-        showTips() {
-            let inApp = /#cordova#/i.test(navigator.userAgent);
-            let inIos = /iPhone|iPad|iPod/i.test(navigator.userAgent);
-            if (inApp && '1' !== window.localStorage.getItem('AppTips')) {
-                (inIos
-                    ? Promise.resolve()
-                    : this.$dialog
-                          .confirm({
-                              title: 'RAEX宇宙服务协议和隐私政策',
-                              message: `在您使用我的各项服务之前，请务必审慎阅读、充分理解<a href="javascript:void(0)" onclick="goFetch('/agreement?page=service')" >《用户隐私协议》</a>、<a href="javascript:void(0)" onclick="goFetch('/agreement')" >《隐私政策》</a>的条款。并且我们会申请获取您的设备信息，以向您提供安全风控服务。同时您应特别注意前述协议中免除或者限制我们责任的条款、对您权利进行限制的条款。如您已详细阅读并同意RAEX宇宙用户协议、隐私政策，请点击【同意并继续】开始使用我们的服务。`,
-                              confirmButtonText: '同意并继续',
-                              cancelButtonText: '不同意',
-                              allowHtml: true
-                          })
-                          .then(() => {
-                              return this.$dialog.confirm({
-                                  title: '温馨提示',
-                                  message:
-                                      '收集个人信息为我们向您提供服务所必须哦。我们仅会将您的个人信息用于为您提供服务，若不同意此协议，我们将无法为您提供服务并退出应用。',
-                                  confirmButtonText: '同意',
-                                  cancelButtonText: '不同意'
-                              });
-                          })
-                )
-                    .then(() => {
-                        window.localStorage.setItem('AppTips', '1');
-                        try {
-                            window.cordova.plugins.UmengPlugin.initPush(deviceToken => {
-                                console.log('deviceToken=' + deviceToken);
-                            });
-                        } catch (e) {}
-                    })
-                    .catch(() => {
-                        navigator.app.exitApp();
-                    });
-            }
-            if (!window.localStorage.getItem('AppTips') && !inIos && inApp) {
-                this.$dialog
-                    .confirm({
-                        title: 'RAEX宇宙服务协议和隐私政策',
-                        message: `在您使用我的各项服务之前，请务必审慎阅读、充分理解<a href="javascript:void(0)" onclick="goFetch('/agreement?page=service')" >《用户隐私协议》</a>、<a href="javascript:void(0)" onclick="goFetch('/agreement')" >《隐私政策》</a>的条款。并且我们会申请获取您的设备信息，以向您提供安全风控服务。同时您应特别注意前述协议中免除或者限制我们责任的条款、对您权利进行限制的条款。如您已详细阅读并同意RAEX宇宙用户协议、隐私政策，请点击【同意并继续】开始使用我们的服务。`,
-                        confirmButtonText: '同意并继续',
-                        cancelButtonText: '不同意',
-                        allowHtml: true
-                    })
-                    .then(() => {
-                        return this.$dialog.confirm({
-                            title: '温馨提示',
-                            message:
-                                '收集个人信息为我们向您提供服务所必须哦。我们仅会将您的个人信息用于为您提供服务，若不同意此协议，我们将无法为您提供服务并退出应用。',
-                            confirmButtonText: '同意',
-                            cancelButtonText: '不同意'
-                        });
-                    })
-                    .then(() => {
-                        window.localStorage.setItem('AppTips', '1');
-                        try {
-                            window.cordova.plugins.UmengPlugin.initPush(deviceToken => {
-                                console.log('deviceToken=' + deviceToken);
-                            });
-                        } catch (e) {}
-                    })
-                    .catch(() => {
-                        navigator.app.exitApp();
-                    });
-            }
-        },
         getInit() {
             this.$toast.loading({
                 message: '加载中...',
                 forbidClick: true
             });
-            return Promise.all([
-                this.getBanner(),
-                this.getProduct().then(res => {
-                    this.products = res.filter(item => {
-                        return item.type === 'collection';
-                    });
-                    this.news = res.filter(item => {
-                        return item.type === 'news';
-                    });
-                })
-            ]).then(() => {
+            return Promise.all([this.getBanner()]).then(() => {
                 this.$toast.clear();
                 return Promise.resolve();
             });
             // this.getNews();
         },
         getProduct() {
-            return this.$http.get('/collection/recommend').then(res => {
-                return Promise.resolve(res);
-            });
+            return Promise.resolve();
         },
         getBanner() {
             return this.$http
@@ -280,81 +131,6 @@ export default {
                     return Promise.resolve();
                 });
         },
-        getList() {
-            if (this.page === 0) {
-                this.list = [];
-            }
-            this.$http
-                .post(
-                    '/collection/all',
-                    {
-                        page: 0,
-                        size: 20,
-                        query: {
-                            onShelf: true,
-                            del: false
-                        },
-                        sort: 'createdAt,desc'
-                    },
-                    { body: 'json' }
-                )
-                .then(res => {
-                    this.list = [...this.list, ...res.content];
-                    if (!this.finished) {
-                        this.page = this.page + 1;
-                    }
-                });
-        },
-        getMiner() {
-            this.$http
-                .post(
-                    '/user/all',
-                    {
-                        page: 0,
-                        query: { minter: true },
-                        size: 5,
-                        sort: 'sales,desc'
-                    },
-                    { body: 'json' }
-                )
-                .then(res => {
-                    this.miners = res.content;
-                    // console.log(this.miners);
-                });
-        },
-        getNews() {
-            if (this.page === 0) {
-                this.news = [];
-            }
-            this.loading = true;
-            this.finished = false;
-            this.empty = false;
-            this.$http
-                .post(
-                    '/news/all',
-                    {
-                        page: this.page,
-                        size: 20,
-                        query: {
-                            del: false
-                        },
-                        sort: 'sort,asc;createdAt,desc'
-                    },
-                    { body: 'json' }
-                )
-                .then(res => {
-                    this.news = [...this.news, ...res.content];
-                    this.empty = res.empty;
-                    this.loading = false;
-                    this.finished = res.last;
-                    if (!this.finished) {
-                        this.page = this.page + 1;
-                    }
-                });
-        },
-        setSwiperRef(ref) {
-            this.swiperRef = ref;
-        },
         onRefresh() {
             this.getInit().then(() => {
                 this.isLoading = false;
@@ -362,10 +138,6 @@ export default {
             // setTimeout(() => {
 
             // }, 1000);
-        },
-        changeActive(active) {
-            this.active = active;
-            this.swiperRef.slideTo(active, 300);
         }
     },
     activated() {
@@ -373,12 +145,6 @@ export default {
             if (window.cordova && StatusBar && StatusBar.isVisible) {
                 StatusBar.styleDefault();
             }
-            this.$nextTick(() => {
-                this.$el.parentNode.childNodes[1].className = this.$el.parentNode.childNodes[1].className.replace(
-                    / bgBack/,
-                    ''
-                );
-            });
             this.changeScroll(this.scrollTop || 0);
         });
     },
@@ -401,42 +167,14 @@ export default {
 .darkBg {
     background-color: #181818;
 }
-.top {
-    display: flex;
-    padding: 9px 16px;
-    background-color: @bg;
-    display: flex;
-    align-items: center;
-    .logo {
-        width: 74px;
-        height: 26px;
-    }
-
-    .search {
-        flex-grow: 1;
-        background-color: @bg3;
-        display: flex;
-        align-items: center;
-        margin-left: 10px;
-        padding: 4px 20px;
-        border-radius: 21px;
-        img {
-            width: 16px;
-            height: 16px;
-            margin-right: 10px;
-        }
-        font-size: 14px;
-        color: @text3;
-        line-height: 24px;
-    }
-}
 
 .home {
     // background-color: @bg3;
     position: relative;
     z-index: 1;
-    background-color: #f5f7fa;
+    background-color: @bg;
     padding-top: var(--safe-top);
+    padding-bottom: calc(var(--safe-bottom) + 100px);
 }
 
 ::v-deep(.mySwiper) {
@@ -466,98 +204,79 @@ export default {
 // .swiper-slide {
 //     width: 255px;
 // }
-
-.list {
-    padding: 12px 0 100px;
-}
-
-.welcom {
+/deep/.search {
+    padding: 8px 16px;
+    .van-button {
+        flex-shrink: 0;
+    }
     .flex();
-    align-items: flex-end;
-    padding: 12px 16px 0;
-    .left {
+    .van-search__action {
+        background: linear-gradient(315deg, @prim2 0%, @prim 100%);
+        color: #1a1c2b;
+        height: 32px;
+        line-height: 32px;
+    }
+    .van-search {
+        padding: 0 0 0 12px;
+        height: 32px;
+        border-radius: 4px;
+        overflow: hidden;
         flex-grow: 1;
-        .text1 {
-            font-size: 12px;
-            font-weight: bold;
-            color: @text0;
-            line-height: 24px;
-        }
-        .text2 {
-            font-size: 24px;
-            font-weight: bold;
-            color: @text0;
-            line-height: 32px;
-            letter-spacing: 2px;
+    }
 
-            &.text3 {
-                letter-spacing: 0px;
-                font-weight: normal;
-                font-family: SourceHanSans-Medium;
-            }
-        }
+    .van-search__content {
+        background: #25283d;
+        height: 32px;
     }
 }
-.listSwiper {
-    padding-bottom: 100px;
-}
-.tabs {
-    .flex();
-    font-size: 14px;
-    color: fade(@text0, 60%);
-    line-height: 24px;
-    padding: 0 16px;
 
-    .tab + .tab {
-        margin-left: 20px;
+.room-list {
+    padding: 16px 0;
+    .room-title {
+        font-size: 16px;
+        font-weight: bold;
+        color: #ffffff;
+        line-height: 22px;
+        padding: 0 16px;
     }
-
-    .tab {
-        position: relative;
-        &.active {
-            font-weight: bold;
-            color: @text0;
-
-            &::after {
-                content: '';
-                height: 2px;
-                background-color: #fff;
-                width: 18px;
-                position: absolute;
-                bottom: -2px;
-                left: 50%;
-                transform: translateX(-50%);
-            }
+}
+.tab-content {
+    position: relative;
+    padding-top: 2px;
+    /deep/.van-sticky--fixed {
+        padding-top: var(--safe-top);
+    }
+}
+/deep/.tabs {
+    width: 107px;
+    right: 16px;
+    top: 12px;
+    position: absolute;
+    .van-tabs__nav--card {
+        margin: 0;
+        height: 18px;
+        .van-tab {
+            font-size: 12px;
+        }
+        border-width: 0;
+        .van-tab--card {
+            border-width: 0;
+            color: #6a6d83;
+            border-radius: 2px;
         }
     }
+    .van-tab--card.van-tab--active {
+        background: linear-gradient(225deg, @prim2 0%, @prim 100%);
+        color: #1a1c2b;
+    }
 }
 
-.list-top {
-    .flex();
-    justify-content: center;
-    .text1 {
-        font-size: 16px;
-        color: @text3;
-        line-height: 24px;
-        padding: 8px 40px 16px;
-
-        &.active {
-            color: #000000;
-            font-weight: bold;
-            position: relative;
+.van-list {
+    padding: 10px 16px 16px;
+    min-height: var(--app-height);
 
-            &::after {
-                content: '';
-                position: absolute;
-                width: 24px;
-                height: 2px;
-                background: #3ab200;
-                border-radius: 1px;
-                bottom: 10px;
-                left: 50%;
-                transform: translateX(-50%);
-            }
-        }
+    .room + .room {
+        margin-top: 16px;
     }
 }
 </style>

src/views/Index.vue

@@ -31,22 +31,16 @@ export default {
             let menus = [
                 {
                     name: 'home',
-                    title: '首页',
+                    title: '赛事',
                     icon: require('@assets/tabbar_icon_01.png'),
                     preIcon: require('@assets/tabbar_icon_01_pre.png')
                 },
                 {
-                    name: 'discover',
-                    title: '发现',
+                    name: 'shop',
+                    title: '商城',
                     icon: require('@assets/tabbar_icon_02.png'),
                     preIcon: require('@assets/tabbar_icon_02_pre.png')
                 },
-                {
-                    name: 'store',
-                    title: '藏品室',
-                    icon: require('@assets/tabbar_icon_03.png'),
-                    preIcon: require('@assets/tabbar_icon_03_pre.png')
-                },
                 {
                     name: 'mine',
                     title: '我的',
@@ -54,28 +48,6 @@ export default {
                     preIcon: require('@assets/tabbar_icon_04_pre.png')
                 }
             ];
-            if (this.$store.state.hopeMarket) {
-                menus = [
-                    {
-                        name: 'home',
-                        title: '首页',
-                        icon: require('@assets/tabbar_icon_01.png'),
-                        preIcon: require('@assets/tabbar_icon_01_pre.png')
-                    },
-                    {
-                        name: 'store',
-                        title: '藏品室',
-                        icon: require('@assets/tabbar_icon_03.png'),
-                        preIcon: require('@assets/tabbar_icon_03_pre.png')
-                    },
-                    {
-                        name: 'mine',
-                        title: '我的',
-                        icon: require('@assets/tabbar_icon_04.png'),
-                        preIcon: require('@assets/tabbar_icon_04_pre.png')
-                    }
-                ];
-            }
             return menus;
         }
     },
@@ -98,7 +70,7 @@ export default {
 }
 
 .index {
-    background-color: @bg3;
+    background-color: @bg;
     .flex-col();
     padding-top: 0 !important;
 }
@@ -108,9 +80,9 @@ export default {
         border: 1px solid @bg3;
     }
     &.bgBack {
-        background-color: #222426;
+        background-color: @bg3;
         &::after {
-            border: 1px solid #222426;
+            border: 1px solid @bg3;
         }
     }
 }

src/views/Shop.vue

@@ -0,0 +1,44 @@
+<template>
+    <div class="shop">
+        <van-tabs sticky shrink v-model="active" swipeable :swipe-threshold="2">
+            <van-tab title="通行证购买">
+                <div class="list">
+                    <pass-card isChoose></pass-card>
+                    <pass-card v-for="i in 6" :key="i"></pass-card>
+                </div>
+            </van-tab>
+            <van-tab title="通行证兑换">内容 2</van-tab>
+            <van-tab title="藏品兑换">内容 3</van-tab>
+        </van-tabs>
+    </div>
+</template>
+
+<script>
+import PassCard from '../components/PassCard.vue';
+export default {
+    data() {
+        return {
+            active: 0
+        };
+    },
+    components: {
+        PassCard
+    }
+};
+</script>
+<style lang="less" scoped>
+.shop {
+    /deep/.van-tabs__nav {
+        .flex();
+        justify-content: space-between;
+    }
+
+    /deep/.van-swipe__track {
+        min-height: calc(var(--app-height) - var(--safe-top) - var(--safe-bottom) - 94px);
+    }
+}
+
+.list {
+    padding: 8px;
+}
+</style>

src/views/account/Login.vue

@@ -1,122 +1,120 @@
 <template>
-    <div
-        class="login"
-        :class="{ loginHeight: bar && bar.show }"
-        :style="{ backgroundImage: `url(https://cdn.raex.vip/nft/2022-06-24-17-12-00oEyAgOxj.jpg)` }"
-    >
-        <img class="logo" v-if="active === 'phone'" src="../../assets/lvzhopu-logo.png" alt="" />
-        <img class="logo" v-else src="../../assets/lvzhopu-logo2.png" alt="" />
+    <div class="login" :class="{ loginHeight: bar && bar.show }">
         <div class="tabs">
-            <div class="tab" :class="{ active: active === 'phone' }" @click="active = 'phone'">账号密码登陆</div>
-            <div class="tab" :class="{ active: active === 'code' }" @click="active = 'code'">验证码登陆</div>
+            <div class="tab" :class="{ active: active === 'phone' }" @click="active = 'phone'">密码登录</div>
+            <div class="tab" :class="{ active: active === 'code' }" @click="active = 'code'">短信登录</div>
         </div>
 
         <van-form @submit="submit" ref="form" v-if="active === 'phone'">
-            <div class="field-box">
-                <van-field
-                    type="tel"
-                    name="用户名"
-                    placeholder="Account"
-                    v-model="form.phone"
-                    :rules="[
-                        { required: true, message: '请输入手机号码' },
-                        {
-                            pattern: phonePattern,
-                            message: '手机号码格式错误'
-                        }
-                    ]"
-                >
-                    <template #left-icon>
-                        <img :src="require('@assets/svgs/login_icon_zhanghao.svg')" class="icon" />
-                    </template>
-                </van-field>
-                <van-field
-                    type="password"
-                    name="密码"
-                    placeholder="Password"
-                    v-model="form.password"
-                    :rules="[{ required: true, message: '请填写密码' }]"
-                >
-                    <template #left-icon>
-                        <img :src="require('@assets/svgs/login_icon_mima.svg')" class="icon" />
-                    </template>
-                </van-field>
+            <van-field
+                type="tel"
+                name="用户名"
+                placeholder="请输入手机号"
+                v-model="form.phone"
+                :rules="[
+                    { required: true, message: '请输入手机号码' },
+                    {
+                        pattern: phonePattern,
+                        message: '手机号码格式错误'
+                    }
+                ]"
+            >
+                <template #left-icon>
+                    <img :src="require('@assets/svgs/login_icon_zhanghao.svg')" class="icon" />
+                </template>
+            </van-field>
+            <van-field
+                type="password"
+                name="密码"
+                placeholder="请输入密码"
+                v-model="form.password"
+                :rules="[{ required: true, message: '请填写密码' }]"
+            >
+                <template #left-icon>
+                    <img :src="require('@assets/svgs/login_icon_mima.svg')" class="icon" />
+                </template>
+            </van-field>
+
+            <div class="xieyi">
+                <van-checkbox v-model="checked">
+                    点击同意
+                    <span @click.stop="$router.push('/agreement?page=service')">用户协议</span>
+                    <!-- 和
+                <span @click.stop="$router.push('/agreement')"> 《平台隐私协议》</span> -->
+                </van-checkbox>
             </div>
 
             <div class="button">
                 <!-- <van-button plain class="forget" v-if="$store.state.review" @click="getSim"> 获取手机号码 </van-button> -->
 
-                <van-button block native-type="submit" color="#26F50D" class="sure">现在出发！</van-button>
-                <van-button class="del" block plain @click="$router.replace('/register')"
-                    >暂无RAEX宇宙登陆许可 立即申领</van-button
+                <van-button block native-type="submit" type="primary" class="sure">登陆</van-button>
+                <van-button class="del" block type="primary" plain @click="$router.replace('/register')"
+                    >暂无账号，立即注册</van-button
                 >
             </div>
         </van-form>
 
         <van-form @submit="submit" ref="code" v-else>
-            <div class="field-box">
-                <van-field
-                    type="tel"
-                    name="手机号码"
-                    placeholder="Account"
-                    v-model="form.phone"
-                    :rules="[
-                        { required: true, message: '请输入手机号码' },
-                        {
-                            pattern: phonePattern,
-                            message: '手机号码格式错误'
-                        }
-                    ]"
-                >
-                    <template #left-icon>
-                        <img :src="require('@assets/svgs/login_icon_zhanghao.svg')" class="icon" />
-                    </template>
-                </van-field>
+            <van-field
+                type="tel"
+                name="手机号码"
+                placeholder="请输入手机号"
+                v-model="form.phone"
+                :rules="[
+                    { required: true, message: '请输入手机号码' },
+                    {
+                        pattern: phonePattern,
+                        message: '手机号码格式错误'
+                    }
+                ]"
+            >
+                <template #left-icon>
+                    <img :src="require('@assets/svgs/login_icon_zhanghao.svg')" class="icon" />
+                </template>
+            </van-field>
 
-                <van-field
-                    type="code"
-                    name="验证码"
-                    placeholder="Verify"
-                    v-model="form.code"
-                    :rules="[{ required: true, message: '请输入验证码' }]"
-                >
-                    <template #left-icon>
-                        <img :src="require('@assets/svgs/login_icon_code.svg')" class="icon" />
-                    </template>
-                    <template #button>
-                        <van-button
-                            class="sub-code"
-                            size="small"
-                            plain
-                            color="#26F50D"
-                            @click="sendPhone"
-                            :disabled="isSend"
-                        >
-                            {{ isSend ? `已发送(${sendNum})S` : '发送验证码' }}
-                        </van-button>
-                    </template>
-                </van-field>
+            <van-field
+                type="code"
+                name="验证码"
+                placeholder="请输入验证码"
+                v-model="form.code"
+                :rules="[{ required: true, message: '请输入验证码' }]"
+            >
+                <template #left-icon>
+                    <img :src="require('@assets/svgs/login_icon_code.svg')" class="icon" />
+                </template>
+                <template #button>
+                    <van-button
+                        class="sub-code"
+                        size="small"
+                        plain
+                        type="warning"
+                        @click="sendPhone"
+                        :disabled="isSend"
+                    >
+                        {{ isSend ? `已发送(${sendNum})S` : '发送验证码' }}
+                    </van-button>
+                </template>
+            </van-field>
+            <div class="xieyi">
+                <van-checkbox v-model="checked">
+                    点击同意
+                    <span @click.stop="$router.push('/agreement?page=service')">用户协议</span>
+                    <!-- 和
+                <span @click.stop="$router.push('/agreement')"> 《平台隐私协议》</span> -->
+                </van-checkbox>
             </div>
             <div class="button">
                 <!-- <van-button plain class="forget" @click="$router.replace('/forget')">
           忘记密码？
         </van-button> -->
 
-                <van-button block native-type="submit" color="#26F50D" class="sure">现在出发！</van-button>
-                <van-button class="del" block plain @click="$router.replace('/register')"
-                    >暂无RAEX宇宙登陆许可 立即申领</van-button
+                <van-button block native-type="submit" type="primary" class="sure">登陆</van-button>
+                <van-button class="del" block type="primary" plain @click="$router.replace('/register')"
+                    >暂无账号，立即注册</van-button
                 >
             </div>
         </van-form>
-
-        <div class="xieyi">
-            <van-checkbox v-model="checked">
-                已阅读并同意
-                <span @click.stop="$router.push('/agreement?page=service')"> 《用户服务协议》 </span>
-                和
-                <span @click.stop="$router.push('/agreement')"> 《平台隐私协议》 </span>
-            </van-checkbox>
-        </div>
     </div>
 </template>
 
@@ -263,13 +261,13 @@ export default {
 
 <style lang="less" scoped>
 .login {
-    padding: 40px 50px 100px;
+    padding: 40px 46px 100px;
     background-repeat: no-repeat;
     background-size: 100% 100%;
 }
 /deep/input:-webkit-autofill {
-    box-shadow: 0 0 0px 1000px #101010 inset;
-    -webkit-text-fill-color: #898989;
+    box-shadow: 0 0 0px 1000px #1a1c2b inset;
+    -webkit-text-fill-color: #6a6d83;
 }
 /deep/.van-field__control {
     color: #fff;
@@ -283,18 +281,20 @@ export default {
 }
 .tabs {
     display: flex;
-    justify-content: space-between;
+    justify-content: center;
     align-items: center;
     padding-right: 10px;
     .tab {
         font-size: 16px;
-        color: #c8c9cc;
+        color: #6a6d83;
         line-height: 30px;
+        width: 50%;
+        text-align: center;
 
         &.active {
             font-size: 20px;
             font-weight: bold;
-            color: #25f50d;
+            color: #ffffff;
             line-height: 30px;
         }
     }
@@ -318,15 +318,23 @@ export default {
 
 .icon {
     display: block;
-    margin-top: 16px;
+    margin-top: 12px;
 }
 /deep/ .van-form {
     margin-top: 28px;
     .van-cell {
-        padding: 0px 16px;
+        padding: 0;
 
         .van-field__left-icon {
-            margin-right: 16px;
+            margin-right: 8px;
+        }
+
+        &::after {
+            border-width: 0;
+            left: 32px;
+            right: 0;
+            height: 1px;
+            background-color: rgba(255, 255, 255, 0.1);
         }
     }
 
@@ -334,7 +342,7 @@ export default {
         margin-top: 20px;
     }
     .van-field__body {
-        height: 56px;
+        height: 44px;
         align-items: center;
     }
 }
@@ -355,7 +363,7 @@ export default {
 
     .van-button {
         font-weight: bold;
-        border-radius: 12px;
+        // border-radius: 12px;
     }
 }
 
@@ -372,26 +380,33 @@ export default {
 }
 .xieyi {
     .flex();
-    justify-content: center;
-    margin-top: 50px;
+    // justify-content: center;
+    margin-top: 16px;
     font-size: @font1;
+    height: 24px;
 
     color: #fff;
     span {
-        color: #25f50d;
+        color: @warn;
     }
 }
 .van-checkbox {
-    background-color: #101010;
-    padding: 5px 10px;
+    // background-color: #101010;
+    // padding: 5px 10px;
     border-radius: 12px;
 }
 /deep/.van-checkbox__label {
-    color: #fff;
+    color: #6a6d83;
+}
+/deep/.van-checkbox__icon .van-icon {
+    border: 1px solid #6a6d83;
+}
+/deep/.van-checkbox__icon--checked .van-icon {
+    color: @bg;
 }
 
 /deep/.van-checkbox__icon--checked .van-icon {
-    background: linear-gradient(135deg, @prim 0%, @warn 100%);
+    background: linear-gradient(135deg, @prim 0%, @prim2 100%);
     border-width: 0;
 }
 </style>

src/views/account/Register.vue

@@ -1,60 +1,55 @@
 <template>
-    <div
-        class="login"
-        :class="{ loginHeight: bar && bar.show }"
-        :style="{ backgroundImage: `url(${require('../../assets/login.jpg')})` }"
-    >
-        <img class="logo" src="../../assets/lvzhopu-logo.png" alt="" />
+    <div class="login" :class="{ loginHeight: bar && bar.show }">
+        <!-- <img class="logo" src="../../assets/lvzhopu-logo.png" alt="" /> -->
         <div class="tabs">
             <div class="tab active">用户注册</div>
         </div>
 
         <van-form @submit="submit" ref="form">
-            <div class="field-box">
-                <van-field
-                    type="tel"
-                    name="手机号码"
-                    placeholder="请输入手机号码"
-                    v-model="form.phone"
-                    :maxlength="11"
-                    :rules="[
-                        { required: true, message: '请输入手机号码' },
-                        {
-                            pattern: phonePattern,
-                            message: '手机号码格式错误'
-                        }
-                    ]"
-                >
-                    <template #left-icon>
-                        <img :src="require('@assets/svgs/login_icon_zhanghao.svg')" class="icon" />
-                    </template>
-                </van-field>
+            <van-field
+                type="tel"
+                name="手机号码"
+                placeholder="请输入手机号码"
+                v-model="form.phone"
+                :maxlength="11"
+                :rules="[
+                    { required: true, message: '请输入手机号码' },
+                    {
+                        pattern: phonePattern,
+                        message: '手机号码格式错误'
+                    }
+                ]"
+            >
+                <template #left-icon>
+                    <img :src="require('@assets/svgs/login_icon_zhanghao.svg')" class="icon" />
+                </template>
+            </van-field>
 
-                <van-field
-                    type="digit"
-                    name="验证码"
-                    placeholder="请输入验证码"
-                    v-model="form.code"
-                    :maxlength="4"
-                    :rules="[{ required: true, message: '请输入验证码' }]"
-                >
-                    <template #left-icon>
-                        <img :src="require('@assets/svgs/login_icon_code.svg')" class="icon" />
-                    </template>
-                    <template #button>
-                        <van-button
-                            @click="sendPhone"
-                            class="sub-code"
-                            size="small"
-                            plain
-                            :disabled="isSend"
-                            color="#26F50D"
-                        >
-                            {{ isSend ? `已发送(${sendNum})S` : '发送验证码' }}
-                        </van-button>
-                    </template>
-                </van-field>
-                <!-- <van-field
+            <van-field
+                type="digit"
+                name="验证码"
+                placeholder="请输入验证码"
+                v-model="form.code"
+                :maxlength="4"
+                :rules="[{ required: true, message: '请输入验证码' }]"
+            >
+                <template #left-icon>
+                    <img :src="require('@assets/svgs/login_icon_code.svg')" class="icon" />
+                </template>
+                <template #button>
+                    <van-button
+                        @click="sendPhone"
+                        class="sub-code"
+                        size="small"
+                        plain
+                        :disabled="isSend"
+                        type="warning"
+                    >
+                        {{ isSend ? `已发送(${sendNum})S` : '发送验证码' }}
+                    </van-button>
+                </template>
+            </van-field>
+            <!-- <van-field
                     name="图形验证码"
                     placeholder="请输入图形验证码"
                     v-model="form.captcha"
@@ -68,42 +63,42 @@
                         <van-image @click="getCode" :src="codeImg" width="68" height="32" fit="contain" />
                     </template>
                 </van-field> -->
-                <van-field
-                    type="password"
-                    name="密码"
-                    placeholder="请输入密码"
-                    v-model="form.password"
-                    :rules="[{ required: true, message: '请填写密码' }]"
-                >
-                    <template #left-icon>
-                        <img :src="require('@assets/svgs/login_icon_mima.svg')" class="icon" />
-                    </template>
-                </van-field>
+            <van-field
+                type="password"
+                name="密码"
+                placeholder="请输入密码"
+                v-model="form.password"
+                :rules="[{ required: true, message: '请填写密码' }]"
+            >
+                <template #left-icon>
+                    <img :src="require('@assets/svgs/login_icon_mima.svg')" class="icon" />
+                </template>
+            </van-field>
 
-                <van-field
-                    type="password"
-                    name="密码"
-                    placeholder="请再次输入密码"
-                    v-model="form.password2"
-                    :rules="[
-                        { required: true, message: '请再次填写密码' },
-                        {
-                            validator: val => {
-                                if (val == form.password) {
-                                    return true;
-                                } else {
-                                    return false;
-                                }
-                            },
-                            message: '两次密码输入不一致'
-                        }
-                    ]"
-                >
-                    <template #left-icon>
-                        <img :src="require('@assets/svgs/login_icon_mima.svg')" class="icon" />
-                    </template>
-                </van-field>
-                <van-field
+            <van-field
+                type="password"
+                name="密码"
+                placeholder="请再次输入密码"
+                v-model="form.password2"
+                :rules="[
+                    { required: true, message: '请再次填写密码' },
+                    {
+                        validator: val => {
+                            if (val == form.password) {
+                                return true;
+                            } else {
+                                return false;
+                            }
+                        },
+                        message: '两次密码输入不一致'
+                    }
+                ]"
+            >
+                <template #left-icon>
+                    <img :src="require('@assets/svgs/login_icon_mima.svg')" class="icon" />
+                </template>
+            </van-field>
+            <!-- <van-field
                     v-if="showInvite"
                     type="text"
                     name="邀请码"
@@ -114,24 +109,23 @@
                     <template #left-icon>
                         <img :src="require('@assets/svgs/login_icon_yao qingma.svg')" class="icon" />
                     </template>
-                </van-field>
+                </van-field> -->
+
+            <div class="xieyi">
+                <van-checkbox v-model="checked">
+                    点击同意
+                    <span @click.stop="$router.push('/agreement?page=service')">用户协议</span>
+                    <!-- 和
+                <span @click.stop="$router.push('/agreement')"> 《平台隐私协议》</span> -->
+                </van-checkbox>
             </div>
             <div class="button">
-                <van-button round block native-type="submit" color="#26F50D" class="sure"> 立即申领 </van-button>
-                <van-button class="del" round block plain @click="$router.replace('/login')">
-                    已有RAEX宇宙登陆许可 去登陆
+                <van-button block native-type="submit" type="primary" class="sure"> 立即注册 </van-button>
+                <van-button class="del" type="primary" block plain @click="$router.replace('/login')">
+                    已有账号，立即登录
                 </van-button>
             </div>
         </van-form>
-
-        <div class="xieyi">
-            <van-checkbox v-model="checked">
-                已阅读并同意
-                <span @click.stop="$router.push('/agreement?page=service')"> 《用户服务协议》</span>
-                和
-                <span @click.stop="$router.push('/agreement')"> 《平台隐私协议》</span>
-            </van-checkbox>
-        </div>
     </div>
 </template>
 
@@ -226,7 +220,7 @@ export default {
 
 <style lang="less" scoped>
 .login {
-    padding: 40px 50px 100px;
+    padding: 40px 48px 100px;
     background-repeat: no-repeat;
     background-size: 100% 100%;
 }
@@ -242,7 +236,7 @@ export default {
         &.active {
             font-size: 20px;
             font-weight: bold;
-            color: #25f50d;
+            color: #fff;
             line-height: 30px;
         }
     }
@@ -250,15 +244,23 @@ export default {
 
 .icon {
     display: block;
-    margin-top: 16px;
+    margin-top: 12px;
 }
 /deep/ .van-form {
     margin-top: 28px;
     .van-cell {
-        padding: 0px 16px;
+        padding: 0px 0px;
 
         .van-field__left-icon {
-            margin-right: 16px;
+            margin-right: 8px;
+        }
+
+        &::after {
+            border-width: 0;
+            left: 32px;
+            right: 0;
+            height: 1px;
+            background-color: rgba(255, 255, 255, 0.1);
         }
     }
 
@@ -266,7 +268,7 @@ export default {
         margin-top: 20px;
     }
     .van-field__body {
-        height: 56px;
+        height: 44px;
         align-items: center;
     }
 }
@@ -303,7 +305,7 @@ export default {
 
     .van-button {
         font-weight: bold;
-        border-radius: 12px;
+        // border-radius: 12px;
     }
 }
 
@@ -313,18 +315,16 @@ export default {
 }
 .xieyi {
     .flex();
-    justify-content: center;
-    margin-top: 50px;
+    margin-top: 16px;
     font-size: @font1;
     color: #fff;
+    height: 24px;
     span {
-        color: #25f50d;
+        color: @warn;
     }
 }
 .van-checkbox {
-    background-color: #101010;
-    padding: 5px 10px;
-    border-radius: 12px;
+    padding: 0;
 }
 /deep/.van-checkbox__label {
     color: #fff;
@@ -334,8 +334,8 @@ export default {
     border-width: 0;
 }
 /deep/input:-webkit-autofill {
-    box-shadow: 0 0 0px 1000px #101010 inset;
-    -webkit-text-fill-color: #898989;
+    box-shadow: 0 0 0px 1000px #1a1c2b inset;
+    -webkit-text-fill-color: #6a6d83;
 }
 /deep/.van-field__control {
     color: #fff;