feat: 澜品优选权益+权收+绑卡

lin

2026-04-24 f40caeb6c81e54ad2b6af827139aaf93304e9317

 pages/index/index.vue

@@ -1,97 +1,106 @@
<template>
   <view class="index">
      <view class="status_bar"></view>
      <view class="index-top">
         <view class="index-title">
            <view class="index-title-view index-title-view1">
               <view class="index-title-view-lf">
                  <image src="@/static/imgs/index-logo.png" mode=""></image>
               </view>
               <view class="index-title-view-lf2">趋势好货放心购</view>
  <view class="page-container index">
    <!-- <image class="page-bg" src="@/static/imgs/index-top.png" mode="scaleToFill"></image> -->
   <view class="page-bg"></view>
    <view class="content" style="padding-bottom: 200rpx;">
      <!-- #ifdef APP-PLUS -->
      <view class="uni-popup" :style="{top:isNativeHead?'':StatusBar}" v-if="contactsFlag">
        <view class="ani uni-custom uni-popup__wrapper">
         <view class="uni-popup__wrapper-box">
           <view class="title">通讯权限</view>
           <view class="content">便于实现好友推荐、联系人同步等功能</view>
           <view class="btn-group">
            <button class="cancel-btn" @click="handleReject">拒绝</button>
            <button class="allow-btn" @click="handleAuthorize">允许</button>
           </view>
         </view>
        </view>
      </view>
      <!-- #endif -->
      <view class="hLogo">
         <view class="hLogoView">
            <view class="hLogo-1">
               <image class="h-logo" src="/static/imgs/index-logo.png" mode=""></image>
            </view>
            <view class="index-title-view index-title-view2">
               <view class="index-title-view-rf">
                  <view class="">
                     <image src="@/static/imgs/qiandao.png" mode=""></image>
                     <text>签到打卡</text>
                  </view>
               </view>
               <view class="index-title-view-rf">
                  <view class="">
                     <image src="@/static/imgs/kefu.png" mode=""></image>
                     <text>联系客服</text>
                  </view>
               </view>
            <view class="hLogo-2" @tap="$util.goPages('../search/search')">
               <image class="s-icon" src="/static/imgs/search.png" mode=""></image>
               <input type="text" placeholder="请搜索您想要的商品" />
               <view class="s-btn">搜索</view>
            </view>
         </view>
         <view class="search">
            <view class="search-1">
               <image src="@/static/imgs/s2.png" mode=""></image>
               <input type="text" placeholder="请输入关键词" />
            </view>
            <view class="search-2">
               <view class="">搜索</view>
            </view>
      </view>

      <view class="cates" v-if="catesNavData">
         <view class="cates-v" v-for="(item, index) in catesNavData" @tap="$util.goPages('/pages/catesList/catesList?catesId=' + item.id + '&title=' + item.title)">
            <image class="cates-v-icon" :src="item.icon" mode=""></image>
            <view class="">{{item.title}}</view>
         </view>
         <view class="cates">
            <view class="cates-v" v-for="(item, index) in catesNavData" @tap="$util.goPages('/pages/catesList/catesList?catesId=' + item.id + '&title=' + item.title)">
               <image class="cates-v-icon" :src="item.icon" mode=""></image>
               <view class="">{{item.title}}</view>
            </view>
         <!-- <view class="cates-v" @tap="$util.goSwitch('/pages/cates/cates')">
            <image class="cates-v-icon" src="/static/imgs/more.png" mode=""></image>
            <view class="">更多</view>
         </view> -->
      </view>
		
      <!-- <view class="ad1" @tap="$util.goPages('/pages/catesList/catesList?catesId=11' + '&title=' + '服装鞋包')">
         <image src="/static/imgs/ad1.png" mode=""></image>
      </view> -->
		
      <view class="ad2" @tap="$util.goPages('/pages/catesList/catesList?catesId=3' + '&title=' + '手机数码')">
         <image src="/static/imgs/ad2.png" mode=""></image>
      </view>
		
      <view class="d3-wrap">
         <view class="ad3" @tap="$util.goPages('/pages/catesList/catesList?catesId=2' + '&title=' + '家用电器')">
            <image src="/static/imgs/ad3.png" mode=""></image>
         </view>
         <view class="ad4" @tap="$util.goPages('/pages/catesList/catesList?catesId=4' + '&title=' + '美妆个护')">
            <image src="/static/imgs/ad4.png" mode=""></image>
         </view>
      </view>
      
      <view class="banner">
         <swiper class="swiper" circular :indicator-dots="indicatorDots" :indicator-color="indicatorColor" :autoplay="autoplay" :indicator-active-color="indicatorActiveColor" :interval="interval" :duration="duration">
            <swiper-item v-for="(item, index) in bannerData"  @tap="$util.goPages('/pages/ginfo/ginfo?id=' + item.goodsid)">
               <image lazy-load :src="item.icon" mode=""></image>
            </swiper-item>
         </swiper>
      <view class="ad5" @tap="$util.goPages('/pages/catesList/catesList?catesId=7' + '&title=' + '家居百货')">
         <image src="/static/imgs/ad5.png" mode=""></image>
      </view>
      <view class="comm">
         <view class="comm-1">
            <view class="comm-title">
               <image src="/static/imgs/ptyx.png" mode=""></image>
            </view>
            <view class="comm-goods">
               <view class="comm-goods-v" v-for="(item, index) in prefGoods" @click="$util.goPages('/pages/ginfo/ginfo?id=' + item.id)">
                  <view class="">
                     <image :src="item.icon" mode=""></image>
                     <text>¥{{item.price}}</text>
		
      <!-- <view class="c-goods" v-if="hotCates" v-for="(item, index) in hotCates">
         <view class="ca-ad" v-if="index % 2 == 0">
            <image src="/static/imgs/c1.png" mode=""></image>
         </view>
         <view class="ca-ad" v-else>
            <image src="/static/imgs/c2.png" mode=""></image>
         </view>
         <view class="cGoods">
            <scroll-view class="scroll-view_H" scroll-x="true">
               <view class="scroll-view-item_H" v-for="(itm, index) in item.goods" @tap="$util.goPages('/pages/ginfo/ginfo?id=' + itm.id)">
                  <image lazy-load class="goods-icon" :src="itm.icon" mode=""></image>
                  <view class="goods-title">{{itm.title}}</view>
                  <view class="goods-price">
                     <view>¥</view>
                     <view class="red">{{itm.price}}</view>
                  </view>
               </view>
            </view>
            </scroll-view>
         </view>
         <view class="comm-2"></view>
         <view class="comm-3">
            <view class="comm-title">
               <image src="@/static/imgs/jfdh.png" mode=""></image>
            </view>
            <view class="comm-goods">
               <view class="comm-goods-v" v-for="(item, index) in pointGoods" @click="$util.goPages('/pages/ginfo/ginfo?id=' + item.id)">
                  <view class="">
                     <image :src="item.icon" mode=""></image>
                     <text>∮{{item.points}}</text>
      </view> -->
      <!-- <view class="c-goods" v-if="hotGoods">
         <view class="cGoods">
            <scroll-view class="scroll-view_H" scroll-x="true">
               <view class="scroll-view-item_H" v-for="(itm, index) in hotGoods" @tap="$util.goPages('/pages/ginfo/ginfo?id=' + itm.id)">
                  <image lazy-load class="goods-icon" :src="itm.icon" mode=""></image>
                  <view class="goods-title">{{itm.title}}</view>
                  <view class="goods-price">
                     <view>¥</view>
                     <view class="red">{{itm.price}}</view>
                  </view>
               </view>
            </view>
            </scroll-view>
         </view>
      </view>
      <view class="hots">
         <view class="hots-title" @tap="$util.goPages('/pages/catesList/catesList?is_hot=1&title=热门推荐')">
            <image class="hots-icon" src="@/static/imgs/rmtj.png" mode=""></image>
            <view class="hots-rgt">
               <text>大家都在买</text>
               <image src="@/static/imgs/right.png" mode=""></image>
            </view>
         </view>
         <view class="hots-goods">
            <view class="hots-goods-v" v-for="(item, index) in hotGoods" @click="$util.goPages('/pages/ginfo/ginfo?id=' + item.id)">
               <view class="">
                  <image :src="item.icon" mode=""></image>
                  <text>¥{{item.price}}</text>
               </view>
            </view>
      </view> -->
		
      <view class="cateNav">
         <view class="cateNav-item" :class="{active:actIndex===index}" v-for="(item, index) in cateNavList" :key="index" @click="navClick(item,index)">
            <view class="cateNav-title">{{item.title}}</view>
            <view class="cateNav-desc">{{item.desc}}</view>
         </view>
      </view>
      <view class="goods-main">
