厂改园

liukangdong

2024-06-07 ac44819c6bb4e71161c0b042d27a91c4f2c6666e

 h5/pages/laborApplication/laborApplication.vue

@@ -1,818 +1,878 @@
<template>
   <view class="visit">
      <view class="head">拜访信息</view>
      <view class="list">
         <view class="list_item">
            <view class="list_item_label">
               <text>被访人手机</text>
               <text>*</text>
            </view>
            <view class="list_item_content">
               <input type="number" maxlength="11" placeholder="请输入手机号" placeholder-style="color: #999999;" />
            </view>
         </view>
         <view class="list_item">
            <view class="list_item_label">
               <text>被访人姓名</text>
               <text>*</text>
            </view>
            <view class="list_item_content">
               <input type="text" placeholder="请输入姓名" placeholder-style="color: #999999;" />
            </view>
         </view>
         <view class="list_item">
            <view class="list_item_label">
               <text>劳务班次</text>
               <text>*</text>
            </view>
            <view class="list_item_content">
               <view class="list_item_content_item active">白班</view>
               <view class="list_item_content_item">夜班</view>
            </view>
         </view>
         <view class="list_item">
            <view class="list_item_label">
               <text>预计入厂时间</text>
               <text>*</text>
            </view>
            <view class="list_item_content">
               <text>请选择</text>
               <u-icon name="arrow-right" color="#CCCCCC" size="20"></u-icon>
            </view>
         </view>
         <view class="list_item">
            <view class="list_item_label">
               <text>预计离厂时间</text>
               <text>*</text>
            </view>
            <view class="list_item_content">
               <text>请选择</text>
               <u-icon name="arrow-right" color="#CCCCCC" size="20"></u-icon>
            </view>
         </view>
         <view class="list_item" @click="show = true">
            <view class="list_item_label">
               <text>访问门禁</text>
               <text>*</text>
            </view>
            <view class="list_item_content">
               <text>请选择</text>
               <u-icon name="arrow-right" color="#CCCCCC" size="20"></u-icon>
            </view>
         </view>
         <view class="list_item">
            <view class="list_item_label">
               <text>拜访事由</text>
               <text></text>
            </view>
            <view class="list_item_content">
               <input type="text" placeholder="请输入来访事由，您来做什么的" placeholder-style="color: #999999;" />
            </view>
         </view>
      </view>
      <view class="cate">
         <view class="cate_head">车辆信息</view>
         <view class="cate_list">
            <view class="cate_list_item">
               <text>皖AD12178</text>
               <u-icon name="close" color="#999999" size="20"></u-icon>
            </view>
         </view>
         <view class="cate_add" @click="show2 = true">+添加车辆</view>
      </view>
      <view class="cate">
         <view class="cate_head">随访人员信息</view>
         <view class="cate_list">
            <view class="cate_list_item">
               <text>何江宜</text>
               <u-icon name="close" color="#999999" size="20"></u-icon>
            </view>
         </view>
         <view class="cate_add" @click="show1 = true">+添加随访人员</view>
      </view>
      <view class="zw"></view>
      <view class="footer">
         <view class="footer_btn">提交</view>
      </view>
      <!-- 门禁 -->
      <u-picker :show="show" :columns="columns" :immediateChange="true" keyName="name" @cancel="show = false"
         @confirm="confirm"></u-picker>
      <!-- 随行人员 -->
      <!-- 选择随行人员 -->
      <u-popup :show="show1" :round="10" :safeAreaInsetBottom="true" :closeable="true" mode="bottom" @close="show1 = false">
         <view class="popup-content">
            <view class="respondent-title">
               选择随行人员
            </view>
            <view class="search-box">
               <view class="search-box-top">
                  <view class="search-box-top-ipt">
                     <image src="@/static/ic_search@2x.png" mode="widthFix"></image>
                     <input type="text" placeholder="搜索姓名/手机号" />
                  </view>
                  <text @click="show1 = false; show3 = true">新增</text>
               </view>
               <view class="search-box-total">共0条数据</view>
            </view>
            <scroll-view scroll-y class="list">
               <view class="item" v-for="(item, index) in 8" :key="index">
                  <view class="item_a">
                     <!-- <image src="@/static/checkbox.png" mode="widthFix" v-if="!item.active" /> -->
                     <image src="@/static/checkbox_sel@2x.png" mode="widthFix" />
                  </view>
                  <view class="item_b">
                     <image src="@/static/ic_mima@2x.png" mode="widthFix" />
                  </view>
                  <view class="item_c">
                     <text>用户名</text>
                     <text>已拉黑</text>
                  </view>
               </view>
            </scroll-view>
            <view class="footer1">
               <view class="footer_left">
                  <text class="footer_left_a">已选择：0人</text>
                  <text class="footer_left_b">李伟；</text>
               </view>
               <view class="footer_btn">确认 0/0</view>
            </view>
         </view>
      </u-popup>
      <!-- 车辆 -->
      <u-popup :show="show2" :round="10" :safeAreaInsetBottom="true" :closeable="true" mode="bottom" @close="show2 = false">
         <view class="addcar">
            <view class="addcar_head">添加车辆</view>
            <view class="addcar_ipt">
               <input type="text" placeholder="请输入车牌号" />
            </view>
            <view class="addcar_footer">
               <view class="addcar_footer_item">取消</view>
               <view class="addcar_footer_item t">提交</view>
            </view>
         </view>
      </u-popup>
      <!-- 添加随行人员 -->
      <u-popup :show="show3" :round="10" :safeAreaInsetBottom="true" :closeable="true" mode="bottom" @close="show3 = false">
         <view class="adduser">
            <view class="adduser_head">随行人员</view>
            <view class="adduser_list">
               <view class="adduser_list_item">
                  <view class="adduser_list_item_label">
                     <text>姓名</text>
                     <text>*</text>
                  </view>
                  <view class="adduser_list_item_ipt">
                     <input type="text" placeholder-style="color: #999999;" placeholder="请输入您的真实姓名" />
                  </view>
               </view>
               <view class="adduser_list_item">
                  <view class="adduser_list_item_label">
                     <text>手机号</text>
                     <text>*</text>
                  </view>
                  <view class="adduser_list_item_ipt">
                     <input type="number" maxlength="11" placeholder-style="color: #999999;" placeholder="请输入您的手机号" />
                  </view>
               </view>
               <view class="adduser_list_item">
                  <view class="adduser_list_item_label">
                     <text>证件类型</text>
                     <text>*</text>
                  </view>
                  <view class="adduser_list_item_ipt">
                     <text>身份证</text>
                     <u-icon name="arrow-right" color="#CCCCCC" size="16"></u-icon>
                  </view>
               </view>
               <view class="adduser_list_item">
                  <view class="adduser_list_item_label">
                     <text>证件号码</text>
                     <text>*</text>
                  </view>
                  <view class="adduser_list_item_ipt">
                     <input type="text" placeholder-style="color: #999999;" placeholder="请输入您的证件号码" />
                  </view>
               </view>
               <view class="adduser_list_item">
                  <view class="adduser_list_item_label">
                     <text>公司</text>
                     <text></text>
                  </view>
                  <view class="adduser_list_item_ipt">
                     <input type="text" placeholder-style="color: #999999;" placeholder="请输入您的公司名称" />
                  </view>
               </view>
               <view class="adduser_list_item">
                  <view class="adduser_list_item_label">
                     <text>人脸照片</text>
                     <text>*</text>
                  </view>
                  <view class="adduser_list_item_ipt1">
                     <u-upload
                        :fileList="fileList"
                        @afterRead="afterRead"
                        @delete="deletePic"
                        name="1"
                        multiple
                        :maxCount="1"
                     ></u-upload>
                  </view>
               </view>
               <view class="adduser_list_item">
                  <view class="adduser_list_item_label">
                     <text>健康证照片</text>
                     <text></text>
                  </view>
                  <view class="adduser_list_item_ipt1">
                     <u-upload
                        :fileList="fileList"
                        @afterRead="afterRead"
                        @delete="deletePic"
                        name="1"
                        multiple
                        :maxCount="1"
                     ></u-upload>
                  </view>
               </view>
            </view>
            <view class="adduser_footer">
               <view class="adduser_footer_item">取消</view>
               <view class="adduser_footer_item t">提交</view>
            </view>
         </view>
      </u-popup>
   </view>
  <view class="visit">
    <view class="head">拜访信息</view>
    <view class="list">
      <view class="list_item">
        <view class="list_item_label">
          <text>被访人手机</text>
          <text>*</text>
        </view>
        <view class="list_item_content">
          <input
            type="number"
            maxlength="11"
            placeholder="请输入手机号"
            placeholder-style="color: #999999;"
          />
        </view>
      </view>
      <view class="list_item">
        <view class="list_item_label">
          <text>被访人姓名</text>
          <text>*</text>
        </view>
        <view class="list_item_content">
          <input
            type="text"
            placeholder="请输入姓名"
            placeholder-style="color: #999999;"
          />
        </view>
      </view>
      <view class="list_item">
        <view class="list_item_label">
          <text>劳务班次</text>
          <text>*</text>
        </view>
        <view class="list_item_content">
          <view class="list_item_content_item active">白班</view>
          <view class="list_item_content_item">夜班</view>
        </view>
      </view>
      <view class="list_item">
        <view class="list_item_label">
          <text>预计入园时间</text>
          <text>*</text>
        </view>
        <view class="list_item_content">
          <text>请选择</text>
          <u-icon name="arrow-right" color="#CCCCCC" size="20"></u-icon>
        </view>
      </view>
      <view class="list_item">
        <view class="list_item_label">
          <text>预计离园时间</text>
          <text>*</text>
        </view>
        <view class="list_item_content">
          <text>请选择</text>
          <u-icon name="arrow-right" color="#CCCCCC" size="20"></u-icon>
        </view>
      </view>
      <view class="list_item" @click="show = true">
        <view class="list_item_label">
          <text>访问门禁</text>
          <text>*</text>
        </view>
        <view class="list_item_content">
          <text>请选择</text>
          <u-icon name="arrow-right" color="#CCCCCC" size="20"></u-icon>
        </view>
      </view>
      <view class="list_item">
        <view class="list_item_label">
          <text>拜访事由</text>
          <text></text>
        </view>
        <view class="list_item_content">
          <input
            type="text"
            placeholder="请输入来访事由，您来做什么的"
            placeholder-style="color: #999999;"
          />
        </view>
      </view>
    </view>
    <view class="cate">
      <view class="cate_head">车辆信息</view>
      <view class="cate_list">
        <view class="cate_list_item">
          <text>皖AD12178</text>
          <u-icon name="close" color="#999999" size="20"></u-icon>
        </view>
      </view>
      <view class="cate_add" @click="show2 = true">+添加车辆</view>
    </view>
    <view class="cate">
      <view class="cate_head">随访人员信息</view>
      <view class="cate_list">
        <view class="cate_list_item">
          <text>何江宜</text>
          <u-icon name="close" color="#999999" size="20"></u-icon>
        </view>
      </view>
      <view class="cate_add" @click="show1 = true">+添加随访人员</view>
    </view>
    <view class="zw"></view>
    <view class="footer">
      <view class="footer_btn">提交</view>
    </view>
    <!-- 门禁 -->
    <u-picker
      :show="show"
      :columns="columns"
      :immediateChange="true"
      keyName="name"
      @cancel="show = false"
      @confirm="confirm"
    ></u-picker>
    <!-- 随行人员 -->
    <!-- 选择随行人员 -->
    <u-popup
      :show="show1"
      :round="10"
      :safeAreaInsetBottom="true"
      :closeable="true"
      mode="bottom"
      @close="show1 = false"
    >
      <view class="popup-content">
        <view class="respondent-title"> 选择随行人员 </view>
        <view class="search-box">
          <view class="search-box-top">
            <view class="search-box-top-ipt">
              <image src="@/static/ic_search@2x.png" mode="widthFix"></image>
              <input type="text" placeholder="搜索姓名/手机号" />
            </view>
            <text
              @click="
                show1 = false;
                show3 = true;
              "
              >新增</text
            >
          </view>
          <view class="search-box-total">共0条数据</view>
        </view>
        <scroll-view scroll-y class="list">
          <view class="item" v-for="(item, index) in 8" :key="index">
            <view class="item_a">
              <!-- <image src="@/static/checkbox.png" mode="widthFix" v-if="!item.active" /> -->
              <image src="@/static/checkbox_sel@2x.png" mode="widthFix" />
            </view>
            <view class="item_b">
              <image src="@/static/ic_mima@2x.png" mode="widthFix" />
            </view>
            <view class="item_c">
              <text>用户名</text>
              <text>已拉黑</text>
            </view>
          </view>
        </scroll-view>
        <view class="footer1">
          <view class="footer_left">
            <text class="footer_left_a">已选择：0人</text>
            <text class="footer_left_b">李伟；</text>
          </view>
          <view class="footer_btn">确认 0/0</view>
        </view>
      </view>
    </u-popup>
    <!-- 车辆 -->
    <u-popup
      :show="show2"
      :round="10"
      :safeAreaInsetBottom="true"
      :closeable="true"
      mode="bottom"
      @close="show2 = false"
    >
      <view class="addcar">
        <view class="addcar_head">添加车辆</view>
        <view class="addcar_ipt">
          <input type="text" placeholder="请输入车牌号" />
        </view>
        <view class="addcar_footer">
          <view class="addcar_footer_item">取消</view>
          <view class="addcar_footer_item t">提交</view>
        </view>
      </view>
    </u-popup>
    <!-- 添加随行人员 -->
    <u-popup
      :show="show3"
      :round="10"
      :safeAreaInsetBottom="true"
      :closeable="true"
      mode="bottom"
      @close="show3 = false"
    >
      <view class="adduser">
        <view class="adduser_head">随行人员</view>
        <view class="adduser_list">
          <view class="adduser_list_item">
            <view class="adduser_list_item_label">
              <text>姓名</text>
              <text>*</text>
            </view>
            <view class="adduser_list_item_ipt">
              <input
                type="text"
                placeholder-style="color: #999999;"
                placeholder="请输入您的真实姓名"
              />
            </view>
          </view>
          <view class="adduser_list_item">
            <view class="adduser_list_item_label">
              <text>手机号</text>
              <text>*</text>
            </view>
            <view class="adduser_list_item_ipt">
              <input
                type="number"
                maxlength="11"
                placeholder-style="color: #999999;"
                placeholder="请输入您的手机号"
              />
            </view>
          </view>
          <view class="adduser_list_item">
            <view class="adduser_list_item_label">
              <text>证件类型</text>
              <text>*</text>
            </view>
            <view class="adduser_list_item_ipt">
              <text>身份证</text>
              <u-icon name="arrow-right" color="#CCCCCC" size="16"></u-icon>
            </view>
          </view>
          <view class="adduser_list_item">
            <view class="adduser_list_item_label">
              <text>证件号码</text>
              <text>*</text>
            </view>
            <view class="adduser_list_item_ipt">
              <input
                type="text"
                placeholder-style="color: #999999;"
                placeholder="请输入您的证件号码"
              />
            </view>
          </view>
          <view class="adduser_list_item">
            <view class="adduser_list_item_label">
              <text>公司</text>
              <text></text>
            </view>
            <view class="adduser_list_item_ipt">
              <input
                type="text"
                placeholder-style="color: #999999;"
                placeholder="请输入您的公司名称"
              />
            </view>
          </view>
          <view class="adduser_list_item">
            <view class="adduser_list_item_label">
              <text>人脸照片</text>
              <text>*</text>
            </view>
            <view class="adduser_list_item_ipt1">
              <u-upload
                :fileList="fileList"
                @afterRead="afterRead"
                @delete="deletePic"
                name="1"
                multiple
                :maxCount="1"
              ></u-upload>
            </view>
          </view>
          <view class="adduser_list_item">
            <view class="adduser_list_item_label">
              <text>健康证照片</text>
              <text></text>
            </view>
            <view class="adduser_list_item_ipt1">
              <u-upload
                :fileList="fileList"
                @afterRead="afterRead"
                @delete="deletePic"
                name="1"
                multiple
                :maxCount="1"
              ></u-upload>
            </view>
          </view>
        </view>
        <view class="adduser_footer">
          <view class="adduser_footer_item">取消</view>
          <view class="adduser_footer_item t">提交</view>
        </view>
      </view>
    </u-popup>
  </view>
