From b736e9044a527bb1002dafe55c0372cd0999a504 Mon Sep 17 00:00:00 2001
From: liuye <liuye@sinoecare.com>
Date: Wed, 17 May 2023 15:51:59 +0800
Subject: [PATCH] =?UTF-8?q?=E7=A7=AF=E5=88=86=E5=85=91=E6=8D=A2?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../AppRedemptionPoints.vue                   | 399 ++++--------------
 .../AppRedemptionPoints/goodsList.vue         | 378 +++++++++++++++++
 2 files changed, 454 insertions(+), 323 deletions(-)
 create mode 100644 src/project/pingchang/AppRedemptionPoints/goodsList.vue

diff --git a/src/project/pingchang/AppRedemptionPoints/AppRedemptionPoints.vue b/src/project/pingchang/AppRedemptionPoints/AppRedemptionPoints.vue
index d7c411ad..a89425d7 100644
--- a/src/project/pingchang/AppRedemptionPoints/AppRedemptionPoints.vue
+++ b/src/project/pingchang/AppRedemptionPoints/AppRedemptionPoints.vue
@@ -1,378 +1,131 @@
 <template>
   <div class="AppRedemptionPoints">
-    <div class="fixed-top">
-      <div class="header">
-        <div class="num">
-          <p>积分余额</p>
-          <h3>{{total}}</h3>
-        </div>
-        <div class="btn" @click="toMyOrder">我的订单</div>
-      </div>
-      <div class="search">
-        <u-tabs :list="tabList" :is-scroll="false" :current="currentTabs" height="76" font-size="28" bg-color="#fff" inactive-color="#8891A1" 
-          active-color="#1D2229 " :bar-style="barStyle" @change="changeTab" ></u-tabs>
-        <div class="type-select">
-          <div :class="currentType == index ? 'item active' : 'item'" v-for="(item, index) in typeList" :key="index" @click="typeClick(index)">
-            {{item}}
-            <span v-if="index == 1" class="down-icon">⏷</span>
-          </div>
-        </div>
-        <div class="point-select" v-if="currentType == 1">
-          <u-tabs :list="pointTypeList" :is-scroll="true" :current="currentPoint" height="80" font-size="24" bg-color="#fff" inactive-color="#666666" 
-          active-color="#4181FF" bar-width="0" :bold="false" @change="pointClick" ></u-tabs>
-        </div>
-      </div>
-    </div>
+    <AiTopFixed>
+      <u-search v-model="keyword" :clearabled="false" placeholder="请输入申请人" :show-action="false" bg-color="#F5F5F5"
+        search-icon-color="#999" color="#666" @search="getListInit"></u-search>
+    </AiTopFixed>
     <div class="list-content">
-      <div class="left-list">
-        <div class="list-info" v-for="(item, index) in leftList" :key="index" v-if="goodsList.length">
-          <div class="item" @click="toProductDetail(item)">
-            <img :src="item.picUrl" alt="">
-            <div class="type" :class="`type`+item.type">{{ $dict.getLabel('integralSGType', item.type) }}</div>
-            <div class="content">
-              <p class="text">{{item.title}}</p>
-              <div class="item-money">
-                <h3>{{item.integralPrice}}积分</h3>
-                <p v-if="item.type == 1">+￥{{item.payMoney}}</p>
-                <span v-if="item.type == 1">兑换后再付</span>
-              </div>
-              <div v-if="item.shopStatus == 1">
-                <div class="btn" :class="total >= item.integralPrice ? 'btn1' : 'btn0'" @click.stop="toOrder(item)" v-if="item.stock > 0">{{total >= item.integralPrice ? '去兑换' : '积分不足'}}</div>
-                <div class="btn btn0" v-else>商品缺货</div>
-              </div>
-              <div v-else>
-                <div class="btn btn0">店铺停用</div>
-              </div>
-            </div>
-          </div>
+      <div class="item" v-for="(item, index) in list" :key="index"  @click="toGoodsList(item)">
+        <div class="name">
+          <img :src="item.avatarUrl" alt="" v-if="item.avatarUrl">
+          <img src="./img/user-img.png" alt="" v-else>{{item.name}}
+        </div>
+        <div class="total">
+          <span>积分总额：{{item.allIntegral}}</span>
+          <span>积分余额：{{item.integral}}</span>
+        </div>
+        <div class="bottom">
+          <p>帮兑换</p>
+          <u-icon name="arrow-right" color="#CACACA" size="24" />
         </div>
       </div>
