王飞
2025-03-07 c5e49c10499435802a6551b98772f95660c6f85a
pages/index/draw.vue
@@ -1,64 +1,67 @@
<template>
   <view class="template-job tn-safe-area-inset-bottom tn-skeleton" >
   <view class="template-job tn-safe-area-inset-bottom tn-skeleton">
      <!-- 顶部自定义导航 -->
      <tn-nav-bar fixed style="position: absolute;z-index: 999999999;">
      <tn-nav-bar :isBack="false" fixed style="position: absolute;z-index: 999999999;">
         <!--       <text v-if="isAchor==false" class="title_linespan" style="color: #00aaff;text-decoration: underline;"
            @click="goAchor">绘制</text>
         <text v-else class="title_linespan" @click="goAchor">绘制</text>
         <text class="title_linespan" style="margin-left: 10px;" @click="goTag">管理</text> -->
         <text v-if="isAchor==false" class="title_linespan" style="color: #00aaff;text-decoration: underline;"
            @click="goTag">绘制</text>
            @click="goAchor">绘制</text>
         <text v-else class="title_linespan" @click="goAchor">绘制</text>
         <text class="title_linespan" style="margin-left: 10px;" @click="goTag">管理</text>
      </tn-nav-bar>
      <view v-show="lock==false" class="page-wrap u-skeleton" :style="{height:vuex_custom_index_height+'px',top:vuex_custom_bar_height+'px',position: 'absolute'}">
   <view class="item-wrap" >
   <!-- <view class="container" > -->
         <tn-form >
            <!-- <tn-form-item label="序号:">
      <view v-show="lock==false" class="page-wrap u-skeleton" :style="{'margin-top':vuex_custom_bar_height+16+'px'}">
         <view class="item-wrap">
            <!-- <view class="container" > -->
            <tn-form>
               <!-- <tn-form-item label="序号:">
               <tn-input v-model="form.objectid" inputAlign="right" disabled></tn-input>
            </tn-form-item> -->
            <tn-form-item label="围栏形状:" labelWidth='100rpx'>
               <tn-input v-model="form.shape" type="select" @click="show = true" inputAlign="right" />
               <tn-action-sheet  :list="shapeList" v-model="show"
                  @click="shapeCallback"></tn-action-sheet>
            </tn-form-item>
            <tn-form-item label="围栏类型:" labelWidth='100rpx'>
               <tn-input v-model="form.type" type="select" @click="show1 = true" inputAlign="right" />
               <tn-action-sheet   :list="typeList" v-model="show1"
                  @click="typeCallback"></tn-action-sheet>
            </tn-form-item>
            <tn-form-item label="关联部门:" labelWidth='100rpx' >
               <tn-input v-model="form.bumen" type="select" @click="show2 = true" inputAlign="right" placeholder="请选择关联部门"/>
               <tn-action-sheet  :list="bumenList" v-model="show2"
                  @click="bymenCallback"></tn-action-sheet>
            </tn-form-item>
            <tn-form-item label="选择设备:" labelWidth='100rpx'>
               <tn-input   v-model="form.tagId" inputAlign="right" placeholder="请输入设备编号"></tn-input>
            </tn-form-item>
            <tn-form-item  v-show="isshape==true" label="圆心坐标:" labelWidth='100rpx'>
               <tn-input :disabled="disable" v-model="form.zuobiao" inputAlign="right" @input="cleanconext"></tn-input>
                 <tn-button   v-show="tips==true" backgroundColor="#55aaff" fontColor="#ffffff" size="small" @click="acquisitionxy">采集坐标</tn-button>
            </tn-form-item>
            <tn-form-item v-show="isshape==true" label="围栏半径:" labelWidth='100rpx'>
               <tn-input   v-model="form.banjing" inputAlign="right" placeholder="请输入围栏半径"></tn-input>
            </tn-form-item>
            <tn-form-item  v-show="isshape==false" label="坐标数量:" labelWidth='100rpx'>
               <tn-input disabled  inputAlign="right"></tn-input>
               <tn-number-box   v-model="zuobiaonum" :min="0" :max="10" @change="onchange"></tn-number-box>
                 <!-- <tn-button v-show="tips==true" backgroundColor="#55aaff" fontColor="#ffffff" size="small" @click="acquisitionxy">采集坐标</tn-button> -->
            </tn-form-item>
            <tn-form-item v-for="(item, index) in list" :key="index" v-show="isshape==false" label="坐标点" labelWidth='100rpx'>
               <tn-input v-show="list[index]==index" :disabled="disable"  inputAlign="right" @input="cleanconext"></tn-input>
               <tn-input   v-show="list[index]!=index" :disabled="disable" v-model="list[index]" inputAlign="right" @input="cleanconext"></tn-input>
                 <tn-button   v-show="list[index]==index" backgroundColor="#55aaff" fontColor="#ffffff" size="small" @click="acquisitionxy(index)">采集坐标</tn-button>
            </tn-form-item>
         <!--    <tn-form-item  v-show="isshape==false" label="坐标点2:" labelWidth='100rpx'>
               <tn-form-item label="围栏形状:" labelWidth='100rpx'>
                  <tn-input v-model="form.shape" type="select" @click="show = true" inputAlign="right" />
                  <tn-action-sheet :list="shapeList" v-model="show" @click="shapeCallback"></tn-action-sheet>
               </tn-form-item>
               <tn-form-item label="围栏类型:" labelWidth='100rpx'>
                  <tn-input v-model="form.type" type="select" @click="show1 = true" inputAlign="right" />
                  <tn-action-sheet :list="typeList" v-model="show1" @click="typeCallback"></tn-action-sheet>
               </tn-form-item>
               <tn-form-item label="关联部门:" labelWidth='100rpx'>
                  <tn-input v-model="form.bumen" type="select" @click="show2 = true" inputAlign="right"
                     placeholder="请选择关联部门" />
                  <tn-action-sheet :list="bumenList" v-model="show2" @click="bymenCallback"></tn-action-sheet>
               </tn-form-item>
               <tn-form-item label="选择设备:" labelWidth='100rpx'>
                  <tn-input v-model="form.tagId" inputAlign="right" placeholder="请输入设备编号"></tn-input>
               </tn-form-item>
               <tn-form-item v-show="isshape==true" label="圆心坐标:" labelWidth='100rpx'>
                  <tn-input :disabled="disable" v-model="form.zuobiao" inputAlign="right"
                     @input="cleanconext"></tn-input>
                  <tn-button v-show="tips==true" backgroundColor="#55aaff" fontColor="#ffffff" size="small"
                     @click="acquisitionxy">采集坐标</tn-button>
               </tn-form-item>
               <tn-form-item v-show="isshape==true" label="围栏半径:" labelWidth='100rpx'>
                  <tn-input v-model="form.banjing" inputAlign="right" placeholder="请输入围栏半径"></tn-input>
               </tn-form-item>
               <tn-form-item v-show="isshape==false" label="坐标数量:" labelWidth='100rpx'>
                  <tn-input disabled inputAlign="right"></tn-input>
                  <tn-number-box v-model="zuobiaonum" :min="0" :max="10" @change="onchange"></tn-number-box>
                  <!-- <tn-button v-show="tips==true" backgroundColor="#55aaff" fontColor="#ffffff" size="small" @click="acquisitionxy">采集坐标</tn-button> -->
               </tn-form-item>
               <tn-form-item v-for="(item, index) in list" :key="index" v-show="isshape==false" label="坐标点"
                  labelWidth='100rpx'>
                  <tn-input v-show="list[index]==index" :disabled="disable" inputAlign="right"
                     @input="cleanconext"></tn-input>
                  <tn-input v-show="list[index]!=index" :disabled="disable" v-model="list[index]"
                     inputAlign="right" @input="cleanconext"></tn-input>
                  <tn-button v-show="list[index]==index" backgroundColor="#55aaff" fontColor="#ffffff"
                     size="small" @click="acquisitionxy(index)">采集坐标</tn-button>
               </tn-form-item>
               <!--    <tn-form-item  v-show="isshape==false" label="坐标点2:" labelWidth='100rpx'>
               <tn-input :disabled="disable" v-model="form.zuobiao" inputAlign="right" @input="cleanconext"></tn-input>
                 <tn-button v-show="tips==true" backgroundColor="#55aaff" fontColor="#ffffff" size="small" @click="acquisitionxy">采集坐标</tn-button>
            </tn-form-item>