</template>

<script>
   export default {
      data() {
         return {
            show: false,
            show1: false,
            show2: false,
            show3: false,
            fileList: [],
            columns: [
               [{
                     name: '东门',
                     id: 1
                  },
                  {
                     name: '西门',
                     id: 2
                  }
               ]
            ]
         };
      },
      methods: {
         confirm(e) {
            console.log(e)
            this.show = false
         },
         // 删除图片
         deletePic(event) {
            this[`fileList${event.name}`].splice(event.index, 1)
         },
         // 新增图片
         async afterRead(event) {
            // 当设置 multiple 为 true 时, file 为数组格式，否则为对象格式
            let lists = [].concat(event.file)
            let fileListLen = this[`fileList${event.name}`].length
            lists.map((item) => {
               this[`fileList${event.name}`].push({
                  ...item,
                  status: 'uploading',
                  message: '上传中'
               })
            })
            for (let i = 0; i < lists.length; i++) {
               const result = await this.uploadFilePromise(lists[i].url)
               let item = this[`fileList${event.name}`][fileListLen]
               this[`fileList${event.name}`].splice(fileListLen, 1, Object.assign(item, {
                  status: 'success',
                  message: '',
                  url: result
               }))
               fileListLen++
            }
         },
         uploadFilePromise(url) {
            return new Promise((resolve, reject) => {
               let a = uni.uploadFile({
                  url: 'http://192.168.2.21:7001/upload', // 仅为示例，非真实的接口地址
                  filePath: url,
                  name: 'file',
                  formData: {
                     user: 'test'
                  },
                  success: (res) => {
                     setTimeout(() => {
                        resolve(res.data.data)
                     }, 1000)
                  }
               });
            })
         },
      }
   }
