.

src/components/product/productInfo.vue

@@ -0,0 +1,114 @@
+<template>
+    <div class="product-info" :class="{ prim: isChoose }">
+        <van-image
+            width="calc(50vw - 24px)"
+            height="calc(50vw - 24px)"
+            fit="cover"
+            src="https://fastly.jsdelivr.net/npm/@vant/assets/cat.jpeg"
+        />
+        <!-- <img src="@assets/fire3.gif" style="width: 32px; height: 108px" alt="" /> -->
+        <div class="content">
+            <div class="text1">PFA FOR RAEX ONPFA FOR RAEX ON</div>
+            <div class="text2">
+                <span>100</span>
+                <span>个绿洲石</span>
+            </div>
+            <div class="text3">已兑164次</div>
+        </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>
+.product-info {
+    width: calc(50vw - 24px);
+    background: #25283d;
+    border-radius: 4px;
+    overflow: hidden;
+    display: inline-block;
+    margin: 8px;
+    position: relative;
+    .choose-icon {
+        width: 36px;
+        height: 36px;
+        position: absolute;
+        right: 0;
+        top: 0;
+        z-index: 4;
+    }
+}
+.content {
+    padding: 6px 8px;
+    .text1 {
+        font-size: 14px;
+        color: #ffffff;
+        line-height: 24px;
+        overflow: hidden; //溢出隐藏
+        white-space: nowrap; //禁止换行
+        text-overflow: ellipsis; //...
+    }
+
+    .text2 {
+        color: #ffe3a3;
+        line-height: 24px;
+        span {
+            &:first-child {
+                font-size: 16px;
+                font-weight: bold;
+            }
+            &:nth-child(2) {
+                font-size: 12px;
+                margin-left: 2px;
+            }
+        }
+    }
+
+    .text3 {
+        font-size: 10px;
+        color: #6a6d83;
+        line-height: 10px;
+    }
+}
+
+.prim {
+    &::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/router/index.js

@@ -108,6 +108,14 @@ const routes = [
             menuPage: true
         }
     },
+    {
+        path: '/exchange',
+        name: 'exchange',
+        component: () => import('../views/Exchange.vue'),
+        meta: {
+            title: '兑换详情'
+        }
+    },
     {
         path: '/login',
         name: 'userLogin',

src/styles/app.less

@@ -52,7 +52,11 @@
     --van-field-input-text-color: #fff;
     --van-grid-item-text-color: #6a6d83;
     --van-nav-bar-title-text-color: #fff;
-    --van-nav-bar-icon-color:#fff;
+    --van-nav-bar-icon-color: #fff;
+    --van-cell-text-color: #fff;
+    --van-stepper-background-color: #ffffff;
+    --van-stepper-input-line-height: 24px;
+    --van-stepper-input-height: 24px;
 }
 
 [contenteditable='true'],

src/views/Exchange.vue

@@ -1,15 +1,124 @@
 <template>
     <div class="exchange">
+        <van-image class="icon" width="calc(100vw - 52px)" :src="require('@assets/qingtong.png')" fit="scale-down" />
 
+        <van-cell-group :border="false">
+            <van-cell>
+                <template #title>
+                    <div class="cell-title">
+                        <span>100</span>
+                        <span>个绿洲石</span>
+                    </div>
+                </template>
+                <template #value>
+                    <van-stepper v-model="value" input-width="40px" />
+                </template>
+            </van-cell>
+            <van-cell :border="false" class="cell2" title="青铜通行证">
+                <template #label>
+                    <div>
+                        <div>虚拟商品兑换成功后不支持退换</div>
+                        <div>有效果期30天</div>
+                    </div>
+                </template>
+            </van-cell>
+        </van-cell-group>
+
+        <div class="bottom">
+            <div class="price">
+                <span>100</span>
+                <span>个绿洲石</span>
+            </div>
+            <van-button type="primary">立即兑换</van-button>
+        </div>
     </div>
 </template>
 
 <script>
-export default {};
+export default {
+    data() {
+        return {
+            value: ''
+        };
+    }
+};
 </script>
 
 <style lang="less" scoped>
-.exchange{
-    
+.exchange {
+    padding: 10px 26px 0;
+}
+
+.cell-title {
+    .flex();
+    span {
+        &:first-child {
+            font-size: 20px;
+            font-weight: bold;
+            line-height: 24px;
+        }
+
+        &:nth-child(2) {
+            font-size: 12px;
+            line-height: 24px;
+            margin-left: 2px;
+        }
+    }
+}
+
+/deep/.van-stepper {
+    .van-stepper__minus,
+    .van-stepper__plus {
+        border-radius: 4px;
+    }
+
+    .van-stepper__input {
+        border-radius: 4px;
+        margin: 0 6px;
+    }
+}
+.van-cell-group {
+    padding: 15px 0;
+}
+.van-cell {
+    padding: 16px 0;
+
+    &::after {
+        width: 323px;
+        height: 1px;
+        background: #313346;
+        border-width: 0;
+        left: 0;
+        right: 0;
+    }
+}
+
+/deep/.cell2 {
+    .van-cell__title {
+        font-size: 16px;
+        font-weight: bold;
+    }
+    .van-cell__label {
+        font-size: 12px;
+        color: #6a6d83;
+        line-height: 17px;
+        margin-top: 8px;
+    }
+}
+
+.bottom {
+    background: #141624;
+    position: fixed;
+    left: 0;
+    right: 0;
+    bottom: 0;
+    padding: 9px 26px;
+    .bottom(9px);
+    justify-content: space-between;
+    .flex();
+    z-index: 20;
+    .van-button {
+        width: 160px;
+    }
 }
 </style>

src/views/Shop.vue

@@ -1,33 +1,49 @@
 <template>
     <div class="shop">
-        <van-tabs sticky shrink v-model="active" swipeable :swipe-threshold="2">
+        <van-tabs sticky shrink v-model:active="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-tab title="通行证兑换">
+                <pass-card isChoose></pass-card>
+                <pass-card v-for="i in 6" :key="i"></pass-card
+            ></van-tab>
+            <van-tab title="藏品兑换">
+                <div class="list">
+                    <product-info isChoose></product-info>
+                    <product-info></product-info>
+                    <product-info></product-info>
+                </div>
+            </van-tab>
         </van-tabs>
+
+        <div class="bottom">
+            <van-button type="primary" block>确认兑换</van-button>
+        </div>
     </div>
 </template>
 
 <script>
 import PassCard from '../components/PassCard.vue';
+import ProductInfo from '../components/product/productInfo.vue';
 export default {
     data() {
         return {
-            active: 0,
+            active: 2
         };
     },
     components: {
-        PassCard
+        PassCard,
+        ProductInfo
     }
 };
 </script>
 <style lang="less" scoped>
 .shop {
+    position: relative;
     /deep/.van-tabs__nav {
         .flex();
         justify-content: space-between;
@@ -41,4 +57,15 @@ export default {
 .list {
     padding: 8px;
 }
+
+.bottom {
+    padding: 9px 28px;
+    position: fixed;
+    bottom: 0;
+    left: 0;
+    right: 0;
+    .fixedBottom(50px);
+    background-color: @bg;
+    z-index: 20;
+}
 </style>