@@ -74,22 +77,22 @@
               <tn-input :disabled="disable" v-model="form.zuobiao" inputAlign="right" @input="cleanconext"></tn-input>
                 <tn-button v-show="tips==true" backgroundColor="#55aaff" fontColor="#ffffff" size="small" @click="acquisitionxy">采集坐标</tn-button>
            </tn-form-item> -->
            <tn-form-item label="围栏高度:" labelWidth='100rpx'>
               <!-- {{form.disable}} -->
               <tn-input   v-model="form.baoliu1" inputAlign="right" placeholder="请输入围栏高度"></tn-input>
               <text>CM</text>
            </tn-form-item>
            <tn-form-item label="围栏名称:" labelWidth='100rpx'>
               <tn-input   v-model="form.name" inputAlign="right" placeholder="请输入围栏名称"></tn-input>
            </tn-form-item>
         </tn-form>
      <!-- </view> -->
       </view>
       <button style="margin-top: 20px;" type="primary" @click="submitForm">保存围栏</button>
   </view>
               <tn-form-item label="围栏高度:" labelWidth='100rpx'>
                  <!-- {{form.disable}} -->
                  <tn-input v-model="form.baoliu1" inputAlign="right" placeholder="请输入围栏高度"></tn-input>
                  <text>CM</text>
               </tn-form-item>
               <tn-form-item label="围栏名称:" labelWidth='100rpx'>
                  <tn-input v-model="form.name" inputAlign="right" placeholder="请输入围栏名称"></tn-input>
               </tn-form-item>
            </tn-form>
            <!-- </view> -->
         </view>
         <button style="margin-top: 20px;" type="primary" @click="submitForm">保存围栏</button>
      </view>
      <tn-skeleton :show="showSkeleton"></tn-skeleton>
      <successCom ref="refSuccess"></successCom>