export default {
  data() {
    return {
      show: false,
      show1: false,
      show2: false,
      show3: false,
      fileList: [],
      columns: [
        [{
          name: '东门',
          id: 1
        },
        {
          name: '西门',
          id: 2
        }
        ]
      ]
    }
  },
  methods: {
    confirm(e) {
      console.log(e)
      this.show = false
    },
    // 删除图片
    deletePic(event) {
      this[`fileList${event.name}`].splice(event.index, 1)
    },
    // 新增图片
    async afterRead(event) {
      // 当设置 multiple 为 true 时, file 为数组格式，否则为对象格式
      let lists = [].concat(event.file)
      let fileListLen = this[`fileList${event.name}`].length
      lists.map((item) => {
        this[`fileList${event.name}`].push({
          ...item,
          status: 'uploading',
          message: '上传中'
        })
      })
      for (let i = 0; i < lists.length; i++) {
        const result = await this.uploadFilePromise(lists[i].url)
        let item = this[`fileList${event.name}`][fileListLen]
        this[`fileList${event.name}`].splice(fileListLen, 1, Object.assign(item, {
          status: 'success',
          message: '',
          url: result
        }))
        fileListLen++
      }
    },
    uploadFilePromise(url) {
      return new Promise((resolve, reject) => {
        let a = uni.uploadFile({
          url: 'http://192.168.2.21:7001/upload', // 仅为示例，非真实的接口地址
          filePath: url,
          name: 'file',
          formData: {
            user: 'test'
          },
          success: (res) => {
            setTimeout(() => {
              resolve(res.data.data)
            }, 1000)
          }
        })
      })
    },
  }
}
</script>
<style>
   page {
      background-color: #F7F7F7 !important;
   }
   .u-upload__button {
      margin: 0 !important;
   }
