静态页面

立即下单/确认下单/清关服务/国内清关申请/个人中心

components/base/tabbar.vue

@@ -46,14 +46,14 @@
 					},
 					{
 						"selectedIconPath": "/static/image/tabbar/clearanceService-a.png",
-						"iconPath": "/static/image/tabbar/cart.png",
-						"pagePath": "/pages/index/cart",
+						"iconPath": "/static/image/tabbar/clearanceService.png",
+						"pagePath": "/pages/index/clearanceService",
 						"title": "tabbar.title.3"
 					},
 					{
 						"selectedIconPath": "/static/image/tabbar/center-a.png",
 						"iconPath": "/static/image/tabbar/center.png",
-						"pagePath": "/pages/index/center",
+						"pagePath": "/pages/index/center2",
 						"title": "tabbar.title.4"
 					}
 				]

components/user/productList.vue

@@ -2,7 +2,7 @@
   <view class="list">
     <view class="item"
           v-for="(item, index) in 10"
-          @click="$utils.navigateTo('/pages_order/product/productDetail?id=123')"
+          @click="immediatePurchase(item)"
           :key="index">
       <image
           class="image"
@@ -28,7 +28,7 @@
         </view>
       </view>
       <view class="btn">
-        <view  @click="immediatePurchase(item)" class="change">
+        <view  class="change">
           立即采购
         </view>
       </view>
@@ -45,7 +45,11 @@ export default {
   methods: {
     // 立即购买
     immediatePurchase(item) {
-
+      console.log("====")
+      var itemStr = encodeURIComponent(JSON.stringify(item));
+      uni.navigateTo({
+        url: `/pages_order/tradingPlatform/nowOrder?params=${itemStr}`,
+      });
     }
   },
 }
@@ -118,7 +122,7 @@ export default {
     .btn {
       position: absolute;
       right: 0rpx;
-      bottom:0rpx;
+      bottom: 0rpx;
       padding: 10rpx;
       border-radius: 50%;
       //background-color: $uni-color;

locale/en.json

@@ -10,8 +10,8 @@
 				"language" : "Change Language",
 				"purchaser":"purchaser",
 				"supplier":"supplier",
-				"companyProfile":"公司简介",
-				"aluminiumProduct":"铝制品"
+				"companyProfile":"companyProfile",
+				"aluminiumProduct":"aluminiumProduct"
 			}
 		}
 	},

pages.json

@@ -11,6 +11,12 @@
 				"navigationBarTitleText": ""
 			}
 		},
+		{
+			"path": "pages/index/clearanceService",
+			"style": {
+				"navigationBarTitleText": ""
+			}
+		},
 		{
 			"path": "pages/index/order",
 			"style": {
@@ -29,6 +35,12 @@
 				"navigationBarTitleText": ""
 			}
 		},
