Merge branch 'dev' of http://git.izouma.com/xiongzhu/raex_front into dev

src/components/creator/CreatorSmall.vue

@@ -7,6 +7,7 @@
             }
         }"
         class="info"
+        v-if="find"
     >
         <van-image
             width="100%"
@@ -25,6 +26,32 @@
             </div>
         </div>
     </router-link>
+    <router-link
+        :to="{
+            path: '/creatorDetail',
+            query: {
+                id: info.id
+            }
+        }"
+        class="find_info"
+        v-else
+    >
+        <van-image
+            height="70"
+            :src="info.bg ? info.bg : require('@assets/creatorBg.png')"
+            loading-icon=""
+            fit="cover"
+            class="find_bg-img"
+        />
+        <van-image class="find_logo" :width="32" :height="32" :src="getImg(info.avatar)" fit="cover" radius="100" />
+
+        <div class="find_content">
+            <div class="find_text1 van-ellipsis">{{ info.nickname }}</div>
+            <div class="find_text2 van-multi-ellipsis--l2">
+                {{ info.intro }}
+            </div>
+        </div>
+    </router-link>
 </template>
 
 <script>
@@ -34,6 +61,10 @@ export default {
             type: Number,
             default: 0
         },
+        find: {
+            type: Boolean,
+            default: true
+        },
         info: {
             type: Object,
             default: () => {
@@ -133,7 +164,10 @@ export default {
 .bg-img {
     display: block;
 }
-
+.find_bg-img {
+    width: calc(43vw - 1.25px);
+    display: block;
+}
 .logo {
     position: absolute;
     top: 102px;
@@ -142,4 +176,42 @@ export default {
     border: 3px solid #fff;
     background-color: #fff;
 }
+.find_info {
+    position: relative;
+    width: calc(43vw - 1.25px);
+    height: 127px;
+    background: #242632;
+    border-radius: 8px;
+    margin-right: 12px;
+    .find_logo {
+        position: absolute;
+        top: 43px;
+        left: 10px;
+        border: 2px solid #fff;
+        background-color: #fff;
+    }
+    .find_content {
+        flex-grow: 1;
+        display: flex;
+        flex-direction: column;
+        background: #242632;
+        padding: 13px 10px 0px;
+        box-sizing: border-box;
+        font-size: 12px;
+        line-height: 17px;
+        .find_text1 {
+            color: #ffffff;
+            font-weight: bold;
+            margin-bottom: 2px;
+        }
+        .find_text2 {
+            display: block;
+            width: 140px;
+            color: #939599;
+            overflow: hidden;
+            white-space: nowrap;
+            text-overflow: ellipsis;
+        }
+    }
+}
 </style>

src/views/Discover.vue

@@ -35,7 +35,7 @@
                 @load="getProducts"
             >
                 <template v-for="(item, index) in productsList" :key="item.id">
-                    <creator-small v-model:info="productsList[index]"></creator-small>
+                    <creator-small v-model:info="productsList[index]" :find="false"></creator-small>
                 </template>
                 <van-empty
                     v-if="emptys"
@@ -43,6 +43,17 @@
                     :image="require(`@assets/empty_img_asset_dark.png`)"
                 />
             </van-list>
+        </div>
+        <div class="oasis_art">
+            <div class="oasis_art_tip">绿洲艺术</div>
+            <div class="oasis_art_list">
+                <div class="oasis_art_list_left">
+                    <img src="" alt="" class="oasis_art_list_left_img" />
+                    <div class="oasis_art_list_left_text1">寄售市场</div>
+                    <div class="oasis_art_list_left_text2">买卖你的元宇宙资产</div>
+                </div>
+                <div class="oasis_art_list_right"></div>
+            </div>
         </div> -->
         <!-- <swiper :slides-per-view="3" :space-between="16" class="mySwiper" :autoplay="{ delay: 3500 }"> 
             <swiper-slide v-for="(item, index) in banners" :key="item.id"> 
@@ -715,6 +726,7 @@ export default {
 .brand_products {
     padding-left: 16px;
     margin-top: 16px;
+    margin-bottom: 20px;
     .brand_tip {
         font-size: 16px;
         font-family: AlimamaShuHeiTi;
@@ -729,6 +741,54 @@ export default {
         overflow-x: auto;
     }
 }
+.oasis_art {
+    width: 100%;
+    padding: 0px 16px 0px;
+    box-sizing: border-box;
+    .oasis_art_tip {
+        font-size: 16px;
+        font-family: AlimamaShuHeiTi;
+        color: #ffffff;
+        line-height: 24px;
+        margin-bottom: 16px;
+    }
+    .oasis_art_list {
+        display: flex;
+        justify-content: space-between;
+        .oasis_art_list_left {
+            width: 109px;
+            height: 152px;
+            padding-top: 38px;
+            padding-left: 14px;
+            background: linear-gradient(136deg, #1c1e1d 0%, rgba(35, 35, 35, 0) 100%);
+            box-shadow: inset 0px 1px 1px 0px #00fe1e;
+            border-radius: 8px;
+            backdrop-filter: blur(3px);
+            box-sizing: border-box;
+            .oasis_art_list_left_img {
+                width: 32px;
+                height: 32px;
+                margin-bottom: 4px;
+            }
+            .oasis_art_list_left_text1 {
+                font-size: 14px;
+                font-weight: bold;
+                color: #ffffff;
+                line-height: 14px;
+                text-shadow: 0px 0px 2px #1f001f;
+                margin-bottom: 4px;
+            }
+            .oasis_art_list_left_text2 {
+                font-size: 9px;
+                font-weight: bold;
+                color: #ffffff;
+                line-height: 12px;
+                text-shadow: 0px 0px 2px #1f001f;
+                opacity: 0.5;
+            }
+        }
+    }
+}
 .discover {
     // background: #0f1014;
     background-color: #272b2e;