page {
  background-color: #f7f7f7 !important;
}
.u-upload__button {
  margin: 0 !important;
}
</style>
<style lang="scss" scoped>
   .visit {
      width: 100%;
		
      .adduser {
         padding: 30rpx;
         width: 100%;
         box-sizing: border-box;
         .adduser_head {
            width: 100%;
            text-align: center;
            font-size: 32rpx;
            font-family: PingFangSC, PingFang SC;
            font-weight: 500;
            color: #222222;
         }
         .adduser_list {
            width: 100%;
            margin-top: 40rpx;
            .adduser_list_item {
               width: 100%;
               padding: 24rpx 0;
               box-sizing: border-box;
               border-bottom: 1rpx solid #E5E5E5;
               display: flex;
               align-items: center;
               justify-content: space-between;
               .adduser_list_item_label {
                  flex-shrink: 0;
                  display: flex;
                  align-items: center;
                  text {
                     &:nth-child(1) {
                        font-size: 30rpx;
                        font-family: PingFangSC, PingFang SC;
                        font-weight: 400;
                        color: #222222;
                     }
                     &:nth-child(2) {
                        font-size: 30rpx;
                        font-family: PingFangSC, PingFang SC;
                        font-weight: 400;
                        color: #E0312A;
                     }
                  }
               }
               .adduser_list_item_ipt {
                  flex: 1;
                  text-align: right;
                  font-size: 28rpx;
                  font-family: PingFangSC, PingFang SC;
                  font-weight: 400;
                  color: #333333;
                  margin-left: 30rpx;	
                  display: flex;
                  align-items: center;
                  justify-content: flex-end;
                  text {
                     font-size: 28rpx;
                     font-family: PingFangSC, PingFang SC;
                     font-weight: 400;
                     color: #333333;
                  }
               }
            }
         }
         .adduser_footer {
            width: 100%;
            margin-top: 60rpx;
            display: flex;
            align-items: center;
            justify-content: space-between;
            .t {
               background: #025EEF !important;
               color: #ffffff !important;
            }
            .adduser_footer_item {
               width: 336rpx;
               height: 88rpx;
               line-height: 88rpx;
               text-align: center;
               border-radius: 44rpx;
               border: 1rpx solid #025EEF;
               font-size: 32rpx;
               font-family: PingFangSC, PingFang SC;
               font-weight: 400;
               color: #025EEF;
               margin-right: 18rpx;
               &:last-child {
                  margin: 0 !important;
               }
            }
         }
      }
		
      .addcar {
         padding: 30rpx;
         width: 100%;
         box-sizing: border-box;
         .addcar_head {
            text-align: center;
            font-size: 32rpx;
            font-family: PingFangSC, PingFang SC;
            font-weight: 500;
            color: #222222;
         }
         .addcar_ipt {
            width: 100%;
            height: 100rpx;
            line-height: 100rpx;
            text-align: center;
            background: #F7F7F7;
            border-radius: 50rpx;
            margin-top: 60rpx;
            input {
               width: 100%;
               height: 100%;
               font-size: 28rpx;
               font-weight: 400;
               color: #999999;
               text-align: center;
            }
         }
         .addcar_footer {
            width: 100%;
            display: flex;
            align-items: center;
            justify-content: space-between;
            margin-top: 60rpx;
            .t {
               background: #025EEF !important;
               color: #ffffff !important;
            }
            .addcar_footer_item {
               flex: 1;
               height: 88rpx;
               line-height: 88rpx;
               font-size: 32rpx;
               font-weight: 400;
               color: #025EEF;
               text-align: center;
               border-radius: 44rpx;
               border: 1rpx solid #025EEF;
               margin-right: 18rpx;
               &:last-child {
                  margin-right: 0 !important;
               }
            }
         }
      }
		
      .popup-content {
         padding: 30rpx 30rpx 0 30rpx;
         overflow: hidden;
         display: flex;
         flex-flow: column;
         .respondent-title {
            width: 100%;
            text-align: center;
            font-size: 32rpx;
            font-weight: 500;
            color: #222222;
         }
         .search-box {
            width: 100%;
            margin-top: 40rpx;
            .search-box-top {
               width: 100%;
               height: 68rpx;
               display: flex;
               align-items: center;
               .search-box-top-ipt {
                  flex: 1;
                  height: 100%;
                  padding: 0 30rpx;
                  box-sizing: border-box;
                  background: #F7F7F7;
                  border-radius: 4rpx;
                  display: flex;
                  align-items: center;
                  image {
                     width: 36rpx;
                     height: 36rpx;
                     flex-shrink: 0;
                     margin-right: 22rpx;
                  }
                  input {
                     flex: 1;
                     height: 100%;
                     font-size: 26rpx;
                     font-weight: 400;
                     color: #B2B2B2;
                  }
               }
               text {
                  flex-shrink: 0;
                  margin-left: 30rpx;
                  font-size: 28rpx;
                  font-weight: 400;
                  color: #025EEF;
               }
            }
            .search-box-total {
               font-size: 26rpx;
               font-weight: 400;
               color: #666666;
               margin-top: 24rpx;
            }
         }
         .list {
            width: 100%;
            height: 800rpx;
            margin-top: 30rpx;
            padding: 0 !important;
            .item {
               width: 100%;
               height: 102rpx;
               display: flex;
               align-items: center;
               border-bottom: 1rpx solid #E5E5E5;
               .item_a {
                  flex-shrink: 0;
                  width: 36rpx;
                  height: 36rpx;
                  margin-right: 24rpx;
                  image {
                     width: 100%;
                     height: 100%;
                  }
               }
               .item_b {
                  flex-shrink: 0;
                  width: 80rpx;
                  height: 80rpx;
                  display: flex;
                  align-items: center;
                  justify-content: center;
                  overflow: hidden;
                  margin-right: 24rpx;
                  image {
                     width: 100%;
                     height: 100%;
                  }
               }
               .item_c {
                  flex: 1;
                  display: flex;
                  align-items: center;
                  text {
                     &:nth-child(1) {
                        font-size: 30rpx;
                        font-family: PingFangSC, PingFang SC;
                        font-weight: 400;
                        color: #222222;
                     }
                     &:nth-child(2) {
                        font-size: 20rpx;
                        font-family: PingFangSC, PingFang SC;
                        font-weight: 400;
                        color: #999999;
                        padding: 1rpx 4rpx;
                        box-sizing: border-box;
                        background-color: #EEEEEE;
                        margin-left: 12rpx;
                     }
                  }
               }
            }
         }
         .footer1 {
            width: 100%;
            height: 100rpx;
            display: flex;
            align-items: center;
            justify-content: space-between;
            padding: 14rpx 0 0 0;
            box-sizing: border-box;
            .footer_left {
               flex: 1;
               display: flex;
               flex-direction: column;
               .footer_left_a {
                  font-size: 26rpx;
                  font-family: PingFangSC, PingFang SC;
                  font-weight: 400;
                  color: #333333;
               }
               .footer_left_b {
                  font-size: 24rpx;
                  font-family: PingFangSC, PingFang SC;
                  font-weight: 400;
                  color: #999999;
               }
            }
            .footer_btn {
               flex-shrink: 0;
               width: 216rpx;
               height: 72rpx;
               line-height: 72rpx;
               text-align: center;
               background: #025EEF;
               border-radius: 8rpx;
               font-size: 28rpx;
               font-weight: 500;
               color: #FFFFFF;
            }
         }
      }
		    
.visit {
  width: 100%;

      .head {
         width: 100%;
         padding: 20rpx 30rpx;
         box-sizing: border-box;
         font-size: 28rpx;
         font-weight: 400;
         color: #666666;
      }
  .adduser {
    padding: 30rpx;
    width: 100%;
    box-sizing: border-box;
    .adduser_head {
      width: 100%;
      text-align: center;
      font-size: 32rpx;
      font-family: PingFangSC, PingFang SC;
      font-weight: 500;
      color: #222222;
    }
    .adduser_list {
      width: 100%;
      margin-top: 40rpx;
      .adduser_list_item {
        width: 100%;
        padding: 24rpx 0;
        box-sizing: border-box;
        border-bottom: 1rpx solid #e5e5e5;
        display: flex;
        align-items: center;
        justify-content: space-between;
        .adduser_list_item_label {
          flex-shrink: 0;
          display: flex;
          align-items: center;
          text {
            &:nth-child(1) {
              font-size: 30rpx;
              font-family: PingFangSC, PingFang SC;
              font-weight: 400;
              color: #222222;
            }
            &:nth-child(2) {
              font-size: 30rpx;
              font-family: PingFangSC, PingFang SC;
              font-weight: 400;
              color: #e0312a;
            }
          }
        }
        .adduser_list_item_ipt {
          flex: 1;
          text-align: right;
          font-size: 28rpx;
          font-family: PingFangSC, PingFang SC;
          font-weight: 400;
          color: #333333;
          margin-left: 30rpx;
          display: flex;
          align-items: center;
          justify-content: flex-end;
          text {
            font-size: 28rpx;
            font-family: PingFangSC, PingFang SC;
            font-weight: 400;
            color: #333333;
          }
        }
      }
    }
    .adduser_footer {
      width: 100%;
      margin-top: 60rpx;
      display: flex;
      align-items: center;
      justify-content: space-between;
      .t {
        background: #025eef !important;
        color: #ffffff !important;
      }
      .adduser_footer_item {
        width: 336rpx;
        height: 88rpx;
        line-height: 88rpx;
        text-align: center;
        border-radius: 44rpx;
        border: 1rpx solid #025eef;
        font-size: 32rpx;
        font-family: PingFangSC, PingFang SC;
        font-weight: 400;
        color: #025eef;
        margin-right: 18rpx;
        &:last-child {
          margin: 0 !important;
        }
      }
    }
  }

      .list {
         width: 100%;
         padding: 0 30rpx;
         box-sizing: border-box;
         background-color: #ffffff;
  .addcar {
    padding: 30rpx;
    width: 100%;
    box-sizing: border-box;
    .addcar_head {
      text-align: center;
      font-size: 32rpx;
      font-family: PingFangSC, PingFang SC;
      font-weight: 500;
      color: #222222;
    }
    .addcar_ipt {
      width: 100%;
      height: 100rpx;
      line-height: 100rpx;
      text-align: center;
      background: #f7f7f7;
      border-radius: 50rpx;
      margin-top: 60rpx;
      input {
        width: 100%;
        height: 100%;
        font-size: 28rpx;
        font-weight: 400;
        color: #999999;
        text-align: center;
      }
    }
    .addcar_footer {
      width: 100%;
      display: flex;
      align-items: center;
      justify-content: space-between;
      margin-top: 60rpx;
      .t {
        background: #025eef !important;
        color: #ffffff !important;
      }
      .addcar_footer_item {
        flex: 1;
        height: 88rpx;
        line-height: 88rpx;
        font-size: 32rpx;
        font-weight: 400;
        color: #025eef;
        text-align: center;
        border-radius: 44rpx;
        border: 1rpx solid #025eef;
        margin-right: 18rpx;
        &:last-child {
          margin-right: 0 !important;
        }
      }
    }
  }

         .list_item {
            width: 100%;
            height: 98rpx;
            display: flex;
            align-items: center;
            justify-content: space-between;
            border-bottom: 1rpx solid #E5E5E5;
  .popup-content {
    padding: 30rpx 30rpx 0 30rpx;
    overflow: hidden;
    display: flex;
    flex-flow: column;
    .respondent-title {
      width: 100%;
      text-align: center;
      font-size: 32rpx;
      font-weight: 500;
      color: #222222;
    }
    .search-box {
      width: 100%;
      margin-top: 40rpx;
      .search-box-top {
        width: 100%;
        height: 68rpx;
        display: flex;
        align-items: center;
        .search-box-top-ipt {
          flex: 1;
          height: 100%;
          padding: 0 30rpx;
          box-sizing: border-box;
          background: #f7f7f7;
          border-radius: 4rpx;
          display: flex;
          align-items: center;
          image {
            width: 36rpx;
            height: 36rpx;
            flex-shrink: 0;
            margin-right: 22rpx;
          }
          input {
            flex: 1;
            height: 100%;
            font-size: 26rpx;
            font-weight: 400;
            color: #b2b2b2;
          }
        }
        text {
          flex-shrink: 0;
          margin-left: 30rpx;
          font-size: 28rpx;
          font-weight: 400;
          color: #025eef;
        }
      }
      .search-box-total {
        font-size: 26rpx;
        font-weight: 400;
        color: #666666;
        margin-top: 24rpx;
      }
    }
    .list {
      width: 100%;
      height: 800rpx;
      margin-top: 30rpx;
      padding: 0 !important;
      .item {
        width: 100%;
        height: 102rpx;
        display: flex;
        align-items: center;
        border-bottom: 1rpx solid #e5e5e5;
        .item_a {
          flex-shrink: 0;
          width: 36rpx;
          height: 36rpx;
          margin-right: 24rpx;
          image {
            width: 100%;
            height: 100%;
          }
        }
        .item_b {
          flex-shrink: 0;
          width: 80rpx;
          height: 80rpx;
          display: flex;
          align-items: center;
          justify-content: center;
          overflow: hidden;
          margin-right: 24rpx;
          image {
            width: 100%;
            height: 100%;
          }
        }
        .item_c {
          flex: 1;
          display: flex;
          align-items: center;
          text {
            &:nth-child(1) {
              font-size: 30rpx;
              font-family: PingFangSC, PingFang SC;
              font-weight: 400;
              color: #222222;
            }
            &:nth-child(2) {
              font-size: 20rpx;
              font-family: PingFangSC, PingFang SC;
              font-weight: 400;
              color: #999999;
              padding: 1rpx 4rpx;
              box-sizing: border-box;
              background-color: #eeeeee;
              margin-left: 12rpx;
            }
          }
        }
      }
    }
    .footer1 {
      width: 100%;
      height: 100rpx;
      display: flex;
      align-items: center;
      justify-content: space-between;
      padding: 14rpx 0 0 0;
      box-sizing: border-box;
      .footer_left {
        flex: 1;
        display: flex;
        flex-direction: column;
        .footer_left_a {
          font-size: 26rpx;
          font-family: PingFangSC, PingFang SC;
          font-weight: 400;
          color: #333333;
        }
        .footer_left_b {
          font-size: 24rpx;
          font-family: PingFangSC, PingFang SC;
          font-weight: 400;
          color: #999999;
        }
      }
      .footer_btn {
        flex-shrink: 0;
        width: 216rpx;
        height: 72rpx;
        line-height: 72rpx;
        text-align: center;
        background: #025eef;
        border-radius: 8rpx;
        font-size: 28rpx;
        font-weight: 500;
        color: #ffffff;
      }
    }
  }

            .list_item_label {
               flex-shrink: 0;
               display: flex;
               align-items: center;
  .head {
    width: 100%;
    padding: 20rpx 30rpx;
    box-sizing: border-box;
    font-size: 28rpx;
    font-weight: 400;
    color: #666666;
  }

               text {
                  &:nth-child(1) {
                     font-size: 30rpx;
                     font-weight: 400;
                     color: #222222;
                  }
  .list {
    width: 100%;
    padding: 0 30rpx;
    box-sizing: border-box;
    background-color: #ffffff;

                  &:nth-child(2) {
                     font-size: 30rpx;
                     font-weight: 400;
                     color: #E42D2D;
                  }
               }
            }
    .list_item {
      width: 100%;
      height: 98rpx;
      display: flex;
      align-items: center;
      justify-content: space-between;
      border-bottom: 1rpx solid #e5e5e5;

            .list_item_content {
               flex: 1;
               height: 100%;
               margin-left: 30rpx;
               display: flex;
               align-items: center;
               justify-content: flex-end;
					
               .active {
                  background: #025EEF !important;
                  color: #FFFFFF !important;
               }
					
               .list_item_content_item {
                  width: 104rpx;
                  height: 64rpx;
                  line-height: 64rpx;
                  text-align: center;
                  background: #EEEEEE;
                  border-radius: 4rpx;
                  font-size: 28rpx;
                  font-weight: 400;
                  color: #333333;
                  margin-left: 20rpx;
               }
      .list_item_label {
        flex-shrink: 0;
        display: flex;
        align-items: center;

               text {
                  font-size: 28rpx;
                  font-weight: 400;
                  color: #999999;
                  margin-right: 6rpx;
               }
        text {
          &:nth-child(1) {
            font-size: 30rpx;
            font-weight: 400;
            color: #222222;
          }

               input {
                  width: 100%;
                  height: 100%;
                  text-align: right;
                  font-size: 28rpx;
                  font-weight: 400;
                  color: #222222;
               }
            }
         }
      }
          &:nth-child(2) {
            font-size: 30rpx;
            font-weight: 400;
            color: #e42d2d;
          }
        }
      }

      .cate {
         width: 100%;
         padding: 30rpx;
         box-sizing: border-box;
         background-color: #ffffff;
         margin-top: 20rpx;
      .list_item_content {
        flex: 1;
        height: 100%;
        margin-left: 30rpx;
        display: flex;
        align-items: center;
        justify-content: flex-end;

         .cate_head {
            font-size: 32rpx;
            font-family: PingFangSC, PingFang SC;
            font-weight: 500;
            color: #222222;
         }
        .active {
          background: #025eef !important;
          color: #ffffff !important;
        }

         .cate_list {
            width: 100%;
            display: flex;
            align-items: center;
            flex-wrap: wrap;
            margin-top: 30rpx;
        .list_item_content_item {
          width: 104rpx;
          height: 64rpx;
          line-height: 64rpx;
          text-align: center;
          background: #eeeeee;
          border-radius: 4rpx;
          font-size: 28rpx;
          font-weight: 400;
          color: #333333;
          margin-left: 20rpx;
        }

            .cate_list_item {
               height: 64rpx;
               padding: 0 20rpx;
               box-sizing: border-box;
               background-color: #EEEEEE;
               border-radius: 4rpx;
               margin-right: 20rpx;
               margin-bottom: 20rpx;
               display: flex;
               align-items: center;
        text {
          font-size: 28rpx;
          font-weight: 400;
          color: #999999;
          margin-right: 6rpx;
        }

               &:last-child {
                  margin-right: 0 !important;
               }
        input {
          width: 100%;
          height: 100%;
          text-align: right;
          font-size: 28rpx;
          font-weight: 400;
          color: #222222;
        }
      }
    }
  }

               text {
                  font-size: 26rpx;
                  font-family: PingFangSC, PingFang SC;
                  font-weight: 400;
                  color: #333333;
                  margin-right: 30rpx;
               }
            }
         }
  .cate {
    width: 100%;
    padding: 30rpx;
    box-sizing: border-box;
    background-color: #ffffff;
    margin-top: 20rpx;

         .cate_add {
            width: 200rpx;
            height: 50rpx;
            display: flex;
            align-items: center;
            justify-content: center;
            background: rgba(2, 94, 239, 0);
            border-radius: 25rpx;
            border: 1rpx solid #025EEF;
            font-size: 22rpx;
            font-family: PingFangSC, PingFang SC;
            font-weight: 400;
            margin-top: 20rpx;
            color: #025EEF;
            margin: 0 auto;
         }
      }
    .cate_head {
      font-size: 32rpx;
      font-family: PingFangSC, PingFang SC;
      font-weight: 500;
      color: #222222;
    }

      .zw {
         width: 100%;
         height: calc(env(safe-area-inset-bottom) + 118rpx);
      }
    .cate_list {
      width: 100%;
      display: flex;
      align-items: center;
      flex-wrap: wrap;
      margin-top: 30rpx;

      .footer {
         width: 100%;
         padding: 0 30rpx;
         padding-bottom: env(safe-area-inset-bottom);
         box-sizing: border-box;
         position: fixed;
         left: 0;
         bottom: 30rpx;
      .cate_list_item {
        height: 64rpx;
        padding: 0 20rpx;
        box-sizing: border-box;
        background-color: #eeeeee;
        border-radius: 4rpx;
        margin-right: 20rpx;
        margin-bottom: 20rpx;
        display: flex;
        align-items: center;

         .footer_btn {
            width: 100%;
            height: 88rpx;
            line-height: 88rpx;
            text-align: center;
            background: #025EEF;
            border-radius: 44rpx;
            font-size: 32rpx;
            font-weight: 500;
            color: #FFFFFF;
         }
      }
   }
        &:last-child {
          margin-right: 0 !important;
        }

        text {
          font-size: 26rpx;
          font-family: PingFangSC, PingFang SC;
          font-weight: 400;
          color: #333333;
          margin-right: 30rpx;
        }
      }
    }

    .cate_add {
      width: 200rpx;
      height: 50rpx;
      display: flex;
      align-items: center;
      justify-content: center;
      background: rgba(2, 94, 239, 0);
      border-radius: 25rpx;
      border: 1rpx solid #025eef;
      font-size: 22rpx;
      font-family: PingFangSC, PingFang SC;
      font-weight: 400;
      margin-top: 20rpx;
      color: #025eef;
      margin: 0 auto;
    }
  }

  .zw {
    width: 100%;
    height: calc(env(safe-area-inset-bottom) + 118rpx);
  }

  .footer {
    width: 100%;
    padding: 0 30rpx;
    padding-bottom: env(safe-area-inset-bottom);
    box-sizing: border-box;
    position: fixed;
    left: 0;
    bottom: 30rpx;

    .footer_btn {
      width: 100%;
      height: 88rpx;
      line-height: 88rpx;
      text-align: center;
      background: #025eef;
      border-radius: 44rpx;
      font-size: 32rpx;
      font-weight: 500;
      color: #ffffff;
    }
  }
}
</style>