+		{
+			"path": "pages/index/center2",
+			"style": {
+				"navigationBarTitleText": ""
+			}
+		},
 		{
 			"path": "pages/index/cart",
 			"style": {
@@ -53,6 +65,15 @@
 			{
 				"path": "auth/registerShop"
 			},
+			{
+				"path": "tradingPlatform/nowOrder"
+			},
+			{
+				"path": "tradingPlatform/confirmOrder"
+			},
+			{
+				"path": "tradingPlatform/confirmOrder"
+			},
 
 			{
 				"path": "mine/purse"
@@ -86,7 +107,7 @@
 	}],
 	"globalStyle": {
 		"navigationBarTextStyle": "black",
-		"navigationBarTitleText": "酒店桌布",
+		"navigationBarTitleText": "铝交易",
 		"navigationBarBackgroundColor": "#F8F8F8",
 		"backgroundColor": "#F8F8F8",
 		"navigationStyle": "custom"

pages/index/center2.vue

@@ -0,0 +1,174 @@
+<template>
+  <view class="page">
+
+    <navbar title="个人中心"/>
+
+    <view class="frame">
+
+      <!-- 头部 -->
+      <view class="head">
+        <view class="headImage">
+          <image src="" mode=""></image>
+        </view>
+        <view class="info">
+          <view class="name">
+            倾心.
+          </view>
+          <!-- <view class="vip">
+            VIP1
+          </view> -->
+          <view class="tips">
+            手机号：13812345678
+          </view>
+        </view>
+        <view class="headBtn" @click="headBtn">
+          角色切换
+        </view>
+        <view class="setting">
+          <uv-icon name="setting" size="40rpx"></uv-icon>
+        </view>
+      </view>
+
+      <!--内容-->
+      <view class="content">
+        <view class="item" v-for="(item, index) in list" :key="index">
+          <view class="key">
+            <view class="img">
+              <img :src="item.imgUrl" style="width: 100%; height: 100%;"/>
+            </view>
+            <view class="text">
+              {{item.text}}
+            </view>
+          </view>
+          <view class="value">
+            {{item.value}}
+          </view>
+        </view>
+      </view>
+    </view>
+
+    <tabber select="3"/>
+  </view>
+</template>
+<script>
+import topbar from "@/components/base/topbar.vue";
+import tabber from "@/components/base/tabbar.vue";
+
+export default {
+  name: "center2",
+  components: {tabber, topbar},
+  data() {
+    return {
+      list:[
+        {text: '联系客服', value: ">" , imgUrl: '/static/image/center/1.png'},
+        {text: '系统设置', value: ">" , imgUrl: '/static/image/center/1.png'},
+        {text: '关于我们', value: ">" , imgUrl: '/static/image/center/1.png'}
+      ]
+    }
+  },
+  methods: {},
+}
+</script>
+
+
+<style scoped lang="scss">
+.page {
+  .frame {
+    .head {
+      display: flex;
+      background-color: $uni-color;
+      padding: 40rpx 20rpx;
+      align-items: center;
+      position: relative;
+      color: #fff;
+      box-shadow: 0 10rpx 20rpx rgba(89, 80, 80, 0.1);
+
+      .headImage {
+        width: 120rpx;
+        height: 120rpx;
+        background-image: url(/static/image/center/3.png);
+        background-size: 100% 100%;
+        overflow: hidden;
+        border-radius: 50%;
+        margin-right: 40rpx;
+      }
+
+      .info {
+        font-size: 28rpx;
+
+        .vip {
+          background-color: #FCCC92;
+          color: #FA6239;
+          width: 100rpx;
+          display: flex;
+          justify-content: center;
+          align-items: center;
+          height: 40rpx;
+          border-radius: 20rpx;
+          margin-top: 20rpx;
+        }
+
+        .name {
+          font-size: 32rpx;
+        }
+
+        .tips {
+          font-size: 26rpx;
+          color: #ABABAB;
+        }
+      }
+
+      .headBtn {
+        margin-left: auto;
+        padding: 15rpx 20rpx;
+        background-color: $uni-color;
+        color: #fff;
+        border-radius: 20rpx;
+        margin-top: 50rpx;
+      }
+
+      .setting {
+        position: absolute;
+        right: 50rpx;
+        top: 50rpx;
+      }
+    }
+
+    .content {
+      background-color: #2e2e2e;
+
+      .item {
+        display: flex;
+        justify-content: space-between;
+        align-items: center;
+        padding: 20rpx 40rpx;
+
+        .key {
+          display: flex;
+          justify-content: center;
+          align-items: center;
+          color: #FFF;
+          font-size: 32rpx;
+
+          .img {
+            width: 40rpx;
+            height: 40rpx;
+          }
+
+          .text {
+            margin-left: 20rpx;
+          }
+
+
+        }
+
+        .value {
+          color: #FFF;
+          font-size: 36rpx;
+        }
+      }
+    }
+
+  }
+}
+</style>

pages/index/clearanceService.vue

@@ -0,0 +1,102 @@
+<template>
+  <view class="page">
+    <view class="frame">
+      <!--顶部导航栏-->
+      <topbar showRight="0"></topbar>
+
+      <!--内容区域-->
+      <view class="content">
+
+        <view class="bigImg">
+          <!--换成后端后删除对应的图片-->
+          <img src="../../static/image/clearanceService.png" alt="" style="width: 100%;height: 100%;">
+        </view>
+        <view class="smallImg">
+          <!--换成后端后删除对应的图片-->
+          <img src="../../static/image/1.png" alt="" style="width: 100%;height: 100%;">
+        </view>
+        <view class="ljsq">
+          <span @click="applyClearanceService" class="text">
+            立即申请&nbsp;&nbsp;>>
+          </span>
+        </view>
+      </view>
+    </view>
+
+    <!--底部导航栏-->
+    <tabber select="2"/>
+  </view>
+</template>
+<script>
+import topbar from "@/components/base/topbar.vue";
+import tabber from "@/components/base/tabbar.vue";
+
+export default {
+  name: "clearanceService",
+  components: {tabber, topbar},
+  data() {
+    return {}
+  },
+  methods: {
+    applyClearanceService(){
+      uni.navigateTo({
+        //  titleList: ['采购商注册', '供应商注册','国内清关申请'],
+        url: `/pages_order/auth/registerShop?identity=2`
+      })
+    },
+  },
+}
+</script>
+
+
+<style scoped lang="scss">
+.page {
+  .frame {
+    .content {
+      height: calc(100vh - 120rpx - 120rpx);
+      background-color: #2d384c;
+      width: 100vw;
+
+      .bigImg {
+        display: flex;
+        justify-content: center;
+        align-items: center;
+        height: 90%;
+        padding: 20rpx;
+      }
+
+      .smallImg {
+        position: absolute;
+        left: calc(50% - 80rpx);
+        bottom: 350rpx;
+        width: 160rpx;
+        height: 160rpx;
+
+
+      }
+
+      .ljsq{
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        width: 300rpx;
+        height: 70rpx;
+        border-radius: 40rpx;
+        color: #FFF;
+        font-size: 28rpx;
+        margin: 20rpx 10rpx 0 0;
+        background: #FFF;
+        border-radius: 40rpx;
+        position: absolute;
+        left: calc(50% - 150rpx);
+        bottom: 550rpx;
+        .text{
+          color: #000;
+          font-size: 38rpx;
+
+        }
+      }
+    }
+  }
+}
+</style>

pages/index/tradingPlatform.vue

@@ -26,10 +26,7 @@
           <productList :productList="productList.records"/>
         </view>
       </view>
-
-
     </view>
-
     <tabber select="1"/>
   </view>
 </template>

pages_order/auth/registerShop.vue

@@ -158,7 +158,7 @@ export default {
   data() {
     return {
       titleIndex: 0,
-      titleList: ['采购商注册', '供应商注册'],
+      titleList: ['采购商注册', '供应商注册','国内清关申请'],
       form: {
         userName: '',
         name: '',

pages_order/static/address/1.svg

@@ -0,0 +1 @@
+<svg t="1724496486273" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="4383" width="32" height="32"><path d="M512 128c-211.744 0-384 172.256-384 384s172.256 384 384 384 384-172.256 384-384-172.256-384-384-384z m0 704c-176.448 0-320-143.552-320-320s143.552-320 320-320 320 143.552 320 320-143.552 320-320 320z" fill="#bfbfbf" p-id="4384"></path><path d="M660.736 606.112L528 529.344V320c0-17.664-14.336-32-32-32s-32 14.336-32 32v224c0 11.872 14.752 21.824 24.352 27.328 2.656 4 9.952 7.616 14.4 10.176l132 80c15.296 8.832 31.872 3.584 40.704-11.712s0.608-34.848-14.72-43.68z" fill="#bfbfbf" p-id="4385"></path></svg>

pages_order/tradingPlatform/confirmOrder.vue

@@ -0,0 +1,205 @@
+<template>
+  <view class="confirmOrder">
+    <navbar title="确定下单" leftClick @leftClick="$utils.navigateBack"/>
+
+    <view class="frame">
+
+      <view class="title">
+        支付保证金
+      </view>
+
+      <!--填写信息-->
+      <view class="form">
+
+        <!--开户名称-->
+        <view class="item">
+          <view>开户名称</view>
+          <view>
+            <input v-model="form.a" placeholder="请输入开户名称" clearable></input>
+          </view>
+        </view>
+
+        <!--开户行-->
+        <view class="item">
+          <view>开户行</view>
+          <view>
+            <input v-model="form.b" placeholder="请输入开开户行" clearable></input>
+          </view>
+        </view>
+
+        <!--银行账号-->
+        <view class="item">
+          <view>银行账号</view>
+          <view>
+            <input v-model="form.c" placeholder="请输入银行账号" clearable></input>
+          </view>
+        </view>
+
+
+        <view class="tip">
+          提示:请于下单成功后30分钟内支付。(自动倒计时)
+        </view>
+
+      </view>
+
+      <!--立即下单和联系我们-->
+      <view class="btns">
+          <span @click="confirmOrder" class="qrdd">
+            确认下单
+          </span>
+
+        <span @click="closeOrder" class="qxdd">
+            取消订单
+          </span>
+      </view>
+
+    </view>
+  </view>
+</template>
+
+<script>
+export default {
+  name: "confirmOrder",
+  onLoad(options) {
+    if (options.params) {
+      const fatherData = JSON.parse(decodeURIComponent(options.params));
+      console.log(fatherData, "fatherData==========")
+      this.fatherData = fatherData;
+    }
+  },
+  data() {
+    return {
+      fatherData: {},
+      form: {
+        a: "",
+        b: "",
+        c: "",
+
+      },
+
+    }
+  },
+  methods: {
+    //确认下单
+    confirmOrder() {
+
+    },
+    //取消订单
+    closeOrder() {
+
+    },
+
+  },
+}
+</script>
+
+<style scoped lang="scss">
+.confirmOrder {
+  background-color: #FFF;
+  height: 100vh;
+
+  .frame {
+    .title {
+      display: flex;
+      justify-content: center;
+      align-items: center;
+      font-size: 36rpx;
+      color: #000;
+      padding: 30rpx;
+    }
+
+    .form {
+      margin: 20rpx;
+      border: 1px solid #efefef;
+      border-radius: 20rpx;
+      overflow: hidden;
+
+
+      .item {
+        display: flex;
+        align-items: center;
+        background-color: #FFF;
+        height: 100rpx;
+        padding: 10rpx 0 0 20rpx;
+        border-bottom: 1px solid #efefef;
+
+        > view:nth-of-type(1) {
+          width: 30%;
+          // font-weight: 700;
+        }
+
+        > view:nth-of-type(2) {
+          width: 70%;
+          border-radius: 10rpx;
+          overflow: hidden;
+
+
+          input {
+            background-color: #FFF;
+            font-size: 28rpx;
+            padding: 16rpx 8rpx 16rpx 15rpx;
+          }
+        }
+      }
+
+
+      .tip {
+        display: flex;
+        justify-content: center;
+        align-items: center;
+        font-size: 28rpx;
+        color: #f95e7d;
+        background-color: #f5f5f5;
+        height: 40rpx;
+        //margin-top: 20rpx;
+        padding: 10rpx;
+      }
+    }
+
+    .btns {
+      width: 100%;
+      display: flex;
+      flex-direction: column;
+      align-items: center;
+      justify-content: center;
+      gap: 20rpx;
+      position: fixed;
+      bottom: 80rpx;
+      left: 0;
+      right: 0;
+
+      .qrdd {
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        width: 500rpx;
+        height: 70rpx;
+        border-radius: 40rpx;
+        color: #FFF;
+        font-size: 28rpx;
+        margin: 20rpx 10rpx 0 0;
+        background: $uni-color;
+        //margin-top: 20rpx;
+        border-radius: 40rpx;
+      }
+
+      .qxdd {
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        width: 500rpx;
+        height: 70rpx;
+        border-radius: 40rpx;
+        color: #000000;
+        font-size: 28rpx;
+        margin: 20rpx 10rpx 0 0;
+        background: #f1f1f1;
+        //margin-top: 20rpx;
+        border-radius: 40rpx;
+      }
+
+
+    }
+  }
+}
+</style>

pages_order/tradingPlatform/nowOrder.vue

@@ -0,0 +1,475 @@
+<template>
+  <view class="now-order">
+    <navbar title="立即下单" leftClick @leftClick="$utils.navigateBack"/>
+
+    <view class="frame">
+      <view class="title">
+          <span
+              style="width: 10rpx;height: 40rpx;background-color: #1f1c39;border-radius: 10rpx;overflow: hidden;"></span>
+        <span>铝制品</span>
+      </view>
+
+      <view class="basic-info">
+        <!--商品规格-->
+        <view class="item">
+          <view>商品规格</view>
+          <view>
+            铝制品(Al>96%)
+          </view>
+        </view>
+
+        <!--<uv-divider text="" :hairline="true"></uv-divider>-->
+
+        <!--提货地点-->
+        <view class="currentRegion">
+          <view>提货地点</view>
+          <view @click.stop="selectAddr">
+            <input class="input"
+                   disabled
+                   v-model="form.currentRegion" placeholder="请选择所在地区"></input>
+            <view class="orientation">
+              <!-- 定位 -->
+              <img src="../../static/image/address/selectIcon.png"
+                   style="width:30rpx;height: 30rpx;margin:5rpx 5rpx 5rpx 5rpx;">
+            </view>
+          </view>
+        </view>
+
+
+        <!--详细地址-->
+        <view class="item">
+          <view>详细地址</view>
+          <view>
+            <input v-model="form.address" placeholder="请输入详细地址" clearable></input>
+          </view>
+        </view>
+
+        <!--交货日期-->
+        <view class="delivery-date">
+          <view>交货日期</view>
+          <view class="value">
+            <view class="dateTimeCls">
+              <view class="date" @click="startDateOpen">
+                {{ form.deliveryDate }}
+                <uv-datetime-picker ref="startDateRef" v-model="form.deliveryDate" mode="date"
+                                    @confirm="startDateChange"></uv-datetime-picker>
+              </view>
+              <view class="img">
+                >
+                <!--<img src="../static/address/1.svg" style="width: 40rpx;-->
+                <!--height: 40rpx;">-->
+              </view>
+            </view>
+          </view>
+        </view>
+
+        <!--暂定数量-->
+        <view class="tentativeQuantity">
+          <view class="key">暂定数量(吨)</view>
+          <view class="value">
+            <uv-number-box v-model="form.tentativeQuantity"></uv-number-box>
+          </view>
+        </view>
+
+        <!--单价-->
+        <view class="item">
+          <view>单价</view>
+          <view>
+            <input v-model="form.price" disabled clearable></input>
+          </view>
+        </view>
+
+        <!--履约保证金-->
+        <view class="performanceBond">
+          <view class="key">履约保证金</view>
+          <view class="value">
+            <input v-model="form.performanceBond" clearable></input>
+          </view>
+        </view>
+
+        <view class="Tip">
+          <span class="span">(单价*数量*2%)</span>
+        </view>
+        ‘
+        <!--立即下单和联系我们-->
+        <view class="btns">
+          <span @click="ljxd" class="ljxd">
+            立即下单
+          </span>
+          <span @click="contactUs" class="lxwm">
+            联系我们
+          </span>
+          <span class="tip">如有问题，请联系我们</span>
+        </view>
+
+
+      </view>
+    </view>
+
+  </view>
+</template>
+
+<script>
+import topbar from "@/components/base/topbar.vue";
+import {mapGetters} from 'vuex'
+import Position from '@/utils/position.js'
+import dayjs from "dayjs";
+
+export default {
+  components: {
+    topbar,
+  },
+  computed: {
+    ...mapGetters(['userShop']),
+  },
+  onLoad(options) {
+    if (options.params) {
+      const fatherData = JSON.parse(decodeURIComponent(options.params));
+      console.log(fatherData, "fatherData==========")
+      this.fatherData = fatherData;
+    }
+  },
+  data() {
+    return {
+      fatherData: {},
+      form: {
+        currentRegion: '',
+        address: '',
+        tentativeQuantity: 0,
+        deliveryDate: dayjs(new Date()).format("YYYY-MM-DD"),
+        price: 0,
+        performanceBond: 0,
+        latitude: '',
+        longitude: '',
+      },
+      phoneNumber: '00000000000'
+
+    }
+  },
+  methods: {
+
+    // 立即下单
+    ljxd() {
+      var itemStr = encodeURIComponent(JSON.stringify(this.form));
+      uni.navigateTo({
+        url: `/pages_order/tradingPlatform/confirmOrder?params=${itemStr}`,
+      });
+    },
+    // 联系我们
+    contactUs() {
+      uni.makePhoneCall({
+        phoneNumber: this.phoneNumber,
+        success() {
+          console.log('ios拨打成功');
+        },
+        fail() {
+          console.log('ios拨打失败');
+        }
+      })
+    },
+
+    startDateChange(val) {
+      this.$nextTick(() => {
+        this.form.deliveryDate = dayjs(val.value).format("YYYY-MM-DD")
+      });
+    },
+    startDateOpen() {
+      this.$refs.startDateRef.open();
+    },
+
+    //地图上选择地址
+    selectAddr() {
+      Position.getLocation(res => {
+        Position.selectAddress(res.longitude, res.latitude, success => {
+          this.setAddress(success)
+        })
+      })
+      Position.getLocationDetail(res => {
+        console.log(res);
+        this.form.address = res
+      })
+    },
+
+    //提取用户选择的地址信息复制给表单数据
+    setAddress(res) {
+      //经纬度信息
+      this.form.latitude = res.latitude
+      this.form.longitude = res.longitude
+
+      if (!res.address && res.name) { //用户直接选择城市的逻辑
+        return this.form.currentRegion = res.name
+
+      }
+      if (res.address || res.name) {
+        return this.form.currentRegion = res.address + res.name
+      }
+      this.form.currentRegion = '' //用户啥都没选就点击勾选
+    },
+  }
+}
+</script>
+
+<style scoped lang="scss">
+.now-order {
+  background-color: #FFF;
+  height: 100vh;
+
+  .frame {
+    .title {
+      display: flex;
+      font-size: 30rpx;
+      font-weight: 700;
+      padding: 0rpx 0 0rpx 20rpx;
+      margin: 20rpx 0 0 0;
+
+      > span:nth-of-type(1) {
+        margin: 4rpx 0 0 8rpx;
+        background-color: #FFF;
+      }
+
+      > span:nth-of-type(2) {
+        margin: 0 0 0 8rpx;
+        background-color: #FFF;
+      }
+    }
+
+    .basic-info {
+      display: flex;
+      flex-direction: column;
+      gap: 5rpx;
+      background-color: #FFF;
+      //margin-top: 20rpx;
+      padding: 20rpx 20rpx 20rpx 20rpx;
+
+      .delivery-date {
+        display: flex;
+        align-items: center;
+        background-color: #FFF;
+        height: 80rpx;
+        // margin: 10rpx 0 0 0;
+        padding: 10rpx 0 0 20rpx;
+
+        > view:nth-of-type(1) {
+          width: 30%;
+          // font-weight: 700;
+        }
+
+
+        .value {
+          width: 70%;
+          border-radius: 10rpx;
+          overflow: hidden;
+
+          .dateTimeCls {
+            display: flex;
+            align-items: center;
+            justify-content: space-between;
+            width: 100%;
+            height: 80%;
+            //border: 1px solid #b0b2b3;
+            padding: 5rpx;
+            border-radius: 20rpx;
+
+            .date {
+              font-size: 30rpx;
+              display: flex;
+              align-items: center;
+              width: 80%;
+              height: 100%;
+              color: #000;
+
+            }
+
+            .img {
+              display: flex;
+              justify-content: center;
+              align-items: center;
+              //margin-left: 50rpx;
+              width: 20%;
+              //height: 100%;
+            }
+          }
+
+        }
+
+
+      }
+
+      .tentativeQuantity {
+        display: flex;
+        align-items: center;
+        background-color: #FFF;
+        height: 80rpx;
+        // margin: 10rpx 0 0 0;
+        padding: 10rpx 0 0 20rpx;
+
+        .key {
+          width: 30%;
+        }
+
+        .value {
+          width: 70%;
+          border-radius: 10rpx;
+          overflow: hidden;
+        }
+
+      }
+
+
+      .Tip {
+        display: flex;
+        align-items: center;
+        justify-content: center;
+
+        .span {
+          color: #999;
+          font-size: 24rpx;
+        }
+      }
+
+      .btns {
+        width: 100%;
+        display: flex;
+        flex-direction: column;
+        align-items: center;
+        justify-content: center;
+        gap: 20rpx;
+
+        .ljxd {
+          display: flex;
+          align-items: center;
+          justify-content: center;
+          width: 500rpx;
+          height: 70rpx;
+          border-radius: 40rpx;
+          color: #FFF;
+          font-size: 28rpx;
+          margin: 20rpx 10rpx 0 0;
+          background: $uni-color;
+          //margin-top: 20rpx;
+          border-radius: 40rpx;
+        }
+
+        .lxwm {
+          display: flex;
+          align-items: center;
+          justify-content: center;
+          width: 500rpx;
+          height: 70rpx;
+          border-radius: 40rpx;
+          color: #000000;
+          font-size: 28rpx;
+          margin: 20rpx 10rpx 0 0;
+          background: #f1f1f1;
+          //margin-top: 20rpx;
+          border-radius: 40rpx;
+        }
+
+        .tip {
+          display: flex;
+          align-items: center;
+          justify-content: center;
+          font-size: 24rpx;
+          color: #999;
+          //width: 500rpx;
+        }
+      }
+
+      .item {
+        display: flex;
+        align-items: center;
+        background-color: #FFF;
+        height: 80rpx;
+        // margin: 10rpx 0 0 0;
+        padding: 10rpx 0 0 20rpx;
+
+        > view:nth-of-type(1) {
+          width: 30%;
+          // font-weight: 700;
+        }
+
+        > view:nth-of-type(2) {
+          width: 70%;
+          border-radius: 10rpx;
+          overflow: hidden;
+
+
+          input {
+            background-color: #FFF;
+            font-size: 28rpx;
+            padding: 16rpx 8rpx 16rpx 15rpx;
+          }
+        }
+      }
+
+      .performanceBond {
+        display: flex;
+        align-items: center;
+        background-color: #FFF;
+        height: 80rpx;
+        // margin: 10rpx 0 0 0;
+        padding: 10rpx 0 0 20rpx;
+
+        .key {
+          width: 30%;
+          // font-weight: 700;
+        }
+
+        .value {
+          width: 70%;
+          border-radius: 10rpx;
+          overflow: hidden;
+
+
+          input {
+            background-color: #FFF;
+            font-size: 28rpx;
+            padding: 16rpx 8rpx 16rpx 15rpx;
+          }
+        }
+      }
+
+      .currentRegion {
+        display: flex;
+        align-items: center;
+        background-color: #FFF;
+        height: 80rpx;
+        // margin: 10rpx 0 0 0;
+        padding: 10rpx 0 0 20rpx;
+
+        > view:nth-of-type(1) {
+          width: 30%;
+          // font-weight: 700;
+        }
+
+        > view:nth-of-type(2) {
+          width: 70%;
+          padding: 0 20rpx 0 0;
+          display: flex;
+
+          .input {
+            background-color: #f5f5f5;
+            // color: #a4a4a4;
+            font-size: 28rpx;
+            padding: 8rpx 8rpx 8rpx 15rpx;
+            width: 350rpx;
+          }
+
+          .orientation {
+            display: flex;
+            padding: 10rpx 10rpx 10rpx 20rpx;
+            font-size: 30rpx;
+            color: #FBAB32;
+            flex-direction: column;
+            justify-content: center;
+            align-items: center;
+          }
+
+
+        }
+      }
+
+    }
+  }
+}
+</style>