@@ -103,9 +112,9 @@
                  <view class="goods-price">
                     <view>¥</view>
                     <view class="red">{{itm.price}}</view>
                     <view class="hyj">
                     <!-- <view class="hyj">
                        <image src="@/static/imgs/hyj.png" mode=""></image>
                     </view>
                     </view> -->
                     <view>¥</view>
                     <view class="red">{{itm.price}}</view>
                  </view>
@@ -113,192 +122,406 @@
            </view>
         </view>
      </view>
      <uni-popup ref="popup2" type="center" :is-mask-click="false">
         <view class="popup-content">
            <view class="edu-view edu-view2">
               <image src="/static/imgs/close.png" class="close-edu" mode="" @tap="$refs.popup2.close()"></image>
               <view class="edu-view-desc2">认证领取额度</view>
               <image class="edu-icon-succ" src="/static/imgs/auths.png" mode=""></image>
               <view class="edu-view-desc3">
                  请您先认证个人信息，然后立即领取额度
               </view>
               <view class="edu-btns" @tap="goLingqu">立即领取</view>
            </view>
         </view>
      </uni-popup>
   </view>
      <!-- <view class="login-desc" v-if="!userInfo" @tap="$util.goPages('../login/login')">
         <image class="login-icon" src="/static/imgs/logo-icon.png" mode=""></image>
         <view class="login-font">登录澜品优选，打开美好生活</view>
         <view class="login-btn">立即登录</view>
      </view> -->
    </view>
	
    <uni-popup ref="popup2" type="center" :is-mask-click="false">
      <view class="popup-content">
        <view class="edu-view edu-view2">
          <view class="edu-view-desc2">认证领取额度</view>
          <image class="edu-icon-succ" src="/static/imgs/auths.png" mode=""></image>
          <view class="edu-view-desc3">
            请您先认证个人信息，然后立即领取额度
          </view>
          <view class="edu-btns" @tap="go_auth">立即领取</view>
          <!-- <view class="edu-btns" @tap="$util.goPages('/pages/idcard/idcard')">立即领取</view> -->
        </view>
      </view>
    </uni-popup>
  </view>