@@ -122,9 +125,9 @@
      },
      data() {
         return {
            tips:true,
            zuobiaonum:0,
            isshape:true,
            tips: true,
            zuobiaonum: 0,
            isshape: true,
            disable: true,
            isAchor: false,
            warnindex: 0,
@@ -137,18 +140,19 @@
               width: '100px',
               height: '1000px',
               borderRadius: '50%'
            },
            },
            form: {
               bumen:'',
               name:'',
               baoliu1:'',
               tagId:'',
               zuobiao:'',
               shape:'圆形',
               banjing:'',
               type:'进入报警',
               bumen: '',
               name: '',
               baoliu1: '',
               tagId: '',
               zuobiao: '',
               shape: '圆形',
               banjing: '',
               type: '进入报警',
               list: [],
               disable:false
               disable: false,
               company: this.company,
            },
            showSkeleton: true,
            options: [{
@@ -168,15 +172,15 @@
            time: '',
            list: [],
            total: 0,
            bumenList:[],
            bumenList: [],
            shapeList: [{
                  text: '圆形'
               },
               {
                  text: '矩形'
                  text: '多边形'
               }
            ],
            typeList: [{
                  text: '进入报警'
               },
@@ -202,10 +206,10 @@
               return []
            }
         },
      },
      computed: {
         countList() {
            let num = 0;
            for (let i in this.list) {
@@ -215,18 +219,11 @@
         }
      },
      mounted() {
         console.log(this.vuex_custom_index_height);
         this.findbumenall()
         console.log(this.formfence);
         if (this.formfence.zuobiao!='') {
            this.tips=false
         }
         this.form=this.formfence
         console.log(this.lock);
         console.log("打印数据=======》》》》》》》》》");
         // if (this.formfence.zuobiao!='') {
         //    this.tips=false
         // }
         // this.form=this.formfence
         this.topheight = this.vuex_custom_bar_height + 15
         setTimeout(() => {
            this.showSkeleton = false
@@ -245,55 +242,52 @@
         }, 400)
      },
      onLoad(){
      onLoad() {
      },
      methods: {
         findbumenall(){
            findbumen().then((res) => {
               console.log(res);
               if (res.code == 0) {
                  for (var i = 0; i < res.data.length; i++) {
                     var json={}
                     json.text=res.data[i].departmentName
                     // .textres.data[i]
                     this.bumenList.push(json)
         findbumenall() {
            if (this.vuex_is_login) {
               findbumen().then((res) => {
                  if (res.code == 0) {
                     for (var i = 0; i < res.data.length; i++) {
                        var json = {}
                        json.text = res.data[i].departmentName
                        // .textres.data[i]
                        this.bumenList.push(json)
                     }
                     // this.form.lonlat=res.data.baoliu2+";"+res.data.baoliu3
                     // this.tips=false
                     // this.disable=false
                  } else {
                     this.$refs.refSuccess.showBox({
                        type: 'error',
                        txt: res.msg
                     });
                  }
                  // this.form.lonlat=res.data.baoliu2+";"+res.data.baoliu3
                  // this.tips=false
                  // this.disable=false
               }else{
                  this.$refs.refSuccess.showBox({
                     type: 'error',
                     txt: res.msg
                  });
               }
            })
               })
            }
         },
         onchange(e){
            console.log(e);
            var list =[]
            if (this.list.length<e.value) {
         onchange(e) {
            var list = []
            if (this.list.length < e.value) {
               for (var i = this.list.length; i < e.value; i++) {
                  list.push(i)
                  this.list.push(i)
                  // e[i]
               }
            }else{
               this.list.splice(e.value,this.list.length-e.value)
            } else {
               this.list.splice(e.value, this.list.length - e.value)
            }
            console.log(this.list);
         },
         submitForm(){
            this.form.list=this.list
         submitForm() {
            this.form.list = this.list
            // if (this.form.shape=="圆形") {
            //    console.log(this.form);
            //    submitper(this.form).then((res) => {
            //       console.log(res);
            //       if (res.code == 0) {
@@ -308,159 +302,150 @@
            //       }
            //    })
            // }else{
               if (this.form.tagId=='') {
            if (this.form.tagId == '') {
               this.$refs.refSuccess.showBox({
                  type: 'error',
                  txt: '请输入设备编号采集坐标'
               });
               return false;
            } else if (this.form.baoliu1 == '') {
               this.$refs.refSuccess.showBox({
                  type: 'error',
                  txt: '请输入围栏高度采集坐标'
               });
               return false;
            } else if (this.form.name == '') {
               this.$refs.refSuccess.showBox({
                  type: 'error',
                  txt: '请输入围栏名称采集坐标'
               });
               return false;
            } else if (this.form.shape == '圆形') {
               if (this.form.zuobiao == '') {
                  this.$refs.refSuccess.showBox({
                     type: 'error',
                     txt: '请输入设备编号采集坐标'
                     txt: '请采集坐标'
                  });
                  return false;
               }else if (this.form.baoliu1=='') {
                  this.$refs.refSuccess.showBox({
                     type: 'error',
                     txt: '请输入围栏高度采集坐标'
                  });
                  return false;
               }else if (this.form.name=='') {
                  this.$refs.refSuccess.showBox({
                     type: 'error',
                     txt: '请输入围栏名称采集坐标'
                  });
                  return false;
               }else if (this.form.shape=='圆形') {
                  if (this.form.zuobiao=='') {
                     this.$refs.refSuccess.showBox({
                        type: 'error',
                        txt: '请采集坐标'
                     });
                     return false;
                  }
                  if (this.form.banjing=='') {
                     this.$refs.refSuccess.showBox({
                        type: 'error',
                        txt: '请输入围栏半径'
                     });
                     return false;
                  }
               }else if (this.form.shape=='矩形') {
                  if (this.form.list.length<0) {
                     this.$refs.refSuccess.showBox({
                        type: 'error',
                        txt: '请采集坐标'
                     });
                     return false;
                  }
               }
               console.log(this.form);
               console.log();
               if (this.form.banjing == '') {
                  this.$refs.refSuccess.showBox({
                     type: 'error',
                     txt: '请输入围栏半径'
                  });
                  return false;
               }
            } else if (this.form.shape == '多边形') {
               if (this.form.list.length < 0) {
                  this.$refs.refSuccess.showBox({
                     type: 'error',
                     txt: '请采集坐标'
                  });
                  return false;
               }
            }
            console.log(this.company);
            console.log(this.form);
            this.form.company = this.company
            if (this.vuex_is_login) {
               submitper(this.form).then((res) => {
                  console.log(res);
                  if (res.code == 0) {
                     this.$refs.refSuccess.showBox({
                        type: 'success',
                        txt: "保存成功"
                     });
                     // this.form.lonlat=res.data.baoliu2+";"+res.data.baoliu3
                     // this.tips=false
                     // this.disable=false
                  }else{
                     //保存成功跳转围栏列表,清空this.form
                     this.tips = true
                     this.isAchor = false
                     setTimeout(() => {
                        this.$emit('manualRefresh');
                        this.list = []
                        this.isshape = true
                        this.form.bumen = ''
                        this.form.name = ''
                        this.form.baoliu1 = ''
                        this.form.tagId = ''
                        this.form.zuobiao = ''
                        this.form.shape = '圆形'
                        this.form.banjing = ''
                        this.form.type = '进入报警'
                        this.form.list = []
                        this.form.disable = false
                     }, 2000);
                  } else {
                     this.$refs.refSuccess.showBox({
                        type: 'error',
                        txt: res.data
                     });
                  }
               })
            }
         },
         cleanconext(){
            if (this.form.zuobiao=='') {
               this.tips=true
               this.disable=true
         cleanconext() {
            if (this.form.zuobiao == '') {
               this.tips = true
               this.disable = true
            }
         },
         acquisitionxy(index){
            console.log(index);
            if (this.form.tagId=='') {
         acquisitionxy(index) {
            if (this.form.tagId == '') {
               this.$refs.refSuccess.showBox({
                  type: 'error',
                  txt: '请输入设备编号采集坐标'
               });
            }else{
               console.log(this.form);
               const params ={
                  baoliu3:this.form.tagId
               }
               acquisition(params).then((res) => {
                  console.log(res);
                  if (res.code == 0) {
                     this.form.zuobiao+=res.data.baoliu2+":"+res.data.baoliu3+";"
                     // this.zuobiao1=res.data.baoliu2+";"+res.data.baoliu3
                     // this.list.
                     this.list.splice(index, 1, res.data.baoliu2+";"+res.data.baoliu3);
                     this.tips=false
                     this.disable=false
                  }else{
                     this.$refs.refSuccess.showBox({
                        type: 'error',
                        txt: res.msg
                     });
                  }
               })
            } else {
               const params = {
                  baoliu3: this.form.tagId,
                  company: this.company,
               }
               if (this.vuex_is_login) {
                  acquisition(params).then((res) => {
                     if (res.code == 0) {
                        this.form.zuobiao += res.data.baoliu2 + ":" + res.data.baoliu3 + ";"
                        // this.zuobiao1=res.data.baoliu2+";"+res.data.baoliu3
                        // this.list.
                        this.list.splice(index, 1, res.data.baoliu2 + ";" + res.data.baoliu3);
                        this.tips = false
                        this.disable = false
                     } else {
                        this.$refs.refSuccess.showBox({
                           type: 'error',
                           txt: res.msg
                        });
                     }
                  })
               }
            }
         },
         shapeCallback(index) {
            this.form.shape = this.shapeList[index].text;
            // this.form.baoliu6 = this.actionSheetList[index].text;
            console.log(this.shapeList[index].text);
            if (this.shapeList[index].text=='圆形') {
               this.isshape=true
            }else{
               this.isshape=false
            if (this.shapeList[index].text == '圆形') {
               this.isshape = true
            } else {
               this.isshape = false
            }
         },
         bymenCallback(index) {
            this.form.bumen = this.bumenList[index].text;
            // this.form.baoliu6 = this.actionSheetList[index].text;
            console.log(this.bumenList[index].text);
         },
         typeCallback(index) {
            this.form.type = this.typeList[index].text;
            // this.form.baoliu6 = this.actionSheetList[index].text;
            console.log(this.typeList[index].text);
         },
         editClick() {
            console.log(1111111);
         },
         deleteClick() {
            console.log(2222222);
         },
         goTag() {
            this.isAchor = false
            // this.lock = true
            console.log(2323323);
            // uni.reLaunch({
            //    url: '/pages/index/equipmentCom'
            // });
            this.$emit('goAchor');
         },
         goAchor() {
            this.isAchor = false
            // this.isAchor = false
            this.lock = false
            console.log(2323323);
            // findTag
         },
         // 模拟请求加载数据
@@ -469,53 +454,55 @@
               current: data.page,
               size: data.size,
            }
            findFence(params).then((res) => {
               console.log(res);
               if (res.code == 0) {
                  let list = [];
                  setTimeout(() => {
            if (this.vuex_is_login) {
               findFence(params).then((res) => {
                  if (res.code == 0) {
                     let list = [];
                     for (var i = 0; i < res.data.records.length; i++) {
                        list.push(res.data.records[i]);
                     }
                     console.log(list);
                     this.list = [...this.list, ...list];
                     callback({
                        list: this.list,
                        total: res.data.total
                     });
                  }, 1500);
               }
            })
                     setTimeout(() => {
                        let list = [];
                        for (var i = 0; i < res.data.records.length; i++) {
                           list.push(res.data.records[i]);
                        }
                        this.list = [...this.list, ...list];
                        callback({
                           list: this.list,
                           total: res.data.total
                        });
                     }, 1500);
                  }
               })
            }else{
               callback({
                  list: [],
                  total: 0
               });
            }
         },
         handleSearch(data, callback) {
            console.log(555555555);
            const params = {
               current: 1,
               size: 10,
               objectid: this.keyword,
            }
            findFence(params).then((res) => {
               console.log(res);
               this.list = []
               if (res.code == 0) {
                  let list = [];
                  setTimeout(() => {
            if (this.vuex_is_login) {
               findFence(params).then((res) => {
                  this.list = []
                  if (res.code == 0) {
                     let list = [];
                     for (var i = 0; i < res.data.records.length; i++) {
                        list.push(res.data.records[i]);
                     }
                     console.log(list);
                     this.list = [...this.list, ...list];
                     callback({
                        list: this.list,
                        total: res.data.total
                     });
                  }, 1500);
               }
            })
                     setTimeout(() => {
                        let list = [];
                        for (var i = 0; i < res.data.records.length; i++) {
                           list.push(res.data.records[i]);
                        }
                        this.list = [...this.list, ...list];
                        callback({
                           list: this.list,
                           total: res.data.total
                        });
                     }, 1500);
                  }
               })
            }
            // let name = this.keyword
            // console.log();
            // findPerson(name).then((res) => {
@@ -533,39 +520,29 @@
         },
         // 模拟请求数据刷新
         handleRefresh(data, callback) {
            console.log(555555555555555);
            const params = {
               current: data.page,
               size: data.size,
            }
            console.log(data);
            findFence(data).then((res) => {
               if (res.code == 0) {
                  let list = [];
                  setTimeout(() => {
            if (this.vuex_is_login) {
               findFence(data).then((res) => {
                  if (res.code == 0) {
                     let list = [];
                     for (var i = 0; i < res.data.records.length; i++) {
                        list.push(res.data.records[i]);
                     }
                     console.log(list);
                     this.list = []
                     this.list = [...this.list, ...list];
                     console.log(this.list);
                     callback({
                        list: this.list,
                        total: res.data.total
                     });
                  }, 1500);
               }
            })
            // console.log(2222222222);
            // setTimeout(() => {
            //    this.list = [];
            //    for (var i = 0; i < 3; i++) {
            //       this.list.push(i);
            //    }
            //    callback({ list: this.list, total: 30 });
            // }, 1500);
                     setTimeout(() => {
                        let list = [];
                        for (var i = 0; i < res.data.records.length; i++) {
                           list.push(res.data.records[i]);
                        }
                        this.list = []
                        this.list = [...this.list, ...list];
                        callback({
                           list: this.list,
                           total: res.data.total
                        });
                     }, 1500);
                  }
               })
            }
         },
      }
   }
@@ -601,17 +578,18 @@
      // height: 40rpx;
      // background: rgba(103, 149, 255, 0.2);
   }
   .page-wrap {
      height: 100%;
      width: 100%;
      // padding-top: 45px;
      padding-left: 30rpx;
      padding-right: 30rpx;
      .test-view {
         height: 300rpx;
      }
      .navbar-content {
         width: 100%;
         display: flex;
@@ -619,11 +597,11 @@
         align-items: center;
         justify-content: space-between;
      }
      .u-icon {
         margin-left: 30rpx;
      }
      .item-wrap {
         background-color: #ffffff;
         // display: flex;
@@ -632,7 +610,7 @@
         align-items: center;
         border-radius: 16rpx;
         box-shadow: 0rpx 8rpx 16rpx rgba(0, 0, 0, 0.11);
         .avatar {
            width: 150rpx;
            height: 150rpx;
@@ -640,7 +618,7 @@
            border-radius: 16rpx;
            background-color: #c0c0c0;
         }
         .item {
            width: 100rpx;
            height: 30rpx;
@@ -648,10 +626,11 @@
            border-radius: 16rpx;
            background-color: #c8c7cc;
         }
      }
   }
.container {
   .container {
      width: 100%;
      position: 'absolute';
      z-index: 9999999;