修改自定义页面

src/views/industrySolutions/index.vue

@@ -19,7 +19,8 @@
           <!-- 右侧内容 -->
           <div class="card-content">
             <h3 class="card-title">{{ i.title }}</h3>
-            <p class="card-subtitle">{{ i.value }}</p>
+            <!--            <p class="card-subtitle">{{ i.value }}</p>-->
+            <div class="card-subtitle1"></div>
             <p class="card-desc">{{ i.info }}</p>
             <div class="card-arrow" @click="$router.push('/test?id=' + i.id)">
               →
@@ -226,34 +227,34 @@ export default {
 
   .card-img{
     position: absolute;
-    opacity: 0.4;
-    width: 100%;
+    //opacity: 0.4;
+    width: 40%;
     height: 100%;
     top: 0;
     left: 0;
     background-repeat: no-repeat;
     background-size: 100% 100%;
-    /* 设置透明蒙版 */
-    -webkit-mask-image: linear-gradient(to right, rgba(0, 0, 0, 1), rgba(0, 0, 0, 0));
-    -webkit-mask-repeat: no-repeat;
-    -webkit-mask-size: 100% 100%;
-
-    mask-image: linear-gradient(to right, rgba(0, 0, 0, 1), rgba(0, 0, 0, 0));
-    mask-repeat: no-repeat;
-    mask-size: 100% 100%;
+    ///* 设置透明蒙版 */
+    //-webkit-mask-image: linear-gradient(to right, rgba(0, 0, 0, 1), rgba(0, 0, 0, 0));
+    //-webkit-mask-repeat: no-repeat;
+    //-webkit-mask-size: 100% 100%;
+    //
+    //mask-image: linear-gradient(to right, rgba(0, 0, 0, 1), rgba(0, 0, 0, 0));
+    //mask-repeat: no-repeat;
+    //mask-size: 100% 100%;
   }
 
 
   .card-title{
 
     position: absolute;
-    left: 20%;
+    left: 45%;
     top: 40px;
     font-size: 24px;
   }
   .card-subtitle{
     position: absolute;
-    left: 20%;
+    left: 45%;
     top: 80px;
     width: 70%;
     font-size: 18px;
@@ -262,15 +263,25 @@ export default {
     overflow: hidden;
     text-overflow: ellipsis;
   }
+
+  .card-subtitle1 {
+    position: absolute;
+    top: 115px;
+    left: 45%;
+    width: 5%;
+    height: 3px;
+    background-color: #2e445c;
+  }
   .card-desc{
     width: 70%;
     position: absolute;
-    left: 20%;
+    left: 45%;
     top: 120px;
     text-align: left;
     font-size: 14px;
     color: #0005;
   }
+  
   .card-arrow{
     position: absolute;
     right: 30px;

src/views/serviceSupport/QA.vue

@@ -0,0 +1,90 @@
+<template>
+  <div>
+    <TitleGroup>
+      <template slot="title">Q&A</template>
+      <template slot="subTitle"> 常见问题</template>
+    </TitleGroup>
+    <div class="content">
+      <el-collapse v-model="activeName" accordion>
+        <el-collapse-item v-for="(i,k) in QAList" :title="i.title" :name="`${k}`">
+          <div style="padding-left: 20px" v-for="(ii,kk) in i.list">{{ kk + 1 }}){{ ii }}</div>
+        </el-collapse-item>
+      </el-collapse>
+    </div>
+  </div>
+</template>
+
+<script>
+import TitleGroup from "@/components/TitleGroup";
+
+export default {
+  name: 'PlatformIntroduction',
+  props: ['data'],
+  components: {
+    TitleGroup
+  },
+  data() {
+    return {
+      activeName: '',
+      QAList: [
+        {
+          title: '读卡距离近',
+          list: [
+            '检查读写器频点设置是否正确。工作模式应选择跳频，跳频频点范围920MHz--925MHz，跳频点间隔1MHz；',
+            '检查标签与天线的极化方向是否匹配。如果天线是垂直极化的，则标签需要竖直放置；',
+            '检查标签表面是否覆盖有其他材料。如果标签表面覆盖有其他材料，并且这个材料使得标签天线的频点偏移，就会直接影响到读写器的读取效果。如果是金属材质，由于射频信号无法穿透金属，读写器将无法读取到标签；',
+            '检查读写器与天线连接的射频线缆。如果射频线缆的接头松动或同轴线断了，使得射频信号变得很弱，则直接影响到读取的距离；',
+            '检查标签的属性。金属标签一般要求安装在金属表面，这样才能充分发挥金属标签的性能。其他标签，尽可能不要靠近金属表面安装；',
+          ]
+        },
+        {
+          title: '读卡距离近',
+          list: [
+            '检查读写器频点设置是否正确。工作模式应选择跳频，跳频频点范围920MHz--925MHz，跳频点间隔1MHz；',
+            '检查标签与天线的极化方向是否匹配。如果天线是垂直极化的，则标签需要竖直放置；',
+            '检查标签表面是否覆盖有其他材料。如果标签表面覆盖有其他材料，并且这个材料使得标签天线的频点偏移，就会直接影响到读写器的读取效果。如果是金属材质，由于射频信号无法穿透金属，读写器将无法读取到标签；',
+            '检查读写器与天线连接的射频线缆。如果射频线缆的接头松动或同轴线断了，使得射频信号变得很弱，则直接影响到读取的距离；',
+            '检查标签的属性。金属标签一般要求安装在金属表面，这样才能充分发挥金属标签的性能。其他标签，尽可能不要靠近金属表面安装；',
+          ]
+        },
+      ],
+      form: {
+        name: '',
+        region: '',
+        date1: '',
+        date2: '',
+        delivery: false,
+        type: [],
+        resource: '',
+        desc: '',
+      }
+    }
+  },
+  mounted() {
+  },
+  methods: {
+    onSubmit() {
+      console.log('submit!');
+    }
+  }
+}
+</script>
+
+<style lang="less" scoped>
+@import "~@/style.less";
+
+.content {
+  display: inline-block;
+  width: 62vw;
+  //height: 20.1vw;
+  border: 1px solid #ccc3;
+  margin-top: 3.7vw;
+  margin-bottom: 5.2vw;
+  vertical-align: top;
+  text-align: left;
+}
+
+/deep/ .el-collapse-item__header {
+  padding-left: 20px;
+}
+</style>

src/views/serviceSupport/index.vue

@@ -16,7 +16,10 @@
         </div>
       </div>
     </div>
-    <preSale v-if='tabsActive===0'/>
+    <div v-if='tabsActive===0'>
+      <QA/>
+      <preSale/>
+    </div>
     <DownloadTheMaterials v-if='tabsActive===1'/>
     <ContactUs class="contactUs"/>
     <Copyright class="copyright"/>
@@ -25,6 +28,7 @@
 
 <script>
 import preSale from './preSale.vue'
+import QA from './QA.vue'
 import DownloadTheMaterials from './downloadTheMaterials.vue'
 import ContactUs from '@/components/contactUs'
 import Copyright from '@/components/copyright'
@@ -36,6 +40,7 @@ export default {
     ContactUs,
     Copyright,
     preSale,
+    QA,
     DownloadTheMaterials
   },
   data() {