修改联系我们界面

src/assets/css/common.css

@@ -67,10 +67,6 @@ a:focus {
   outline: none;
 }
 
-.wrapper1130 {
-  width: 1130rem;
-  margin: 0 auto;
-}
 .wrapper1400 {
   width: 1400rem;
   margin: 0 auto;

src/views/About/ContactUs/Index.vue

@@ -1,36 +1,108 @@
 <template>
   <div class="part-building">
+    <div style="height:104rem;"></div>
+    <div class="screen1">
+      <img
+        :src="screen1.bannerUrl"
+        alt=""
+        style="width:100%;"
+      />
+    </div>
     <div class="screen2">
-      <div class="wrapper1130">
+      <div class="wrapper1680">
-        <div
+        <div class="lineTtile">
-          v-for="(item, index) in contacts"
+          {{ screen2.title }}
-          :key="index"
+        </div>
-        >
+        <div class="lineTime">
-          <div class="title">
+          {{ screen2.lineTime }}
-            {{ item.title }}
+        </div>
-          </div>
+        <div class="lineNumber">
-          <div>
+          {{ screen2.lineNumber }}
-            <div
+        </div>
-              v-for="link in item.children"
+        <div class="list-wrapper">
-              :key="link.title"
+          <div
-              style="margin-bottom: 20rem;"
+            v-for="(item, index) in contacts"
-            >
+            :key="'itemkey' + index"
-              <p
+            class="list-item"
-                :title="link.title"
+          >
-                style="white-space: nowrap;color: #000000;font-size: 18rem;display: inline-block;"
+            <el-row>
+              <el-col
+                :span="8"
+                class="imgCol"
               >
-                <img
+                <div class="list-img">
-                  :src="link.src"
+                  <img
-                  style="width: 18rem;height: 18rem;"
+                    :src="item.src"
-                >
+                    alt=""
-                <span style="padding-left: 12rem">{{ link.title }}</span>
+                  >
-                <span>{{ link.value }}</span>
+                </div>
-              </p>
+              </el-col>
-            </div>
+              <el-col
+                :span="16"
+                class="listContent"
+              >
+                <div class="list-title">
+                  {{ item.title }}
+                </div>
+                <div class="list-value">
+                  {{ item.value }}
+                </div>
+              </el-col>
+            </el-row>
           </div>
         </div>
       </div>
     </div>
+    <div class="screen3">
+      <div class="wrapper1680">
+        <div class="fkContent">
+          <div class="fkBar"></div>
+          <div class="fkTitle">
+            留言反馈
+          </div>
+          <el-form
+            :model="form"
+            label-width="110rem"
+            style="margin-top: 40rem"
+          >
+            <el-row>
+              <el-col :span="10">
+                <el-form-item label="标题">
+                  <el-input v-model="form.title" />
+                </el-form-item>
+              </el-col>
+              <el-col :span="7">
+                <el-form-item label="反馈人">
+                  <el-input v-model="form.feedbackPerson" />
+                </el-form-item>
+              </el-col>
+              <el-col :span="7">
+                <el-form-item label="联系方式">
+                  <el-input v-model="form.contactWay" />
+                </el-form-item>
+              </el-col>
+            </el-row>
+            <el-form-item label="反馈内容">
+              <el-input
+                v-model="form.feedbackContent"
+                :autosize="{ minRows: 6, maxRows: 6 }"
+                type="textarea"
+              />
+            </el-form-item>
+            <el-form-item label="">
+              <div class="fkRemark">
+                我们敬重每一位反馈人的留言，如您对我们有任何想法、要求或建议，敬请留言，我们会在第一时间受理并向您表示衷心的感谢。
+              </div>
+            </el-form-item>
+            <el-form-item style="text-align: center">
+              <el-button class="subBtn">
+                提交
+              </el-button>
+            </el-form-item>
+          </el-form>
+        </div>
+      </div>
+    </div>
     <FootBar theme="dark"></FootBar>
   </div>
 </template>
@@ -45,26 +117,26 @@ export default {
   },
   data () {
     return {
+      screen1: {
+        bannerUrl: '',
+      },
       screen2: {
-        offsets: [300],
+        title: '服务热线',
-        offsetLevel: -1,
+        lineNumber: '400-001-6725',
-        title: '',
+        lineTime: '服务时间：周一至周五AM 09:00-12:00  PM 01:00-06:00',
-        contentCn: ``,
       },
       contacts: [
-        {
+        { title: '公司网址', value: 'www.Fshg.cc', src: '/static/img/contactUs/website.png' },
-          title: '联系我们',
+        { title: '公司邮箱', value: 'Info@Fshg.cc', src: '/static/img/contactUs/email.png' },
-          children: [
+        { title: '公众号', value: 'FutureStarHolding', src: '/static/img/contactUs/publicAccount.png' },
-            { title: '服务热线：', value: '+86.400-001-6725', src: '/static/img/contactUs/phone.png' },
+        { title: '公司地址', value: '海南省三亚市天涯区育春路七巷九号', src: '/static/img/contactUs/address.png' },
-            { title: '公司网址：', value: 'www.Fshg.cc', src: '/static/img/contactUs/website.png' },
-            { title: '公司邮箱：', value: 'Info@Fshg.cc', src: '/static/img/contactUs/email.png' },
-            { title: '公众号：', value: 'FutureStarHolding', src: '/static/img/contactUs/publicAccount.png' },
-            { title: '服务时间：', value: '周一至周五AM 09:00-12:00  PM 01:00-06:00', src: '/static/img/contactUs/serviceTime.png' },
-            { title: '公司地址：', value: '海南省三亚市天涯区育春路七巷九号', src: '/static/img/contactUs/address.png' },
-            { title: '邮编：', value: '572022', src: '/static/img/contactUs/postcode.png' },
-          ],
-        },
       ],
+      form: {
+        title: '',
+        feedbackPerson: '',
+        contactWay: '',
+        feedbackContent: '',
+      },
     };
   },
   computed: {
@@ -73,30 +145,21 @@ export default {
       webScale: state => state.web.scale,
     }),
   },
