first

src/views/index/reporting.vue

@@ -0,0 +1,132 @@
+<template>
+  <div class="wrap">
+    <div class="title">报备事项:</div>
+    <div class="line"></div>
+    <van-radio-group v-model="radio" @change="change">
+      <van-radio name="1" class="item">
+        特殊情况绕路
+        <img
+            slot="icon"
+            slot-scope="props"
+            :src="props.checked ? activeIcon : inactiveIcon"
+        >
+      </van-radio>
+      <van-radio name="2" class="item">
+        事发地变更
+        <img
+            slot="icon"
+            slot-scope="props"
+            :src="props.checked ? activeIcon : inactiveIcon"
+        >
+      </van-radio>
+      <van-radio name="3" class="item">
+        目的地变更
+        <img
+            slot="icon"
+            slot-scope="props"
+            :src="props.checked ? activeIcon : inactiveIcon"
+        >
+      </van-radio>
+      <van-radio name="4" class="item">
+        其他报备
+        <img
+            slot="icon"
+            slot-scope="props"
+            :src="props.checked ? activeIcon : inactiveIcon"
+        >
+      </van-radio>
+    </van-radio-group>
+
+    <!--    <div class="item" @click="isCheck = !isCheck">-->
+<!--      <img :src="isCheck ? require('@/assets/check.png')  :  require('@/assets/uncheck.png')" />-->
+<!--      <span>特殊情况绕路</span>-->
+<!--    </div>-->
+<!--    <div class="item">-->
+<!--      <img :src="isCheck ? require('@/assets/check.png')  :  require('@/assets/uncheck.png')" />-->
+<!--      <span>事发地变更</span>-->
+<!--    </div>-->
+<!--    <div class="item">-->
+<!--      <img :src="isCheck ? require('@/assets/check.png')  :  require('@/assets/uncheck.png')" />-->
+<!--      <span>目的地变更</span>-->
+<!--    </div>-->
+<!--    <div class="item">-->
+<!--      <img :src="isCheck ? require('@/assets/check.png')  :  require('@/assets/uncheck.png')" />-->
+<!--      <span>其他报备</span>-->
+<!--    </div>-->
+    <textarea class="multiple" id="text-input" rows="4" cols="50" placeholder="报备描述"></textarea><br>
+    <common-btn @submitClick="submit" />
+  </div>
+</template>
+
+<script>
+import CommonBtn from "@/components/commonBtn.vue"
+export default {
+  name: "reportingView",
+  data(){
+    return{
+      // isCheck:false,
+      radio: '1',
+      activeIcon: require('@/assets/check.png'),
+      inactiveIcon: require('@/assets/uncheck.png')
+    }
+  },
+  methods:{
+    submit(){
+      console.log("提交1111111111")
+    },
+    change(e){
+      console.log("change,可以拿到选中的是哪个值",e)
+    },
+  },
+  components:{
+    CommonBtn
+  }
+}
+</script>
+
+<style scoped lang="scss">
+@import "@/styles/mixin.scss";
+@import "@/styles/common.scss";
+.wrap {
+  box-sizing: border-box;
+  padding: 13px 24px 0;
+  width: 100%;
+  height: 100%;
+}
+
+.title {
+  @include fontWeightSize(500,14px);
+  color: #323643;
+
+}
+.item{
+  font-size: 14px;
+  margin-bottom: 8px;
+  @include flexCenter;
+}
+.line {
+  @include wh(100%,2px);
+  opacity: 0.16;
+  border-top: 1px solid;
+  margin-bottom: 10px;
+  margin-top: 10px;
+  border-image: linear-gradient(270deg, rgba(217, 217, 217, 0.6), rgba(178, 178, 178, 1), rgba(178, 178, 178, 1), rgba(217, 217, 217, 0.6)) 1 1;
+}
+img{
+  @include widHeiMar(16px,16px,10px);
+}
+
+.multiple {
+  width: 100%;
+  height: 125px;
+  background: #FAFAFA;
+  border-radius: 3px;
+  border: 1px solid #E6E6E6;
+  backdrop-filter: blur(10px);
+  padding: 10px;
+  box-sizing: border-box;
+  margin-top: 20px;
+}
+
+
+</style>