-      <div class="right-list">
-        <div class="list-info" v-for="(item, index) in rightList" :key="index" v-if="goodsList.length">
-          <div class="item" @click="toProductDetail(item)">
-            <img :src="item.picUrl" alt="">
-            <div class="type" :class="`type`+item.type">{{ $dict.getLabel('integralSGType', item.type) }}</div>
-            <div class="content">
-              <p class="text">{{item.title}}</p>
-              <div class="item-money">
-                <h3>{{item.integralPrice}}积分</h3>
-                <p v-if="item.type == 1">+￥{{item.payMoney}}</p>
-                <span v-if="item.type == 1">兑换后再付</span>
-              </div>
-              <div v-if="item.shopStatus == 1">
-                <div class="btn" :class="total >= item.integralPrice ? 'btn1' : 'btn0'" @click.stop="toOrder(item)" v-if="item.stock > 0">{{total >= item.integralPrice ? '去兑换' : '积分不足'}}</div>
-                <div class="btn btn0" v-else>商品缺货</div>
-              </div>
-              <div v-else>
-                <div class="btn btn0">店铺停用</div>
-              </div>
-            </div>
-          </div>
-        </div>
-      </div>
-      <AiEmpty v-if="!goodsList.length"></AiEmpty>
     </div>
+    <AiEmpty v-if="!list.length" />
+
   </div>
 </template>
 
 <script>