-  watch: {
+  created () {
-    scrollTop (val) {
+    this.$event.$emit('nav-theme', 'light');
-      const v = val / this.webScale;
+    this.getScreen1Banner();
-      if (v < 50) {
+  },
-        this.$event.$emit('nav-theme', 'light', {
+  methods: {
-          bgColor: '#ffffff00',
+    async getScreen1Banner () {
-          shadow: false,
+      try {
-        });
+        const res = await this.$request.get(
-      } else {
+          '/official/index/list',
-        this.$event.$emit('nav-theme', 'light');
+          { params: { pageNum: 1, pageSize: 1, captionName: '联系我们/banner' } },
-      }
+        );
-      const i2 = this.screen2.offsetLevel + 1;
+        this.screen1.bannerUrl = res.rows[0].imageurl;
-      if (v >= this.screen2.offsets[i2]) {
+      } catch (error) {}
-        this.screen2.offsetLevel = i2;
-      }
     },
   },
-  created () {
-    this.$event.$emit('nav-theme', 'light', {
-      bgColor: '#ffffff00',
-      shadow: false,
-    });
-  },
-  methods: { },
 };
 </script>
 
@@ -106,28 +169,140 @@ export default {
 }
 
 .screen2 {
-  padding: 200rem 0;
+  padding: 80rem 0;
+  height: 580rem;
   box-sizing: border-box;
   background: #FFFFFF;
 }
-.screen2 .title {
+.screen2 .lineTtile {
-  font-family: MicrosoftYaHei;
+  width: 100%;
+  text-align: center;
+  font-family: MicrosoftYaHeiSemibold;
   font-weight: 400;
-  font-size: 36rem;
+  font-size: 28rem;
-  color: #000000;
+  color: #111111;
-  margin-bottom: 70rem;
+  line-height: 64rem;
-  white-space: pre-line;
-  line-height: 72rem;
 }
-.screen2 .list-wrapper .content-cn {
+.screen2 .lineTime {
-  width: 1160rem;
+  width: 100%;
+  text-align: center;
   font-family: MicrosoftYaHeiLight;
-  font-weight: 300;
+  font-size: 20rem;
+  color: #8B8A8A;
+  line-height: 20rem;
+  margin-bottom: 55rem;
+}
+.screen2 .lineNumber {
+  width: 100%;
+  text-align: center;
+  font-family: Impact;
+  font-size: 44rem;
+  color: #111111;
+  line-height: 44rem;
+  font-style: normal;
+  text-transform: none;
+  letter-spacing:2.8rem;
+}
+.screen2 .wrapper1680 {
+  height: 100%;
+  position: relative;
+}
+.screen2 .list-wrapper {
+  position: absolute;
+  top: 280rem;
+  width: 100%;
+  display: flex;
+  flex-wrap: wrap;
+  padding: 0rem;
+  box-sizing: border-box;
+}
+.screen2 .list-item {
+  width: 375rem;
+  height: 120rem;
+  border: 1rem solid #C7C7C7;
+  background: #ffffff;
+  margin: 0 20rem;
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+}
+.screen2 .imgCol {
+  padding: 30rem 30rem 30rem 60rem;
+}
+.screen2 .list-img {
+  width: 50rem;
+  height: 50rem;
+}
+.screen2 .listContent {
+  padding-right: 50rem;
+}
+.screen2 .list-title {
+  margin-top: 18rem;
+  font-family: MicrosoftYaHeiSemibold;
   font-size: 18rem;
   color: #000000;
-  line-height: 36rem;
+  line-height: 40rem;
-  letter-spacing:2.8rem;
+  text-align: left;
-  text-align: justify;
+  font-style: normal;
-  white-space: pre-wrap;
+  text-transform: none;
+}
+.screen2 .list-value {
+  font-family: MicrosoftYaHei;
+  font-size: 18rem;
+  color: #545454;
+  line-height: 22rem;
+  text-align: left;
+  font-style: normal;
+  text-transform: none;
+}
+.screen3 {
+  padding: 80rem 120rem;
+  background: #F5F5F7;
+}
+.screen3 .wrapper1680 {
+  height: 478rem;
+  background: #FFFFFF;
+  border-radius: 10rem 10rem 10rem 10rem;
+}
+.fkContent {
+  padding: 20rem 30rem;
+}
+.fkBar {
+  display: inline-block;
+  width: 4rem;
+  height: 20rem;
+  background: #014DB5;
+}
+.fkTitle {
+  display: inline-block;
+  padding-left: 10rem;
+  font-family: MicrosoftYaHeiSemibold;
+  font-size: 24rem;
+  color: #014DB5;
+  line-height: 64rem;
+  text-align: justifyLeft;
+  font-style: normal;
+  text-transform: none;
+}
+.fkRemark {
+  font-family: MicrosoftYaHei;
+  font-size: 18rem;
+  color: #BBBBBB;
+  line-height: 18rem;
+  text-align: left;
+  font-style: normal;
+  text-transform: none;
+}
+.subBtn {
+  width: 140rem;
+  height: 50rem;
+  background: #014DB5;
+  border-radius: 4rem;
+  font-family: MicrosoftYaHei;
+  font-size: 18rem;
+  color: #FFFFFF;
+  text-align: center;
+  font-style: normal;
+  text-transform: none;
 }
 </style>

src/views/Business/Commercial/Index.vue

@@ -162,7 +162,6 @@
         </div>
         <transition name="fade-slide-left">
           <div
-            v-show="screen5.offsetLevel >= 1"
             class="text-posi-abs"
             style="--t:333rem;--l:118rem;--fs:30rem;--c:#ffffff;"
           >

src/views/Business/Construction/Index.vue

@@ -162,7 +162,6 @@
         </div>
         <transition name="fade-slide-left">
           <div
-            v-show="screen5.offsetLevel >= 1"
             class="text-posi-abs"
             style="--t:333rem;--l:118rem;--fs:30rem;--c:#ffffff;"
           >

src/views/Business/FutureAgriculture/Index.vue

@@ -162,7 +162,6 @@
         </div>
         <transition name="fade-slide-left">
           <div
-            v-show="screen5.offsetLevel >= 1"
             class="text-posi-abs"
             style="--t:333rem;--l:118rem;--fs:30rem;--c:#ffffff;"
           >

src/views/Business/GlobalSupplyChain/Index.vue

@@ -213,7 +213,6 @@
         </div>
         <transition name="fade-slide-left">
           <div
-            v-show="screen5.offsetLevel >= 1"
             class="text-posi-abs"
             style="--t:333rem;--l:118rem;--fs:30rem;--c:#ffffff;"
           >

src/views/Business/HealthIndustry/Index.vue

@@ -162,7 +162,6 @@
         </div>
         <transition name="fade-slide-left">
           <div
-            v-show="screen5.offsetLevel >= 1"
             class="text-posi-abs"
             style="--t:333rem;--l:118rem;--fs:30rem;--c:#ffffff;"
           >

src/views/CompanyInformation/Index.vue

@@ -94,31 +94,31 @@ export default {
   },
   computed: {
     ...mapState({
-      scrollTop: state => state.scroll.scrollTop,
+      // scrollTop: state => state.scroll.scrollTop,
       webScale: state => state.web.scale,
     }),
   },
   watch: {
-    scrollTop (val) {
+    // scrollTop (val) {
-      const v = val / this.webScale;
+    //   const v = val / this.webScale;
-      if (v < 50) {
+    //   if (v < 50) {
-        this.$event.$emit('nav-theme', 'dark');
+    //     this.$event.$emit('nav-theme', 'dark');
-      } else {
+    //   } else {
-        this.$event.$emit('nav-theme', 'light');
+    //     this.$event.$emit('nav-theme', 'light');
-      }
+    //   }
-      const i2 = this.screen2.offsetLevel + 1;
+    //   const i2 = this.screen2.offsetLevel + 1;
-      if (v >= this.screen2.offsets[i2]) {
+    //   if (v >= this.screen2.offsets[i2]) {
-        this.screen2.offsetLevel = i2;
+    //     this.screen2.offsetLevel = i2;
-      }
+    //   }
-      const i3 = this.screen3.offsetLevel + 1;
+    //   const i3 = this.screen3.offsetLevel + 1;
-      if (v >= this.screen3.offsets[i3]) {
+    //   if (v >= this.screen3.offsets[i3]) {
-        this.screen3.offsetLevel = i3;
+    //     this.screen3.offsetLevel = i3;
-      }
+    //   }
-      const i4 = this.screen4.offsetLevel + 1;
+    //   const i4 = this.screen4.offsetLevel + 1;
-      if (v >= this.screen4.offsets[i4]) {
+    //   if (v >= this.screen4.offsets[i4]) {
-        this.screen4.offsetLevel = i4;
+    //     this.screen4.offsetLevel = i4;
-      }
+    //   }
-    },
+    // },
     $route () {
       if (this.$route.hash) {
         this.forceScroll({

src/views/IndustryDynamics/Index.vue

@@ -94,31 +94,31 @@ export default {
   },
   computed: {
     ...mapState({
-      scrollTop: state => state.scroll.scrollTop,
+      // scrollTop: state => state.scroll.scrollTop,
       webScale: state => state.web.scale,
     }),
   },
   watch: {
-    scrollTop (val) {
+    // scrollTop (val) {
-      const v = val / this.webScale;
+    //   const v = val / this.webScale;
-      if (v < 50) {
+    //   if (v < 50) {
-        this.$event.$emit('nav-theme', 'dark');
+    //     this.$event.$emit('nav-theme', 'dark');
-      } else {
+    //   } else {
-        this.$event.$emit('nav-theme', 'light');
+    //     this.$event.$emit('nav-theme', 'light');
-      }
+    //   }
-      const i2 = this.screen2.offsetLevel + 1;
+    //   const i2 = this.screen2.offsetLevel + 1;
-      if (v >= this.screen2.offsets[i2]) {
+    //   if (v >= this.screen2.offsets[i2]) {
-        this.screen2.offsetLevel = i2;
+    //     this.screen2.offsetLevel = i2;
-      }
+    //   }
-      const i3 = this.screen3.offsetLevel + 1;
+    //   const i3 = this.screen3.offsetLevel + 1;
-      if (v >= this.screen3.offsets[i3]) {
+    //   if (v >= this.screen3.offsets[i3]) {
-        this.screen3.offsetLevel = i3;
+    //     this.screen3.offsetLevel = i3;
-      }
+    //   }
-      const i4 = this.screen4.offsetLevel + 1;
+    //   const i4 = this.screen4.offsetLevel + 1;
-      if (v >= this.screen4.offsets[i4]) {
+    //   if (v >= this.screen4.offsets[i4]) {
-        this.screen4.offsetLevel = i4;
+    //     this.screen4.offsetLevel = i4;
-      }
+    //   }
-    },
+    // },
     $route () {
       if (this.$route.hash) {
         this.forceScroll({

src/views/NewsTrends/Index.vue

@@ -94,31 +94,31 @@ export default {
   },
   computed: {
     ...mapState({
-      scrollTop: state => state.scroll.scrollTop,
+      // scrollTop: state => state.scroll.scrollTop,
       webScale: state => state.web.scale,
     }),
   },
   watch: {
-    scrollTop (val) {
+    // scrollTop (val) {
-      const v = val / this.webScale;
+    //   const v = val / this.webScale;
-      if (v < 50) {
+    //   if (v < 50) {
-        this.$event.$emit('nav-theme', 'dark');
+    //     this.$event.$emit('nav-theme', 'dark');
-      } else {
+    //   } else {
-        this.$event.$emit('nav-theme', 'light');
+    //     this.$event.$emit('nav-theme', 'light');
-      }
+    //   }
-      const i2 = this.screen2.offsetLevel + 1;
+    //   const i2 = this.screen2.offsetLevel + 1;
-      if (v >= this.screen2.offsets[i2]) {
+    //   if (v >= this.screen2.offsets[i2]) {
-        this.screen2.offsetLevel = i2;
+    //     this.screen2.offsetLevel = i2;
-      }
+    //   }
-      const i3 = this.screen3.offsetLevel + 1;
+    //   const i3 = this.screen3.offsetLevel + 1;
-      if (v >= this.screen3.offsets[i3]) {
+    //   if (v >= this.screen3.offsets[i3]) {
-        this.screen3.offsetLevel = i3;
+    //     this.screen3.offsetLevel = i3;
-      }
+    //   }
-      const i4 = this.screen4.offsetLevel + 1;
+    //   const i4 = this.screen4.offsetLevel + 1;
-      if (v >= this.screen4.offsets[i4]) {
+    //   if (v >= this.screen4.offsets[i4]) {
-        this.screen4.offsetLevel = i4;
+    //     this.screen4.offsetLevel = i4;
-      }
+    //   }
-    },
+    // },
     $route () {
       if (this.$route.hash) {
         this.forceScroll({

src/views/PolicyRegulations/Index.vue

@@ -94,31 +94,31 @@ export default {
   },
   computed: {
     ...mapState({
-      scrollTop: state => state.scroll.scrollTop,
+      // scrollTop: state => state.scroll.scrollTop,
       webScale: state => state.web.scale,
     }),
   },
   watch: {
-    scrollTop (val) {
+    // scrollTop (val) {
-      const v = val / this.webScale;
+    //   const v = val / this.webScale;
-      if (v < 50) {
+    //   if (v < 50) {
-        this.$event.$emit('nav-theme', 'dark');
+    //     this.$event.$emit('nav-theme', 'dark');
-      } else {
+    //   } else {
-        this.$event.$emit('nav-theme', 'light');
+    //     this.$event.$emit('nav-theme', 'light');
-      }
+    //   }
-      const i2 = this.screen2.offsetLevel + 1;
+    //   const i2 = this.screen2.offsetLevel + 1;
-      if (v >= this.screen2.offsets[i2]) {
+    //   if (v >= this.screen2.offsets[i2]) {
-        this.screen2.offsetLevel = i2;
+    //     this.screen2.offsetLevel = i2;
-      }
+    //   }
-      const i3 = this.screen3.offsetLevel + 1;
+    //   const i3 = this.screen3.offsetLevel + 1;
-      if (v >= this.screen3.offsets[i3]) {
+    //   if (v >= this.screen3.offsets[i3]) {
-        this.screen3.offsetLevel = i3;
+    //     this.screen3.offsetLevel = i3;
-      }
+    //   }
-      const i4 = this.screen4.offsetLevel + 1;
+    //   const i4 = this.screen4.offsetLevel + 1;
-      if (v >= this.screen4.offsets[i4]) {
+    //   if (v >= this.screen4.offsets[i4]) {
-        this.screen4.offsetLevel = i4;
+    //     this.screen4.offsetLevel = i4;
-      }
+    //   }
-    },
+    // },
     $route () {
       if (this.$route.hash) {
         this.forceScroll({