mo 4 years ago
parent
commit
7386881757
5 changed files with 170 additions and 86 deletions
  1. 19 4
      package-lock.json
  2. 1 0
      package.json
  3. 66 40
      src/components/silder.vue
  4. 74 42
      src/views/consult/index.vue
  5. 10 0
      src/views/project/index.vue

+ 19 - 4
package-lock.json

@@ -1307,6 +1307,14 @@
         "qs": "6.7.0",
         "raw-body": "2.4.0",
         "type-is": "~1.6.17"
+      },
+      "dependencies": {
+        "qs": {
+          "version": "6.7.0",
+          "resolved": "https://registry.npm.taobao.org/qs/download/qs-6.7.0.tgz",
+          "integrity": "sha1-QdwaAV49WB8WIXdr4xr7KHapsbw=",
+          "dev": true
+        }
       }
     },
     "bonjour": {
@@ -3887,6 +3895,14 @@
         "type-is": "~1.6.18",
         "utils-merge": "1.0.1",
         "vary": "~1.1.2"
+      },
+      "dependencies": {
+        "qs": {
+          "version": "6.7.0",
+          "resolved": "https://registry.npm.taobao.org/qs/download/qs-6.7.0.tgz",
+          "integrity": "sha1-QdwaAV49WB8WIXdr4xr7KHapsbw=",
+          "dev": true
+        }
       }
     },
     "ext": {
@@ -9030,10 +9046,9 @@
       "dev": true
     },
     "qs": {
-      "version": "6.7.0",
-      "resolved": "https://registry.npm.taobao.org/qs/download/qs-6.7.0.tgz",
-      "integrity": "sha1-QdwaAV49WB8WIXdr4xr7KHapsbw=",
-      "dev": true
+      "version": "6.9.4",
+      "resolved": "https://registry.npm.taobao.org/qs/download/qs-6.9.4.tgz",
+      "integrity": "sha1-kJCykNH5FyjTwi5UhDykSupatoc="
     },
     "query-string": {
       "version": "4.3.4",

+ 1 - 0
package.json

@@ -12,6 +12,7 @@
   "dependencies": {
     "axios": "^0.20.0",
     "element-ui": "^2.13.2",
+    "qs": "^6.9.4",
     "vue": "^2.5.2",
     "vue-loader-plugin": "^1.3.0",
     "vue-router": "^3.0.1"

+ 66 - 40
src/components/silder.vue

@@ -1,76 +1,101 @@
 <template>
   <div class="silderWrap">
     <div class="silderList">
-      <div class="silderItem" @click="visiable =true">
-        <img src="@/assets/images/silder/silder4.svg" alt />
+      <div class="silderItem"
+           @click="visiable =true">
+        <img src="@/assets/images/silder/silder4.svg"
+             alt />
         <p>申请入驻</p>
         <div class="line"></div>
       </div>
-      <el-popover placement="left" trigger="hover">
+      <el-popover placement="left"
+                  trigger="hover">
         <div>
           <p class="hoverTitle">咨询电话:</p>
           <p class="hoverMsg">4008851569</p>
         </div>
-        <div class="silderItem" slot="reference">
-          <img src="@/assets/images/silder/silder2.svg" alt />
+        <div class="silderItem"
+             slot="reference">
+          <img src="@/assets/images/silder/silder2.svg"
+               alt />
           <p>电话咨询</p>
           <div class="line"></div>
         </div>
       </el-popover>
-      <el-popover placement="left" trigger="hover">
+      <el-popover placement="left"
+                  trigger="hover">
         <div>
           <div class="code-item">
-            <img src="../assets/images/download.png" width="111px" height="111px" alt />
+            <img src="../assets/images/download.png"
+                 width="111px"
+                 height="111px"
+                 alt />
             <p>扫码下载APP</p>
           </div>
         </div>
-        <div class="silderItem" slot="reference">
-          <img src="@/assets/images/silder/silder3.svg" alt />
+        <div class="silderItem"
+             slot="reference">
+          <img src="@/assets/images/silder/silder3.svg"
+               alt />
           <p>APP下载</p>
           <div class="line"></div>
         </div>
       </el-popover>
-      <el-popover placement="left" trigger="hover">
+      <el-popover placement="left"
+                  trigger="hover">
         <div>
           <div class="code-item">
-            <img src="../assets/images/public-code.jpg" width="111px" height="111px" alt />
+            <img src="../assets/images/public-code.jpg"
+                 width="111px"
+                 height="111px"
+                 alt />
             <p>微信订阅号</p>
           </div>
         </div>
-        <div class="silderItem" slot="reference">
-          <img src="@/assets/images/silder/silder1.svg" alt />
+        <div class="silderItem"
+             slot="reference">
+          <img src="@/assets/images/silder/silder1.svg"
+               alt />
           <p>关注微信</p>
           <!-- <div class="line"></div> -->
         </div>
       </el-popover>
     </div>
-    <div class="goTop" v-if="showgo" @click="gotop">
-      <img src="@/assets/images/silder/silder5.svg" alt />
+    <div class="goTop"
+         v-if="showgo"
+         @click="gotop">
+      <img src="@/assets/images/silder/silder5.svg"
+           alt />
     </div>
-    <el-dialog
-      title="申请入驻"
-      :visible.sync="visiable"
-      append-to-body
-      width="500px"
-      :close-on-click-modal="false"
-      destroy-on-close
-    >
-      <el-form ref="form" :model="form" :rules="maskRules">
+    <el-dialog title="申请入驻"
+               :visible.sync="visiable"
+               append-to-body
+               width="500px"
+               :close-on-click-modal="false"
+               destroy-on-close>
+      <el-form ref="form"
+               :model="form"
+               :rules="maskRules">
         <el-form-item prop="name">
-          <el-input v-model="form.name" placeholder="请输入机构名称"></el-input>
+          <el-input v-model="form.name"
+                    placeholder="请输入机构名称"></el-input>
         </el-form-item>
         <el-form-item prop="city">
-          <el-input v-model="form.city" placeholder="请输入所在城市"></el-input>
+          <el-input v-model="form.city"
+                    placeholder="请输入所在城市"></el-input>
         </el-form-item>
         <el-form-item prop="linkman ">
-          <el-input v-model="form.linkman " placeholder="请输入联系人姓名"></el-input>
+          <el-input v-model="form.linkman "
+                    placeholder="请输入联系人姓名"></el-input>
         </el-form-item>
-        <el-form-item prop="phone">
-          <el-input v-model="form.phone" placeholder="请输入手机号"></el-input>
+        <el-form-item prop="mobileNo">
+          <el-input v-model="form.mobileNo"
+                    placeholder="请输入手机号"></el-input>
         </el-form-item>
         <p>我们会在您提交信息后24小时内与您取得联系,请保持电话畅通</p>
         <el-form-item>
-          <div class="submitBtn" @click="submitInfo">提交</div>
+          <div class="submitBtn"
+               @click="submitInfo">提交</div>
         </el-form-item>
       </el-form>
     </el-dialog>
@@ -78,23 +103,24 @@
 </template>
 <script>
 import axios from "axios";
+import qs from 'qs'
 export default {
   props: ["showForm"],
-  data() {
+  data () {
     return {
       showgo: false,
       visiable: false,
       form: {
         name: "",
         city: "",
-        contantName: "",
-        phone: "",
+        linkman: "",
+        mobileNo: "",
       },
       maskRules: {
         name: [{ required: true, message: "请输入机构名称" }],
         city: [{ required: true, message: "请输入所在城市" }],
         linkman: [{ required: true, message: "请输入联系人姓名" }],
-        phone: [
+        mobileNo: [
           { required: true, message: "请输入手机号" },
           {
             pattern: /^1[3456789]\d{9}$/,
@@ -105,7 +131,7 @@ export default {
       },
     };
   },
-  mounted() {
+  mounted () {
     var vm = this;
     window.onscroll = function () {
       if (document.documentElement.scrollTop > 300) {
@@ -116,17 +142,17 @@ export default {
     };
   },
   methods: {
-    gotop() {
+    gotop () {
       scrollTo(0, 0);
     },
-    submitInfo() {
+    submitInfo () {
       this.$refs["form"].validate((res) => {
         if (res) {
           console.log("发送请求");
           axios({
             url: "/api-user/tenantApply/add",
             method: "post",
-            data:this.form,
+            data: qs.stringify(this.form),
             headers: {
               "Content-type": "application/x-www-form-urlencoded",
             },
@@ -143,10 +169,10 @@ export default {
     },
   },
   watch: {
-    showForm(val) {
+    showForm (val) {
       this.visiable = val;
     },
-    visiable(val) {
+    visiable (val) {
       this.$emit("changeStatus", val);
       if (!val) {
         this.$refs["form"].resetFields();

+ 74 - 42
src/views/consult/index.vue

@@ -1,43 +1,58 @@
 <template>
-  <div>
+  <div class="container">
     <div class="topBanner">
       <h2 class="msg">资讯中心</h2>
     </div>
-    <div class="infoList width1200">
-      <div class="infoItem" @click="gotoDetail(1)">
-        <img src="@/assets/images/consult/infoMsg.png" width="100%" alt />
-        <!-- <p class="time"></p> -->
-        <h2>承办单位和定点机构有什么区别</h2>
-        <!-- <p class="info"></p> -->
-      </div>
-      <div class="infoItem" @click="gotoDetail(2)">
-        <img src="@/assets/images/consult/infoMsg.png" width="100%" alt />
-        <!-- <p class="time"></p> -->
-        <h2>乐器演奏不清晰不连贯的原因有哪些</h2>
-        <!-- <p class="info"></p> -->
-      </div>
-      <div class="infoItem" @click="gotoDetail(3)">
-        <img src="@/assets/images/consult/infoMsg.png" width="100%" alt />
-        <!-- <p class="time"></p> -->
-        <h2>十级琴霸的备考建议</h2>
-        <!-- <p class="info"></p> -->
-      </div>
-      <div class="infoItem" @click="gotoDetail(4)">
-        <img src="@/assets/images/consult/infoMsg.png" width="100%" alt />
-        <!-- <p class="time"></p> -->
-        <h2>音乐等艺术等科目纳入“新中考”</h2>
-        <!-- <p class="info"></p> -->
+    <div class="infoWrap">
+      <div class="infoList">
+        <div class="infoItem"
+             @click="gotoDetail(1)">
+          <img src="@/assets/images/consult/infoMsg.png"
+               width="100%"
+               alt />
+          <!-- <p class="time"></p> -->
+          <h2>承办单位和定点机构有什么区别</h2>
+          <!-- <p class="info"></p> -->
+        </div>
+        <div class="infoItem"
+             @click="gotoDetail(2)">
+          <img src="@/assets/images/consult/infoMsg.png"
+               width="100%"
+               alt />
+          <!-- <p class="time"></p> -->
+          <h2>乐器演奏不清晰不连贯的原因有哪些</h2>
+          <!-- <p class="info"></p> -->
+        </div>
+        <div class="infoItem"
+             @click="gotoDetail(3)">
+          <img src="@/assets/images/consult/infoMsg.png"
+               width="100%"
+               alt />
+          <!-- <p class="time"></p> -->
+          <h2>十级琴霸的备考建议</h2>
+          <!-- <p class="info"></p> -->
+        </div>
+        <div class="infoItem"
+             @click="gotoDetail(4)">
+          <img src="@/assets/images/consult/infoMsg.png"
+               width="100%"
+               alt />
+          <!-- <p class="time"></p> -->
+          <h2>音乐等艺术等科目纳入“新中考”</h2>
+          <!-- <p class="info"></p> -->
+        </div>
       </div>
     </div>
+
   </div>
 </template>
 <script>
 export default {
-  data() {
+  data () {
     return {};
   },
   methods: {
-    gotoDetail(num) {
+    gotoDetail (num) {
       let newpage = this.$router.resolve({
         name: `detile${num}`,
       });
@@ -66,22 +81,39 @@ export default {
     text-shadow: 0px 2px 4px rgba(0, 0, 0, 0.32);
   }
 }
-.infoList {
+.infoWrap {
   display: flex;
-  flex-direction: row;
-  justify-content: space-around;
-  margin-top: 56px;
-  text-align: left;
-  .infoItem {
-    width: 250px;
-    margin-bottom: 56px;
-    cursor: pointer;
-    h2 {
-      font-size: 24px;
-      font-family: PingFangSC-Regular, PingFang SC;
-      font-weight: 400;
-      color: #1a1a1a;
-      line-height: 33px;
+  flex-direction: column;
+  align-items: center;
+
+  .infoList {
+    width: 900px;
+    display: flex;
+    flex-direction: row;
+    justify-content: flex-start;
+    margin-top: 56px;
+    text-align: left;
+    flex-wrap: wrap;
+    .infoItem {
+      &:nth-child(3n) {
+        margin-right: 0 !important;
+      }
+      img {
+        width: 250px;
+        height: 160px;
+      }
+      width: 250px;
+      margin-bottom: 56px;
+      cursor: pointer;
+      margin-right: 74px;
+
+      h2 {
+        font-size: 24px;
+        font-family: PingFangSC-Regular, PingFang SC;
+        font-weight: 400;
+        color: #1a1a1a;
+        line-height: 33px;
+      }
     }
   }
 }

+ 10 - 0
src/views/project/index.vue

@@ -0,0 +1,10 @@
+<template>
+  <div>
+
+  </div>
+</template>
+<script>
+export default {
+
+}
+</script>