场所维护、审核静态页面搭建

GULIMMO

2023-11-08 d62e78573e7d25ec163a03e4ef59befd9aab8749

 subPackage/workbench/views/audit.vue

@@ -1,96 +1,95 @@
<template>
   <view>
      <view class="tab">
         <u-tabs :list="tabList"  :current="tabIndex"  @click="changeTab"  :inactiveStyle="{color:'#999999'}"  :activeStyle="{color:'#017BFC'}"></u-tabs>
      </view>
      <view class="list">
         <view class="list-item bgc-ff mb-20"  v-for="i in 3">
            <view class="item-title flex a-i-c j-c-s-b mb-20">
               <text class="f-32 fw">名称</text>
               <!-- <u-tag text="待审批" type="warning" plain plainFill></u-tag> -->
               <u-tag text="审核通过" type="success" plain plainFill></u-tag>
               <!-- <u-tag text="审核拒绝" type="error" plain plainFill></u-tag> -->
            </view>
            <view class="item-row flex a-i-c j-c-s-b">
               <text class="f-28">事件类型</text>
               <text class="f-28 c-66">一次性任务</text>
            </view>
            <view class="item-row flex a-i-c j-c-s-b">
               <text class="f-28">标签</text>
               <text class="f-28 c-66">打金店</text>
            </view>
            <view class="item-row flex a-i-c j-c-s-b">
               <text class="f-28">地址</text>
               <text class="address f-28 c-66">西市街道万达社区居民委员会滨江西路66号万达晶座11栋303室</text>
            </view>
         </view>
      </view>
		 
   </view>
</template>

<script>
   export default {
      data(){
         return {
            tabList:[
               {
               name:"待审核",
               status:1
            },
            {
               name:"审核通过",
               status:2
            },
            {
               name:"已拒绝",
               status:3
            },
            ],
            tabIndex:0
         }
      },
      methods:{
         changeTab(e){
            this.tabIndex = e.index;
         }
      }
   }
</script>

<style lang="scss">
   page{
      background-color:#F5F5F5;
   }
   .tab{
      width:100%;
      height:88rpx;
      position:fixed;
      top:0;
      left:0;
      background-color:#fff;
      padding:0 30rpx;
      box-sizing: border-box;
		
   }
   .tab /deep/.u-tabs__wrapper__nav__item{
      flex:1;
   }
   .list{
      margin:118rpx 30rpx 0;
   }
   .list-item{
      padding:0 30rpx 20rpx;
      border-radius: 8rpx;
      .item-title{
         padding:30rpx 0;
         border-bottom:1px solid #F5F5F5;
      }
      .item-row{
         padding:10rpx 0;
         .address{
            width:65%;
         }
      }
   }
<template>

   <view>

      <u-sticky>

         <view class="tab">

            <view class="tab">
               <u-tabs :list="tabList" :scrollable="false" :current="tabIndex" @click="changeTab"
                  :inactiveStyle="{color:'#999999'}" :activeStyle="{color:'#017BFC'}"></u-tabs>
            </view>

         </view>

      </u-sticky>

      <view class="list">

         <view class="list-item bgc-ff mb-20" v-for="i in 3">

            <view class="item-title flex a-i-c j-c-s-b mb-20">

               <text class="f-32 fw">名称</text>

               <!-- <u-tag text="待审批" type="warning" plain plainFill></u-tag> -->

               <u-tag text="审核通过" type="success" plain plainFill></u-tag>

               <!-- <u-tag text="审核拒绝" type="error" plain plainFill></u-tag> -->

            </view>

            <view class="item-row flex a-i-c j-c-s-b">

               <text class="f-28">场所名称</text>

               <text class="f-28 c-66">xxxxx</text>

            </view>

            <view class="item-row flex a-i-c j-c-s-b">

               <text class="f-28">标签</text>

               <text class="f-28 c-66">打金店</text>

            </view>

            <view class="item-row flex a-i-c j-c-s-b">

               <text class="f-28">地址</text>

               <text class="address f-28 c-66">西市街道万达社区居民委员会滨江西路66号万达晶座11栋303室</text>

            </view>

         </view>

      </view>



   </view>

</template>



<script>

   export default {

      data() {

         return {

            tabList: [{

                  name: "待审核",

                  status: 1

               },

               {

                  name: "审核通过",

                  status: 2

               },

               {

                  name: "已拒绝",

                  status: 3

               },

            ],

            tabIndex: 0,

         }

      },

      methods: {

         changeTab(e) {

            this.tabIndex = e.index;

         },

      }

   }

</script>



<style lang="scss">

   page {

      background-color: #F5F5F5;

   }



   .tab {

      background-color: #fff;

   }



   .list {

      margin: 20rpx 30rpx 0;

   }



   .list-item {

      padding: 0 30rpx 20rpx;

      border-radius: 8rpx;



      .item-title {

         padding: 30rpx 0;

         border-bottom: 1px solid #F5F5F5;

      }



      .item-row {

         padding: 10rpx 0;



         .address {

            width: 65%;

         }

      }

   }

</style>