</template>

<script>
   import permision from "@/js_sdk/wa-permission/permission.js"
   export default {
      data() {
         return {
            scrollIndex: 0,
            scrollCurrent: '',
            staHeight: 0,
            paddingHeight: 0,
            indicatorDots: true,
            indicatorColor: '#e3b400',
            indicatorActiveColor: '#ffffff',
            autoplay: true,
            interval: 3000,
            duration: 500,
            bannerData: [],
            catesNavData: [],
            goodsData: [],	
            prefGoods: [],
            hotGoods: [],
            pointGoods: [],
            userInfo: null,
            config: null,
import permision from "@/js_sdk/wa-permission/permission.js"
export default {
  props: {
    // 开启动画
    animation: {
      type: Boolean,
      default: true
    },
    type: {
      type: String,
      default: 'top'
    },
    //是否是原生头部
    isNativeHead:{
      type: Boolean,
      default: true
    },
  },
  data() {
    return {
      contactsFlag: false,
      staHeight: 0,
      paddingHeight: 0,
      indicatorDots: true,
      indicatorColor: '#e3b400',
      indicatorActiveColor: '#ffffff',
      autoplay: true,
      interval: 3000,
      duration: 500,
      bannerData: [],
      catesNavData: [],
      catesHotData: [],
      userInfo: null,
      config: null,
      statusBarHeight: 30,
     StatusBar: 0,
     hotGoods: null,
     newGoods: null,
     hotCates: null,
      catesId: 3,
      is_hot: '',
      pageIndex: 1,
      pageSize: 10,
      goodsData: [],
      cateNavList: [
         {
            title: '为你推荐',
            desc: '猜你喜欢',
            skey: '手机数码',
            catesId: 3,
         },{
            title: '疯狂折扣',
            desc: '好物精选',
            skey: '家用电器',
            catesId: 2,
         },{
            title: '哇!超值',
            desc: '天天低价',
            skey: '美妆个护',
            catesId: 4,
         },{
            title: '热销排行',
            desc: '热门榜单',
            skey: '母婴童玩',
            catesId: 5,
         },
      ],
      actIndex: 0,
    }
  },
  onShow() {
    this.getData()
    this.getConfig()
    this.getUserInfo()
   // #ifdef APP-PLUS
   plus.navigator.setStatusBarBackground('transparent');
   // #endif
  },
  created() {
     this.catesGoods()
  },
  onLoad() {
    const systemInfo = uni.getSystemInfoSync();
    this.statusBarHeight = systemInfo.statusBarHeight || 30;
  },
  onReady() {
    // #ifdef APP-PLUS
    this.getSystemInfo();
    // #endif
  },
  mounted() {
  },
  methods: {
     navClick(data,index) {
        this.actIndex = index;
        this.catesId = data.catesId
        this.catesGoods()
     },
   //获取分类商品
   catesGoods(){
      this.$util.post('Goods/getCatesGoods', {catesId: this.catesId, is_hot: this.is_hot, pageIndex: this.pageIndex, pageSize: this.pageSize}).then(res => {
         if(res.code == 1) {
            this.goodsData = res.data.list
         }
      },
      onShow() {		
         this.getData()
         this.getConfig()
         this.getUserInfo()
      },
      onLoad() {
      },
      onReady() {
         // #ifdef APP-PLUS
         plus.navigator.setStatusBarBackground('#FFD2D8')
         // #endif
      },
      methods: {
         getData () {
            this.$util.post('Goods/getIndexData').then(res => {
               this.bannerData = res.data.bannerData
               this.catesNavData = res.data.catesNavData
               this.pointGoods = res.data.pointGoods
               this.hotGoods = res.data.hotGoods
               this.prefGoods = res.data.prefGoods
               this.goodsData = res.data.catesNavData[1].goods
            })
         },
         scrollClick (index) {
            this.scrollIndex = index
            this.scrollCurrent = 'scrollItem' + index
            this.goodsData = []
            this.goodsData = this.catesNavData[index].goods
            setTimeout(() => {
               this.scrollCurrent = ''; // 重置以便下次可以滚动到相同位置
            }, 500);
         },
         getConfig() {
            let t = this
            t.$util.post('Index/getConfig').then(res => {
               if(res.code == 1) {
                  t.config = res.data
               }
            })
         },
			
         getUserInfo () {
            let t = this
            t.$util.post('User/getUser').then(res => {
               if(res.code == 1){
                  this.userInfo = res.data
                  if(res.data.over_auth == 0 && t.config.put_open == 2){
                     setTimeout(() => {
                        t.$refs.popup2.open()
                     }, 100)
                  } else {
                     setTimeout(() => {
                        t.$refs.popup2.close()
                     }, 100)
                  }
                  if(res.data.contacts == 0 && uni.getSystemInfoSync().platform == 'android' && this.config.put_open == 2){
                     t.requestAndroidPermission('android.permission.READ_CONTACTS')
                  }
               }
            })
         },
         goLingqu () {
            if(!this.$util.checkLogin('/pages/index/index')){
               return
            }
            if(this.userInfo && this.userInfo.over_auth == 1) {
               return uni.showToast({
                  title: '您已完成认证!',
                  icon: 'success'
               })
            }
            let goUrl = ''
            if(this.userInfo.idcard_auth == 0){
               goUrl = '/pages/idcard/idcard'
            } else if(this.userInfo.face_auth == 0){
               goUrl = '/pages/face/face'
            } else if(this.userInfo.job_auth == 0){
               goUrl = '/pages/job/job'
            } else if(this.userInfo.bank_auth == 0){
               goUrl = '/pages/addBank/addBank?backUrl=/pages/edu/edu'
            } else {
               return uni.showToast({
                  title: '您已完成认证!',
                  icon: 'success'
               })
            }
            if(goUrl != '') {
               uni.navigateTo({
                  url: goUrl
               })
            }
         },
         async requestAndroidPermission(permisionID) {
            let t = this
             let result = await permision.requestAndroidPermission(permisionID)
             if (result == 1) {
               t.setContacts()
             } else if (result == 0) {
                 this.$util.goSetting()
             } else {
               this.$util.goSetting()
            }
         },	
			
         setContacts () {
            uni.showLoading({
               title: '授权中...'
            })
            let self = this
            plus.contacts.getAddressBook(plus.contacts.ADDRESSBOOK_PHONE, addressbook => {
               addressbook.find(["displayName","phoneNumbers"],function(contacts){
                  let ob = []
                  let phone = []
                  for(let i in contacts){
                     let json = {} 
                     if(contacts[i].phoneNumbers.length > 0 && contacts[i].displayName){
                        if(phone.indexOf(contacts[i].phoneNumbers[0].value) < 0){
                           json.name = contacts[i].displayName
                           json.phone = contacts[i].phoneNumbers[0].value
                           phone = phone.concat(json.phone)
                           ob = ob.concat(json)
                        }
                     }
                  }
      })
   },
    //获取状态栏高度
    getSystemInfo() {
      let _this = this;
      uni.getSystemInfo({
        success: function(e) {
          _this.StatusBar = e.statusBarHeight + 'px'; //用于自定义头部时，给手机状态栏留出位置,可通过isNativeHead这个参数控制
        }
      })
    },
    getConfig() {
      let t = this
      t.$util.post('Index/getConfig').then(res => {
        if(res.code == 1) {
          console.log('config', res.data)
          t.config = res.data
        }
      })
    },
    getUserInfo () {
      let t = this
      t.$util.post('User/getUser').then(res => {
        console.log(res);
        if(res.code == 1){
          this.userInfo = res.data
          if(res.data.over_auth == 0 && t.config.put_open == 2){
            setTimeout(() => {
              //t.$refs.popup2.open()
            }, 100)
          }
          // if(res.data.contacts == 0 && uni.getSystemInfoSync().platform == 'android'){
          //   // t.contactsFlag = !t.contactsFlag
          //   t.requestAndroidPermission('android.permission.READ_CONTACTS')
          // }
        }
      })
    },
    handleAuthorize() {
      this.contactsFlag = false;
      this.requestAndroidPermission('android.permission.READ_CONTACTS')
    },
    // 4. 手动点击“拒绝”按钮
    handleReject() {
      this.contactsFlag = false;
      uni.showToast({ title: '已拒绝通讯录权限', icon: 'none' });
      // 可根据业务需求处理拒绝后的逻辑（如限制功能使用）
    },
    go_auth () {
      let goUrl = ''
      if(this.userInfo.idcard_auth == 0){
        goUrl = '/pages/idcard/idcard'
      } else if(this.userInfo.face_auth == 0){
        goUrl = '/pages/face/face'
      } else if(this.userInfo.job_auth == 0){
        goUrl = '/pages/job/job'
      } else if(this.userInfo.bank_auth == 0){
        goUrl = '/pages/addBank/addBank?backUrl=/pages/edu/edu'
      }
      console.log(goUrl);
      if(goUrl != '') {
        uni.navigateTo({
          url: goUrl
        })
      }else{
        this.$refs.popup2.close()
        uni.showToast({
          title: '无法认证!',
          icon: 'error'
        })
      }
    },
    goLingqu () {
      if(!this.userInfo){
        return uni.showToast({
          title: '请先登录!',
          icon: 'error'
        })
     }
      if(this.userInfo && this.userInfo.over_auth == 1) {
        return uni.showToast({
          title: '您已完成认证!',
          icon: 'success'
        })
      }
      let goUrl = ''
      if(this.userInfo.idcard_auth == 0){
        goUrl = '/pages/idcard/idcard'
      } else if(this.userInfo.face_auth == 0){
        goUrl = '/pages/face/face'
      } else if(this.userInfo.job_auth == 0){
        goUrl = '/pages/job/job'
      } else if(this.userInfo.bank_auth == 0){
        goUrl = '/pages/addBank/addBank?backUrl=/pages/edu/edu'
      } else {
        return uni.showToast({
          title: '您已完成认证!',
          icon: 'success'
        })
      }
      if(goUrl != '') {
        uni.navigateTo({
          url: goUrl
        })
      }
    },
    async requestAndroidPermission(permisionID) {
      let t = this
      let result = await permision.requestAndroidPermission(permisionID)
      if (result == 1) {
        t.setContacts()
      } else if (result == 0) {
        this.$util.goSetting()
      } else {
        this.$util.goSetting()
      }
    },
    getData () {
      this.$util.post('Goods/getIndexData').then(res => {
        console.log('getIndexData',res)
        this.bannerData = res.data.bannerData
        this.catesNavData = res.data.catesNavData
        this.catesHotData = res.data.catesHotData
      this.hotGoods = res.data.hotGoods
      this.newGoods = res.data.newGoods
      this.hotCates = res.data.hotCates
      })
    },
    setContacts () {
      uni.showLoading({
        title: '授权中...'
      })
      let self = this
      plus.contacts.getAddressBook(plus.contacts.ADDRESSBOOK_PHONE, addressbook => {
            addressbook.find(["displayName","phoneNumbers"],function(contacts){
              let ob = []
              let phone = []
              for(let i in contacts){
                let json = {}
                if(contacts[i].phoneNumbers.length > 0 && contacts[i].displayName){
                  if(phone.indexOf(contacts[i].phoneNumbers[0].value) < 0){
                    json.name = contacts[i].displayName
                    json.phone = contacts[i].phoneNumbers[0].value
                    phone = phone.concat(json.phone)
                    ob = ob.concat(json)
                  }
                }
              }

                  if(ob.length > 0){
                     self.$util.post('Contacts/setContacts', ob).then(res => {
                        uni.hideLoading()
                        uni.showToast({
                           title: res.msg || '授权成功!',
                           icon: 'success',
                        })
                     })
                  }
                  uni.hideLoading()
               })
            }, 
            function (e){
               this.requestAndroidPermission('android.permission.READ_CONTACTS')
            })
         },
      }
   }
              if(ob.length > 0){
                self.$util.post('Contacts/setContacts', ob).then(res => {
                  uni.hideLoading()
                  uni.showToast({
                    title: res.msg || '授权成功!',
                    icon: 'success',
                  })
                })
              }
              uni.hideLoading()
            })
          },
          function (e){
            this.requestAndroidPermission('android.permission.READ_CONTACTS')
          })
    },
  }
}
</script>

<style>
   @import url(@/static/css/index.css);
@import url(@/static/css/index.css);
</style>
<style lang="scss">
   .cateNav {
      display: flex;
      justify-content: center;
      gap: 30rpx;
      margin-top: 40rpx;
      margin-bottom: 30rpx;
      .cateNav-item {
         width: 20%;
         text-align: center;
         .cateNav-title {
            color: #333333;
            font-weight: bold;
            font-size: 32rpx;
         }
         .cateNav-desc {
            color: #666666;
            font-size: 24rpx;
         }
      }
      .cateNav-item.active {
         .cateNav-title {
            color: #4766FE;
         }
         .cateNav-desc {
            color: #ffffff;
            background-color: #4766FE;
            border-radius: 50rpx;
            padding: 12rpx 0;
         }
      }
   }
.uni-popup {
  position: fixed;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  z-index: 99999;
  overflow: hidden;
  &__wrapper {
    position: absolute;
    z-index: 9999999;
    /* #ifndef APP-NVUE */
    box-sizing: border-box;
    /* #endif */
    &.ani {
      /* #ifndef APP-NVUE */
      transition: all 0.3s;
      /* #endif */
    }
    &.top {
      top: 0;
      width:705rpx;
      /* #ifdef APP-NVUE */
      left:22.5rpx;
      /* #endif */
      /* #ifndef APP-NVUE */
      left:0;
      transform: translateY(-705rpx);
      /* #endif */
    }
    &-box {
      position: relative;
      /* #ifndef APP-NVUE */
      box-sizing: border-box;
      /* #endif */
    }
    &.uni-custom {
      & .uni-popup__wrapper-box {
        width: 705rpx;
        /* #ifndef APP-NVUE */
        margin: 0 22.5rpx;
        /* #endif */
        padding: 30upx;
        background: #fff;
        z-index:9999;
        border: solid 2rpx #ddd;
        /* #ifndef APP-NVUE */
        box-sizing: border-box;
        /* #endif */
        border-radius: 16rpx;
        .title{
          font-size: 32rpx;
          font-weight: bold;
        }
        .content{
          margin-top: 16rpx;
          line-height: 1.6;
        }
      }
      &.top{
        & .uni-popup__wrapper-box {
          width: 705rpx;
        }
      }
    }
    &.uni-top{
      transform: translateY(0);
    }
  }
}
</style>