-import {mapState} from "vuex";
+import {mapState} from 'vuex'
 
 export default {
-  name: 'AppRedemptionPoints',
-  appName: '积分兑换',
+  name: "AppRedemptionPoints",
+  appName: "积分代兑换",
   data() {
     return {
-      tabList: [{name: '全部'}, {name: '免费兑'}, {name: '京东低价商品'}],
-      currentTabs: 0,
-      barStyle: {
-        'width': '20px',
-        'height': '3px',
-        'border-radius': '2px',
-        'bottom': '-3px',
-        'background': '#2D7DFF'
-      },
-      typeList: ['最新上架', '积分', '我可兑换的'],
-      currentType: 0,
-      pointTypeList: [{name: '全部'}, {name: '50分以下'},  {name: '100分以下'},  {name: '200分以下'},  {name: '5000分以下'}],
-      currentPoint: 0,
-      goodsList: [],
-      leftList: [],
-      rightList: [],
-      total: 0,
-      current: 1,
-      openId: '',
-      integralUserId: '',
-      userId: ''
+      list: [],
+      keyword: '',
+      current: 1
     }
   },
   computed: {
     ...mapState(['user']),
   },
-  onLoad(option) {
-    this.openId = option.openId
-    this.userId = option.userId
-    this.integralUserId = option.integralUserId
-    this.getTotal()
-    this.$dict.load(['integralSGType']).then(() => {
-      this.getList()
-    })
-  },
   onShow() {
-    document.title = '积分代兑换'
-    this.getTotal()
+    document.title = "积分代兑换"
+    this.getListInit()
   },
+
   methods: {
-    getTotal() {
-      this.$http.post(`/app/appintegraluser/integralUserInfoFD`).then(res => {
-        if (res?.data) {
-          this.total = res.data.integral || 0
-        }
-      })
-    },
     getListInit() {
-      this.goodsList = []
-      this.leftList = []
-      this.rightList = []
       this.current = 1
       this.getList()
     },
     getList() {
-      this.$http.post(`/app/appintegralsupermarketshop/goodsListWXCP`, null, {
+      this.$http.post(`/app/appwechatuserqujing/listByFdAppletUserByGirdMember`, null, {
         params: {
-          goodsType: this.currentTabs,  //商品类型，0：全部、1：免费兑、2：京东低价商品，默认0
-          orderType: this.currentType == 0 ? 1 : 0,  //排序类型，0：积分升序、1：上架时间倒序，默认0
-          filterIntegral: this.currentType == 2 ? true : false,  //过滤我可兑换的，默认false
-          integralRange: this.currentType == 1 ? this.currentPoint : '',  //积分区间类型，0：全部、1：50分以下、2:100分以下、3：200分以下、4：5000分以下默认0
           current: this.current,
-          userId: this.userId,
-          openId: this.openId
+          con: this.keyword
         }
       }).then(res => {
-        if (res.code === 0) {
-          this.goodsList = this.current == 1 ? res.data.records : [...this.goodsList, ...res.data.records]
-          res.data.records.map((item, index) => {
-            if(index%2 ==0) {
-              this.leftList.push(item)
-            }else {
-              this.rightList.push(item)
-            }
-          })
+        if (res.code == 0) {
+          this.list = this.current == 1 ? res.data.records : [...this.list, ...res.data.records]
         }
       })
     },
-    changeTab(index) {
-      this.currentTabs = index
-      this.getListInit()
-    },
-    typeClick(index) {
-      this.currentType = index
-      this.getListInit()
-    },
-    pointClick(index) {
-      this.currentPoint = index
-      this.getListInit()
-    },
-    toProductDetail(item) {
-      uni.navigateTo({url: `./productDetails?shopGoodsId=${item.shopGoodsId}&total=${this.total}&userId=${this.userId}`})
-    },
-    toMyOrder() {
-      uni.navigateTo({url: `./myOrderList?userId=${this.userId}`})
-    },
-    toOrder(item) {
-      if(this.total >= item.integralPrice && item.stock > 0) {
-        uni.navigateTo({url: `./placeOrder?shopGoodsId=${item.shopGoodsId}&total=${this.total}&backLevel=3&userId=${this.userId}`})
-      }
-    },
+    toGoodsList(item) {
+      uni.navigateTo({url: `./goodsList?openId=${item.openId}&userId=${item.id}&integralUserId=${item.integralUserId}`})
+    }
   },
   onReachBottom() {
     this.current ++
     this.getList()
-  },
+  }
 }
 </script>
 
 <style lang="scss" scoped>
 .AppRedemptionPoints {
-  .fixed-top {
-    background-color: #f3f6f9;
-    position: fixed;
-    top: 0;
-    left: 0;
-    z-index: 2;
+  ::v-deep .fixed {
+    z-index: 9999;
   }
-  .header {
-    display: flex;
-    justify-content: space-between;
-    padding: 32px 24px;
-    background-color: #fff;
-    margin-bottom: 24px;
-    .num {
-      p {
-        font-family: PingFangSC-Regular;
-        font-weight: 400;
-        font-size: 24px;
-        color: #999;
-        line-height: 34px;
-      }
-      h3 {
-        font-family: PingFangSC-SNaNpxibold;
-        font-weight: 600;
-        font-size: 66px;
-        color: #FF6900;
-        line-height: 92px;
-      }
-    }
-    .btn {
-      width: 168px;
-      height: 64px;
-      border: 1px solid #4181FF;
-      line-height: 62px;
-      border-radius: 44px;
-      box-sizing: border-box;
-      text-align: center;
-      font-family: PingFangSC-Medium;
-      font-weight: 500;
-      font-size: 26px;
-      color: #4181FF;
-      margin-top: 28px;
-    }
-  }
-  .search {
-    background-color: #fff;
-    .type-select {
-      display: flex; 
-      border-top: 1px solid #D8D8D8;
-      line-height: 84px;
-      .item {
-        flex: 1;
-        text-align: center;
-        font-family: PingFangSC-Regular;
-        font-size: 26px;
-        color: #8891A1;
-        .down-icon {
-          display: inline-block;
-          margin-left: 8px;
-          transition: all 0.3s ease-in-out;
-          transform: rotate(0deg);
-        }
-      }
-      .active {
-        color: #4181FF;
-        .down-icon {
-          transform: rotate(180deg);
-        }
-      }
-    }
+  ::v-deep .u-search {
+    margin-bottom: 0 !important;
   }
   .list-content {
-    padding: 396px 0 24px 24px;
-    background-color: #f3f6f9;
-    overflow: hidden;
-    .left-list,
-    .right-list {
-      width: 50%;
-      float: left;
-    }
-    .list-info {
-      width: 100%;
-    }
+    padding: 32px;
     .item {
-      width: calc(100% - 24px);
+      width: 100%;
+      padding: 32px 30px 0;
       background-color: #fff;
-      border-radius: 20px;
-      position: relative;
-      margin-bottom: 24px;
-      img {
-        width: 100%;
-        height: 340px;
-        border-top-left-radius: 20px;
-        border-top-right-radius: 20px;
+      box-sizing: border-box;
+      border-radius: 8px;
+      margin-bottom: 32px;
+      .name {
+        font-family: PingFangSC-SNaNpxibold;
+        font-weight: 600;
+        font-size: 32px;
+        color: #000;
+        line-height: 40px;
+        margin-bottom: 20px;
+        img {
+          width: 40px;
+          height: 40px;
+          margin-right: 12px;
+          vertical-align: bottom;
+        }
       }
-      .type {
-        padding: 8px 16px;
+      .total {
         font-family: PingFangSC-Regular;
-        font-size: 20px;
-        line-height: 28px;
-        color: #FFF;
-        border-top-right-radius: 20px;
-        border-bottom-left-radius: 20px;
-        position: absolute;
-        top: 0;
-        right: 0;
-      }
-      .type1 {
-        background-color: #E64E39;
-      }
-      .type0 {
-        background-color: #FF6900;
-      }
-      .content {
-        padding: 16px 16px 24px;
-        position: relative;
-        background-color: #fff;
-        .text {
-          font-family: PingFangSC-SNaNpxibold;
-          font-weight: 600;
-          font-size: 26px;
-          color: #222;
-          line-height: 38px;
-          text-overflow: -o-ellipsis-lastline;
-          overflow: hidden;
-          text-overflow: ellipsis;
-          display: -webkit-box;
-          -webkit-line-clamp: 2;
-          line-clamp: 2;					
-          -webkit-box-orient: vertical;
-          margin-bottom: 12px;
-        }
-        .item-money {
-          width: calc(100% - 160px);
-          h3 {
-            font-family: PingFangSC-SNaNpxibold;
-            font-weight: 600;
-            font-size: 34px;
-            color: #FF6900;
-            line-height: 48px;
-          }
-          p {
-            font-family: PingFangSC;
-            font-weight: 600;
-            font-size: 26px;
-            color: #4181FF;
-          }
-          span {
-            display: inline-block;
-            font-family: PingFangSC-Regular;
-            font-weight: 400;
-            font-size: 20px;
-            color: #4181FF;
-            line-height: 22px;
-          }
-        }
-        .btn {
-          padding: 14px 32px;
-          font-family: PingFangSC-Medium;
-          font-weight: 500;
-          font-size: 22px;
-          line-height: 28px;
-          border-radius: 44px;
-          position: absolute;
-          bottom: 24px;
-          right: 16px;
-        }
-        .btn1 {
-          background-color: #2D7DFF;
-          color: #FFF;
-        }
-        .btn0 {
-          background-color: #E2E2E2;
-          color: #666;
+        font-size: 24px;
+        color: #666;
+        line-height: 34px;
+        padding-bottom: 34px;
+        span {
+          display: inline-block;
+          width: 250px;
         }
       }
-    }
-    .item:nth-of-type(2n-1) {
-      margin-right: 22px;
+      .bottom {
+        display: flex;
+        justify-content: space-between;
+        padding: 24px 0;
+        font-family: PingFangSC-Regular;
+        font-size: 28px;
+        color: #000;
+        line-height: 38px;
+        border-top: 1px solid #eee;
+      }
     }
   }
 }
diff --git a/src/project/pingchang/AppRedemptionPoints/goodsList.vue b/src/project/pingchang/AppRedemptionPoints/goodsList.vue
new file mode 100644
index 00000000..5ed180a3
--- /dev/null
+++ b/src/project/pingchang/AppRedemptionPoints/goodsList.vue
@@ -0,0 +1,378 @@
+<template>
+  <div class="goodsList">
+    <div class="fixed-top">
+      <div class="header">
+        <div class="num">
+          <p>积分余额</p>
+          <h3>{{total}}</h3>
+        </div>
+        <div class="btn" @click="toMyOrder">ta的订单</div>
+      </div>
+      <div class="search">
+        <u-tabs :list="tabList" :is-scroll="false" :current="currentTabs" height="76" font-size="28" bg-color="#fff" inactive-color="#8891A1" 
+          active-color="#1D2229 " :bar-style="barStyle" @change="changeTab" ></u-tabs>
+        <div class="type-select">
+          <div :class="currentType == index ? 'item active' : 'item'" v-for="(item, index) in typeList" :key="index" @click="typeClick(index)">
+            {{item}}
+            <span v-if="index == 1" class="down-icon">⏷</span>
+          </div>
+        </div>
+        <div class="point-select" v-if="currentType == 1">
+          <u-tabs :list="pointTypeList" :is-scroll="true" :current="currentPoint" height="80" font-size="24" bg-color="#fff" inactive-color="#666666" 
+          active-color="#4181FF" bar-width="0" :bold="false" @change="pointClick" ></u-tabs>
+        </div>
+      </div>
+    </div>
+    <div class="list-content">
+      <div class="left-list">
+        <div class="list-info" v-for="(item, index) in leftList" :key="index" v-if="goodsList.length">
+          <div class="item" @click="toProductDetail(item)">
+            <img :src="item.picUrl" alt="">
+            <div class="type" :class="`type`+item.type">{{ $dict.getLabel('integralSGType', item.type) }}</div>
+            <div class="content">
+              <p class="text">{{item.title}}</p>
+              <div class="item-money">
+                <h3>{{item.integralPrice}}积分</h3>
+                <p v-if="item.type == 1">+￥{{item.payMoney}}</p>
+                <span v-if="item.type == 1">兑换后再付</span>
+              </div>
+              <div v-if="item.shopStatus == 1">
+                <div class="btn" :class="total >= item.integralPrice ? 'btn1' : 'btn0'" @click.stop="toOrder(item)" v-if="item.stock > 0">{{total >= item.integralPrice ? '去兑换' : '积分不足'}}</div>
+                <div class="btn btn0" v-else>商品缺货</div>
+              </div>
+              <div v-else>
+                <div class="btn btn0">店铺停用</div>
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+      <div class="right-list">
+        <div class="list-info" v-for="(item, index) in rightList" :key="index" v-if="goodsList.length">
+          <div class="item" @click="toProductDetail(item)">
+            <img :src="item.picUrl" alt="">
+            <div class="type" :class="`type`+item.type">{{ $dict.getLabel('integralSGType', item.type) }}</div>
+            <div class="content">
+              <p class="text">{{item.title}}</p>
+              <div class="item-money">
+                <h3>{{item.integralPrice}}积分</h3>
+                <p v-if="item.type == 1">+￥{{item.payMoney}}</p>
+                <span v-if="item.type == 1">兑换后再付</span>
+              </div>
+              <div v-if="item.shopStatus == 1">
+                <div class="btn" :class="total >= item.integralPrice ? 'btn1' : 'btn0'" @click.stop="toOrder(item)" v-if="item.stock > 0">{{total >= item.integralPrice ? '去兑换' : '积分不足'}}</div>
+                <div class="btn btn0" v-else>商品缺货</div>
+              </div>
+              <div v-else>
+                <div class="btn btn0">店铺停用</div>
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+      <AiEmpty v-if="!goodsList.length"></AiEmpty>
+    </div>
+  </div>
+</template>
+
+<script>
+import {mapState} from "vuex";
+
+export default {
+  name: 'goodsList',
+  data() {
+    return {
+      tabList: [{name: '全部'}, {name: '免费兑'}, {name: '京东低价商品'}],
+      currentTabs: 0,
+      barStyle: {
+        'width': '20px',
+        'height': '3px',
+        'border-radius': '2px',
+        'bottom': '-3px',
+        'background': '#2D7DFF'
+      },
+      typeList: ['最新上架', '积分', '我可兑换的'],
+      currentType: 0,
+      pointTypeList: [{name: '全部'}, {name: '50分以下'},  {name: '100分以下'},  {name: '200分以下'},  {name: '5000分以下'}],
+      currentPoint: 0,
+      goodsList: [],
+      leftList: [],
+      rightList: [],
+      total: 0,
+      current: 1,
+      openId: '',
+      integralUserId: '',
+      userId: ''
+    }
+  },
+  computed: {
+    ...mapState(['user']),
+  },
+  onLoad(option) {
+    this.openId = option.openId
+    this.userId = option.userId
+    this.integralUserId = option.integralUserId
+    this.getTotal()
+    this.$dict.load(['integralSGType']).then(() => {
+      this.getList()
+    })
+  },
+  onShow() {
+    document.title = '积分代兑换'
+    this.getTotal()
+  },
+  methods: {
+    getTotal() {
+      this.$http.post(`/app/appintegraluser/integralUserInfoFD?integralUserId=${this.integralUserId}`).then(res => {
+        if (res?.data) {
+          this.total = res.data.integral || 0
+        }
+      })
+    },
+    getListInit() {
+      this.goodsList = []
+      this.leftList = []
+      this.rightList = []
+      this.current = 1
+      this.getList()
+    },
+    getList() {
+      this.$http.post(`/app/appintegralsupermarketshop/goodsListWXCP`, null, {
+        params: {
+          goodsType: this.currentTabs,  //商品类型，0：全部、1：免费兑、2：京东低价商品，默认0
+          orderType: this.currentType == 0 ? 1 : 0,  //排序类型，0：积分升序、1：上架时间倒序，默认0
+          filterIntegral: this.currentType == 2 ? true : false,  //过滤我可兑换的，默认false
+          integralRange: this.currentType == 1 ? this.currentPoint : '',  //积分区间类型，0：全部、1：50分以下、2:100分以下、3：200分以下、4：5000分以下默认0
+          current: this.current,
+          userId: this.userId,
+          openId: this.openId
+        }
+      }).then(res => {
+        if (res.code === 0) {
+          this.goodsList = this.current == 1 ? res.data.records : [...this.goodsList, ...res.data.records]
+          res.data.records.map((item, index) => {
+            if(index%2 ==0) {
+              this.leftList.push(item)
+            }else {
+              this.rightList.push(item)
+            }
+          })
+        }
+      })
+    },
+    changeTab(index) {
+      this.currentTabs = index
+      this.getListInit()
+    },
+    typeClick(index) {
+      this.currentType = index
+      this.getListInit()
+    },
+    pointClick(index) {
+      this.currentPoint = index
+      this.getListInit()
+    },
+    toProductDetail(item) {
+      uni.navigateTo({url: `./productDetails?shopGoodsId=${item.shopGoodsId}&total=${this.total}&userId=${this.userId}`})
+    },
+    toMyOrder() {
+      uni.navigateTo({url: `./myOrderList?userId=${this.userId}`})
+    },
+    toOrder(item) {
+      if(this.total >= item.integralPrice && item.stock > 0) {
+        uni.navigateTo({url: `./placeOrder?shopGoodsId=${item.shopGoodsId}&total=${this.total}&backLevel=3&userId=${this.userId}`})
+      }
+    },
+  },
+  onReachBottom() {
+    this.current ++
+    this.getList()
+  },
+}
+</script>
+
+<style lang="scss" scoped>
+.goodsList {
+  .fixed-top {
+    background-color: #f3f6f9;
+    position: fixed;
+    top: 0;
+    left: 0;
+    z-index: 2;
+  }
+  .header {
+    display: flex;
+    justify-content: space-between;
+    padding: 32px 24px;
+    background-color: #fff;
+    margin-bottom: 24px;
+    .num {
+      p {
+        font-family: PingFangSC-Regular;
+        font-weight: 400;
+        font-size: 24px;
+        color: #999;
+        line-height: 34px;
+      }
+      h3 {
+        font-family: PingFangSC-SNaNpxibold;
+        font-weight: 600;
+        font-size: 66px;
+        color: #FF6900;
+        line-height: 92px;
+      }
+    }
+    .btn {
+      width: 168px;
+      height: 64px;
+      border: 1px solid #4181FF;
+      line-height: 62px;
+      border-radius: 44px;
+      box-sizing: border-box;
+      text-align: center;
+      font-family: PingFangSC-Medium;
+      font-weight: 500;
+      font-size: 26px;
+      color: #4181FF;
+      margin-top: 28px;
+    }
+  }
+  .search {
+    background-color: #fff;
+    .type-select {
+      display: flex; 
+      border-top: 1px solid #D8D8D8;
+      line-height: 84px;
+      .item {
+        flex: 1;
+        text-align: center;
+        font-family: PingFangSC-Regular;
+        font-size: 26px;
+        color: #8891A1;
+        .down-icon {
+          display: inline-block;
+          margin-left: 8px;
+          transition: all 0.3s ease-in-out;
+          transform: rotate(0deg);
+        }
+      }
+      .active {
+        color: #4181FF;
+        .down-icon {
+          transform: rotate(180deg);
+        }
+      }
+    }
+  }
+  .list-content {
+    padding: 396px 0 24px 24px;
+    background-color: #f3f6f9;
+    overflow: hidden;
+    .left-list,
+    .right-list {
+      width: 50%;
+      float: left;
+    }
+    .list-info {
+      width: 100%;
+    }
+    .item {
+      width: calc(100% - 24px);
+      background-color: #fff;
+      border-radius: 20px;
+      position: relative;
+      margin-bottom: 24px;
+      img {
+        width: 100%;
+        height: 340px;
+        border-top-left-radius: 20px;
+        border-top-right-radius: 20px;
+      }
+      .type {
+        padding: 8px 16px;
+        font-family: PingFangSC-Regular;
+        font-size: 20px;
+        line-height: 28px;
+        color: #FFF;
+        border-top-right-radius: 20px;
+        border-bottom-left-radius: 20px;
+        position: absolute;
+        top: 0;
+        right: 0;
+      }
+      .type1 {
+        background-color: #E64E39;
+      }
+      .type0 {
+        background-color: #FF6900;
+      }
+      .content {
+        padding: 16px 16px 24px;
+        position: relative;
+        background-color: #fff;
+        .text {
+          font-family: PingFangSC-SNaNpxibold;
+          font-weight: 600;
+          font-size: 26px;
+          color: #222;
+          line-height: 38px;
+          text-overflow: -o-ellipsis-lastline;
+          overflow: hidden;
+          text-overflow: ellipsis;
+          display: -webkit-box;
+          -webkit-line-clamp: 2;
+          line-clamp: 2;					
+          -webkit-box-orient: vertical;
+          margin-bottom: 12px;
+        }
+        .item-money {
+          width: calc(100% - 160px);
+          h3 {
+            font-family: PingFangSC-SNaNpxibold;
+            font-weight: 600;
+            font-size: 34px;
+            color: #FF6900;
+            line-height: 48px;
+          }
+          p {
+            font-family: PingFangSC;
+            font-weight: 600;
+            font-size: 26px;
+            color: #4181FF;
+          }
+          span {
+            display: inline-block;
+            font-family: PingFangSC-Regular;
+            font-weight: 400;
+            font-size: 20px;
+            color: #4181FF;
+            line-height: 22px;
+          }
+        }
+        .btn {
+          padding: 14px 32px;
+          font-family: PingFangSC-Medium;
+          font-weight: 500;
+          font-size: 22px;
+          line-height: 28px;
+          border-radius: 44px;
+          position: absolute;
+          bottom: 24px;
+          right: 16px;
+        }
+        .btn1 {
+          background-color: #2D7DFF;
+          color: #FFF;
+        }
+        .btn0 {
+          background-color: #E2E2E2;
+          color: #666;
+        }
+      }
+    }
+    .item:nth-of-type(2n-1) {
+      margin-right: 22px;
+    }
+  }
+}
+</style>