溯源手机demo

src/main/phoneDemo/src/pages/demo1.vue

@@ -1,5 +1,5 @@
 <template>
-  <div>
+  <div style="background-color:#fff;">
     <img src="../assets/naifeng_img_00.png" class="bigImg" alt>
 
     <div class="topTitle">北京全峰营养品有限公司</div>

src/main/vue/package-lock.json

@@ -1757,7 +1757,6 @@
         "anymatch": "2.0.0",
         "async-each": "1.0.1",
         "braces": "2.3.1",
-        "fsevents": "1.2.7",
         "glob-parent": "3.1.0",
         "inherits": "2.0.3",
         "is-binary-path": "1.0.1",
@@ -4029,535 +4028,6 @@
       "resolved": "https://registry.npmjs.org/fs.realpath/-/fs.realpath-1.0.0.tgz",
       "integrity": "sha1-FQStJSMVjKpA20onh8sBQRmU6k8="
     },
-    "fsevents": {
-      "version": "1.2.7",
-      "resolved": "http://registry.npm.taobao.org/fsevents/download/fsevents-1.2.7.tgz",
-      "integrity": "sha1-SFG2ZKN4PlIAOzxm6w7uEHSTOqQ=",
-      "dev": true,
-      "optional": true,
-      "requires": {
-        "nan": "2.12.1",
-        "node-pre-gyp": "0.10.3"
-      },
-      "dependencies": {
-        "abbrev": {
-          "version": "1.1.1",
-          "bundled": true,
-          "dev": true,
-          "optional": true
-        },
-        "ansi-regex": {
-          "version": "2.1.1",
-          "bundled": true,
-          "dev": true
-        },
-        "aproba": {
-          "version": "1.2.0",
-          "bundled": true,
-          "dev": true,
-          "optional": true
-        },
-        "are-we-there-yet": {
-          "version": "1.1.5",
-          "bundled": true,
-          "dev": true,
-          "optional": true,
-          "requires": {
-            "delegates": "1.0.0",
-            "readable-stream": "2.3.6"
-          }
-        },
-        "balanced-match": {
-          "version": "1.0.0",
-          "bundled": true,
-          "dev": true
-        },
-        "brace-expansion": {
-          "version": "1.1.11",
-          "bundled": true,
-          "dev": true,
-          "requires": {
-            "balanced-match": "1.0.0",
-            "concat-map": "0.0.1"
-          }
-        },
-        "chownr": {
-          "version": "1.1.1",
-          "bundled": true,
-          "dev": true,
-          "optional": true
-        },
-        "code-point-at": {
-          "version": "1.1.0",
-          "bundled": true,
-          "dev": true
-        },
-        "concat-map": {
-          "version": "0.0.1",
-          "bundled": true,
-          "dev": true
-        },
-        "console-control-strings": {
-          "version": "1.1.0",
-          "bundled": true,
-          "dev": true
-        },
-        "core-util-is": {
-          "version": "1.0.2",
-          "bundled": true,
-          "dev": true,
-          "optional": true
-        },
-        "debug": {
-          "version": "2.6.9",
-          "bundled": true,
-          "dev": true,
-          "optional": true,
-          "requires": {
-            "ms": "2.0.0"
-          }
-        },
-        "deep-extend": {
-          "version": "0.6.0",
-          "bundled": true,
-          "dev": true,
-          "optional": true
-        },
-        "delegates": {
-          "version": "1.0.0",
-          "bundled": true,
-          "dev": true,
-          "optional": true
-        },
-        "detect-libc": {
-          "version": "1.0.3",
-          "bundled": true,
-          "dev": true,
-          "optional": true
-        },
-        "fs-minipass": {
-          "version": "1.2.5",
-          "bundled": true,
-          "dev": true,
-          "optional": true,
-          "requires": {
-            "minipass": "2.3.5"
-          }
-        },
-        "fs.realpath": {
-          "version": "1.0.0",
-          "bundled": true,
-          "dev": true,
-          "optional": true
-        },
-        "gauge": {
-          "version": "2.7.4",
-          "bundled": true,
-          "dev": true,
-          "optional": true,
-          "requires": {
-            "aproba": "1.2.0",
-            "console-control-strings": "1.1.0",
-            "has-unicode": "2.0.1",
-            "object-assign": "4.1.1",
-            "signal-exit": "3.0.2",
-            "string-width": "1.0.2",
-            "strip-ansi": "3.0.1",
-            "wide-align": "1.1.3"
-          }
-        },
-        "glob": {
-          "version": "7.1.3",
-          "bundled": true,
-          "dev": true,
-          "optional": true,
-          "requires": {
-            "fs.realpath": "1.0.0",
-            "inflight": "1.0.6",
-            "inherits": "2.0.3",
-            "minimatch": "3.0.4",
-            "once": "1.4.0",
-            "path-is-absolute": "1.0.1"
-          }
-        },
-        "has-unicode": {
-          "version": "2.0.1",
-          "bundled": true,
-          "dev": true,
-          "optional": true
-        },
-        "iconv-lite": {
-          "version": "0.4.24",
-          "bundled": true,
-          "dev": true,
-          "optional": true,
-          "requires": {
-            "safer-buffer": "2.1.2"
-          }
-        },
-        "ignore-walk": {
-          "version": "3.0.1",
-          "bundled": true,
-          "dev": true,
-          "optional": true,
-          "requires": {
-            "minimatch": "3.0.4"
-          }
-        },
-        "inflight": {
-          "version": "1.0.6",
-          "bundled": true,
-          "dev": true,
-          "optional": true,
-          "requires": {
-            "once": "1.4.0",
-            "wrappy": "1.0.2"
-          }
-        },
-        "inherits": {
-          "version": "2.0.3",
-          "bundled": true,
-          "dev": true
-        },
-        "ini": {
-          "version": "1.3.5",
-          "bundled": true,
-          "dev": true,
-          "optional": true
-        },
-        "is-fullwidth-code-point": {
-          "version": "1.0.0",
-          "bundled": true,
-          "dev": true,
-          "requires": {
-            "number-is-nan": "1.0.1"
-          }
-        },
-        "isarray": {
-          "version": "1.0.0",
-          "bundled": true,
-          "dev": true,
-          "optional": true
-        },
-        "minimatch": {
-          "version": "3.0.4",
-          "bundled": true,
-          "dev": true,
-          "requires": {
-            "brace-expansion": "1.1.11"
-          }
-        },
-        "minimist": {
-          "version": "0.0.8",
-          "bundled": true,
-          "dev": true
-        },
-        "minipass": {
-          "version": "2.3.5",
-          "bundled": true,
-          "dev": true,
-          "requires": {
-            "safe-buffer": "5.1.2",
-            "yallist": "3.0.3"
-          }
-        },
-        "minizlib": {
-          "version": "1.2.1",
-          "bundled": true,
-          "dev": true,
-          "optional": true,
-          "requires": {
-            "minipass": "2.3.5"
-          }
-        },
-        "mkdirp": {
-          "version": "0.5.1",
-          "bundled": true,
-          "dev": true,
-          "requires": {
-            "minimist": "0.0.8"
-          }
-        },
-        "ms": {
-          "version": "2.0.0",
-          "bundled": true,
-          "dev": true,
-          "optional": true
-        },
-        "needle": {
-          "version": "2.2.4",
-          "bundled": true,
-          "dev": true,
-          "optional": true,
-          "requires": {
-            "debug": "2.6.9",
-            "iconv-lite": "0.4.24",
-            "sax": "1.2.4"
-          }
-        },
-        "node-pre-gyp": {
-          "version": "0.10.3",
-          "bundled": true,
-          "dev": true,
-          "optional": true,
-          "requires": {
-            "detect-libc": "1.0.3",
-            "mkdirp": "0.5.1",
-            "needle": "2.2.4",
-            "nopt": "4.0.1",
-            "npm-packlist": "1.2.0",
-            "npmlog": "4.1.2",
-            "rc": "1.2.8",
-            "rimraf": "2.6.3",
-            "semver": "5.6.0",
-            "tar": "4.4.8"
-          }
-        },
-        "nopt": {
-          "version": "4.0.1",
-          "bundled": true,
-          "dev": true,
-          "optional": true,
-          "requires": {
-            "abbrev": "1.1.1",
-            "osenv": "0.1.5"
-          }
-        },
-        "npm-bundled": {
-          "version": "1.0.5",
-          "bundled": true,
-          "dev": true,
-          "optional": true
-        },
-        "npm-packlist": {
-          "version": "1.2.0",
-          "bundled": true,
-          "dev": true,
-          "optional": true,
-          "requires": {
-            "ignore-walk": "3.0.1",
-            "npm-bundled": "1.0.5"
-          }
-        },
-        "npmlog": {
-          "version": "4.1.2",
-          "bundled": true,
-          "dev": true,
-          "optional": true,
-          "requires": {
-            "are-we-there-yet": "1.1.5",
-            "console-control-strings": "1.1.0",
-            "gauge": "2.7.4",
-            "set-blocking": "2.0.0"
-          }
-        },
-        "number-is-nan": {
-          "version": "1.0.1",
-          "bundled": true,
-          "dev": true
-        },
-        "object-assign": {
-          "version": "4.1.1",
-          "bundled": true,
-          "dev": true,
-          "optional": true
-        },
-        "once": {
-          "version": "1.4.0",
-          "bundled": true,
-          "dev": true,
-          "requires": {
-            "wrappy": "1.0.2"
-          }
-        },
-        "os-homedir": {
-          "version": "1.0.2",
-          "bundled": true,
-          "dev": true,
-          "optional": true
-        },
-        "os-tmpdir": {
-          "version": "1.0.2",
-          "bundled": true,
-          "dev": true,
-          "optional": true
-        },
-        "osenv": {
-          "version": "0.1.5",
-          "bundled": true,
-          "dev": true,
-          "optional": true,
-          "requires": {
-            "os-homedir": "1.0.2",
-            "os-tmpdir": "1.0.2"
-          }
-        },
-        "path-is-absolute": {
-          "version": "1.0.1",
-          "bundled": true,
-          "dev": true,
-          "optional": true
-        },
-        "process-nextick-args": {
-          "version": "2.0.0",
-          "bundled": true,
-          "dev": true,
-          "optional": true
-        },
-        "rc": {
-          "version": "1.2.8",
-          "bundled": true,
-          "dev": true,
-          "optional": true,
-          "requires": {
-            "deep-extend": "0.6.0",
-            "ini": "1.3.5",
-            "minimist": "1.2.0",
-            "strip-json-comments": "2.0.1"
-          },
-          "dependencies": {
-            "minimist": {
-              "version": "1.2.0",
-              "bundled": true,
-              "dev": true,
-              "optional": true
-            }
-          }
-        },
-        "readable-stream": {
-          "version": "2.3.6",
-          "bundled": true,
-          "dev": true,
-          "optional": true,
-          "requires": {
-            "core-util-is": "1.0.2",
-            "inherits": "2.0.3",
-            "isarray": "1.0.0",
-            "process-nextick-args": "2.0.0",
-            "safe-buffer": "5.1.2",
-            "string_decoder": "1.1.1",
-            "util-deprecate": "1.0.2"
-          }
-        },
-        "rimraf": {
-          "version": "2.6.3",
-          "bundled": true,
-          "dev": true,
-          "optional": true,
-          "requires": {
-            "glob": "7.1.3"
-          }
-        },
-        "safe-buffer": {
-          "version": "5.1.2",
-          "bundled": true,
-          "dev": true
-        },
-        "safer-buffer": {
-          "version": "2.1.2",
-          "bundled": true,
-          "dev": true,
-          "optional": true
-        },
-        "sax": {
-          "version": "1.2.4",
-          "bundled": true,
-          "dev": true,
-          "optional": true
-        },
-        "semver": {
-          "version": "5.6.0",
-          "bundled": true,
-          "dev": true,
-          "optional": true
-        },
-        "set-blocking": {
-          "version": "2.0.0",
-          "bundled": true,
-          "dev": true,
-          "optional": true
-        },
-        "signal-exit": {
-          "version": "3.0.2",
-          "bundled": true,
-          "dev": true,
-          "optional": true
-        },
-        "string-width": {
-          "version": "1.0.2",
-          "bundled": true,
-          "dev": true,
-          "requires": {
-            "code-point-at": "1.1.0",
-            "is-fullwidth-code-point": "1.0.0",
-            "strip-ansi": "3.0.1"
-          }
-        },
-        "string_decoder": {
-          "version": "1.1.1",
-          "bundled": true,
-          "dev": true,
-          "optional": true,
-          "requires": {
-            "safe-buffer": "5.1.2"
-          }
-        },
-        "strip-ansi": {
-          "version": "3.0.1",
-          "bundled": true,
-          "dev": true,
-          "requires": {
-            "ansi-regex": "2.1.1"
-          }
-        },
-        "strip-json-comments": {
-          "version": "2.0.1",
-          "bundled": true,
-          "dev": true,
-          "optional": true
-        },
-        "tar": {
-          "version": "4.4.8",
-          "bundled": true,
-          "dev": true,
-          "optional": true,
-          "requires": {
-            "chownr": "1.1.1",
-            "fs-minipass": "1.2.5",
-            "minipass": "2.3.5",
-            "minizlib": "1.2.1",
-            "mkdirp": "0.5.1",
-            "safe-buffer": "5.1.2",
-            "yallist": "3.0.3"
-          }
-        },
-        "util-deprecate": {
-          "version": "1.0.2",
-          "bundled": true,
-          "dev": true,
-          "optional": true
-        },
-        "wide-align": {
-          "version": "1.1.3",
-          "bundled": true,
-          "dev": true,
-          "optional": true,
-          "requires": {
-            "string-width": "1.0.2"
-          }
-        },
-        "wrappy": {
-          "version": "1.0.2",
-          "bundled": true,
-          "dev": true
-        },
-        "yallist": {
-          "version": "3.0.3",
-          "bundled": true,
-          "dev": true
-        }
-      }
-    },
     "fstream": {
       "version": "1.0.11",
       "resolved": "https://registry.npmjs.org/fstream/-/fstream-1.0.11.tgz",

src/main/vue/src/pages/CaseInfo.vue

@@ -1,6 +1,6 @@
 <template>
     <div>
-        <el-form :model="formData" :rules="rules" ref="form" label-width="80px" label-position="right" size="small" style="max-width: 500px;">
+        <el-form :model="formData" :rules="rules" ref="form" label-width="80px" label-position="right" size="small" style="max-width:1100px;">
             <el-form-item prop="typeFlag" label="分类">
                 <template>
                     <el-select v-model="formData.typeFlag" clearable placeholder="请选择" :disabled="'typeFlag'==subColumn">
@@ -9,23 +9,24 @@
                     </el-select>
                 </template>
             </el-form-item>
-            <el-form-item prop="caseName" label="名称">
+            <el-form-item prop="caseName" label="名称" style="max-width:350px">
                 <el-input v-model="formData.caseName" :disabled="'caseName'==subColumn"></el-input>
             </el-form-item>
-            <el-form-item prop="remark" label="介绍">
+            <el-form-item prop="remark" label="介绍" style="max-width:350px">
                 <el-input type="textarea" v-model="formData.remark" :disabled="'remark'==subColumn"></el-input>
             </el-form-item>
             <el-form-item prop="image" label="封面图片">
                 <single-upload v-model="formData.image" :disabled="'image'==subColumn"></single-upload>
             </el-form-item>
             <el-form-item prop="introduceImage" label="介绍图片">
-                <multi-upload v-model="formData.introduceImage" :disabled="'introduceImage'==subColumn"></multi-upload>
+                <!-- <multi-upload v-model="formData.introduceImage" :disabled="'introduceImage'==subColumn"></multi-upload> -->
+                  <rich-text :height='500' v-model="formData.introduceImage"></rich-text>
             </el-form-item>
             <el-form-item prop="homeFlag" label="首页">
                 <el-switch v-model="formData.homeFlag" active-color="#13ce66" inactive-color="#ff4949" :disabled="'homeFlag'==subColumn">
                 </el-switch>
             </el-form-item>
-            <el-form-item prop="rank" label="排序">
+            <el-form-item prop="rank" label="排序"  style="max-width:200px">
                 <el-input type="number" v-model="formData.rank" :disabled="'rank'==subColumn"></el-input>
             </el-form-item>
             <el-form-item>
@@ -38,6 +39,7 @@
 </template>
 <script>
 import formValidator from '../formValidator'
+import RichText from '../components/RichText'
 
 export default {
     created() {
@@ -141,6 +143,9 @@ export default {
                 }
             })
         },
+    },
+    components:{
+        RichText
     }
 }
 </script>

src/main/vue/src/pages/CaseInfos.vue

@@ -1,523 +1,436 @@
 <template>
-    <div>
-        <div class="filters-container">
-        
-            <el-input placeholder="关键字" size="small" v-model="filter1" clearable class="filter-item"></el-input>
-            <el-button @click="searchData" type="primary" size="small" icon="el-icon-search" class="filter-item">搜索
-            </el-button>
-            <el-button @click="showAdvancedQueryDialog = !showAdvancedQueryDialog" type="primary" size="small"
-                       icon="el-icon-search" class="filter-item">高级查询
-            </el-button>
-            <el-button @click="showTableSortDialog = !showTableSortDialog" type="primary" size="small"
-                       icon="el-icon-sort" class="filter-item">排序
-            </el-button>
-            <el-button @click="$router.push({path:'/caseInfo',query:{column:$route.query.column}})" type="primary"
-                       size="small" icon="el-icon-edit"
-                       class="filter-item">添加
-            </el-button>
-            <el-button @click="exportExcel" type="primary" size="small" icon="el-icon-share" class="filter-item">导出EXCEL
-            </el-button>
-            <el-dropdown trigger="click" size="medium" class="table-column-filter">
-                <span>
-                  筛选数据<i class="el-icon-arrow-down el-icon--right"></i>
-                </span>
-                <el-dropdown-menu slot="dropdown" class="table-column-filter-wrapper">
-                    <el-checkbox v-for="item in tableColumns" :key="item.value" v-model="item.show">{{item.label}}
-                    </el-checkbox>
-                </el-dropdown-menu>
-            </el-dropdown>
-        </div>
-        <el-table
-                :data="tableData"
-                :height="tableHeight"
-                row-key="id"
-                ref="table">
-            <el-table-column
-                    v-if="multipleMode"
-                    align="center"
-                    type="selection"
-                    width="50">
-            </el-table-column>
-            <el-table-column
-                    type="index"
-                    min-width="50"
-                    align="center">
-            </el-table-column>
-                            
-                                            <el-table-column
-                                v-if="isColumnShow('id')"
-                                prop="id"
-                                label=""
-                                min-width="100">
-                        </el-table-column>
-                                                                                                                                                                                                            
-                                            <el-table-column
-                                v-if="isColumnShow('typeFlag')"
-                                prop="typeFlag"
-                                label="分类"
-                                min-width="100">
-                        </el-table-column>
-                                                                
-                                            <el-table-column
-                                v-if="isColumnShow('caseName')"
-                                prop="caseName"
-                                label="名称"
-                                min-width="100">
-                        </el-table-column>
-                                                                
-                                            <el-table-column
-                                v-if="isColumnShow('remark')"
-                                prop="remark"
-                                label="介绍"
-                                min-width="100">
-                        </el-table-column>
-                                                                
-                                            <el-table-column
-                                v-if="isColumnShow('image')"
-                                prop="image"
-                                label="封面图片"
-                                min-width="100">
-                            <template slot-scope="{row}">
-                                <img :src="row.image" @click="showImg(row.image)" style="width: 100px;height: 100px;vertical-align: middle;" />
-                            </template>
+  <div>
+    <div class="filters-container">
+      <el-input placeholder="关键字" size="small" v-model="filter1" clearable class="filter-item"></el-input>
+      <el-button @click="searchData" type="primary" size="small" icon="el-icon-search" class="filter-item">搜索</el-button>
+      <el-button @click="showAdvancedQueryDialog = !showAdvancedQueryDialog" type="primary" size="small" icon="el-icon-search" class="filter-item">高级查询</el-button>
+      <el-button @click="showTableSortDialog = !showTableSortDialog" type="primary" size="small" icon="el-icon-sort" class="filter-item">排序</el-button>
+      <el-button @click="$router.push({path:'/caseInfo',query:{column:$route.query.column}})" type="primary" size="small" icon="el-icon-edit" class="filter-item">添加</el-button>
+      <el-button @click="exportExcel" type="primary" size="small" icon="el-icon-share" class="filter-item">导出EXCEL</el-button>
+      <el-dropdown trigger="click" size="medium" class="table-column-filter">
+        <span>
+          筛选数据
+          <i class="el-icon-arrow-down el-icon--right"></i>
+        </span>
+        <el-dropdown-menu slot="dropdown" class="table-column-filter-wrapper">
+          <el-checkbox v-for="item in tableColumns" :key="item.value" v-model="item.show">{{item.label}}</el-checkbox>
+        </el-dropdown-menu>
+      </el-dropdown>
+    </div>
+    <el-table :data="tableData" :height="tableHeight" row-key="id" ref="table">
+      <el-table-column v-if="multipleMode" align="center" type="selection" width="50"></el-table-column>
+      <el-table-column type="index" min-width="50" align="center"></el-table-column>
+
+      <el-table-column v-if="isColumnShow('id')" prop="id" label min-width="100"></el-table-column>
+
+      <el-table-column v-if="isColumnShow('typeFlag')" prop="typeFlag" label="分类" min-width="100"></el-table-column>
+
+      <el-table-column v-if="isColumnShow('caseName')" prop="caseName" label="名称" min-width="100"></el-table-column>
+
+      <el-table-column v-if="isColumnShow('remark')" prop="remark" label="介绍" min-width="100"></el-table-column>
 
-                        </el-table-column>
-                                                                    
-                                            <el-table-column
+      <el-table-column v-if="isColumnShow('image')" prop="image" label="封面图片" min-width="100">
+        <template slot-scope="{row}">
+          <img :src="row.image" @click="showImg(row.image)" style="width: 100px;height: 100px;vertical-align: middle;">
+        </template>
+      </el-table-column>
+
+      <!-- <el-table-column
                                 v-if="isColumnShow('introduceImage')"
                                 prop="introduceImage"
                                 label="介绍图片"
                                 min-width="100">
-                        </el-table-column>
-                                                                
-                                            <el-table-column
-                                v-if="isColumnShow('homeFlag')"
-                                prop="homeFlag"
-                                label="首页"
-                                min-width="100">
-                        </el-table-column>
-                                                                
-                                            <el-table-column
-                                v-if="isColumnShow('rank')"
-                                prop="rank"
-                                label="排序"
-                                min-width="100">
-                        </el-table-column>
-                                                            <el-table-column
-                    label="操作"
-                    align="center"
-                    fixed="right"
-                    min-width="150"
-            >
-                <template slot-scope="scope">
-                            <el-button @click="editRow(scope.row)" type="primary" size="mini" plain>编辑</el-button>
-                    <el-button @click="deleteRow(scope.row)" type="danger" size="mini" plain>删除</el-button>
-                </template>
-            </el-table-column>
-        </el-table>
-        <div class="pagination-wrapper">
-            <div class="multiple-mode-wrapper" v-if="0">
-                <el-button size="small" v-if="!multipleMode" @click="toggleMultipleMode(true)">批量编辑</el-button>
-                <el-button-group v-else>
-                    <el-button size="small" @click="operation1">批量操作1</el-button>
-                    <el-button size="small" @click="operation2">批量操作2</el-button>
-                    <el-button size="small" @click="toggleMultipleMode(false)">取消</el-button>
-                </el-button-group>
-            </div>
-            <el-pagination
-                    background
-                    @size-change="pageSizeChange"
-                    @current-change="currentPageChange"
-                    :current-page="currentPage"
-                    :page-sizes="[10, 20, 30, 40, 50]"
-                    :page-size="pageSize"
-                    layout="total, sizes, prev, pager, next, jumper"
-                    :total="totalNumber">
-            </el-pagination>
-        </div>
-        <el-dialog title="高级查询" :visible.sync="showAdvancedQueryDialog">
-            <el-button @click="addField" type="text" icon="el-icon-plus">添加</el-button>
-            <el-table :data="advancedQueryFields">
-
-                <el-table-column prop="link" label="链接符" align="center">
-                    <template slot-scope="{row}">
-                        <el-select placeholder="链接" size="small" v-model="row.link" class="filter-item">
-                            <el-option label="AND" value="AND">
-                            </el-option>
-                            <el-option label="OR" value="OR">
-                            </el-option>
-                        </el-select>
-                    </template>
-                </el-table-column>
-                <el-table-column prop="name" label="字段" align="center">
-                    <template slot-scope="{row}">
-                        <el-select v-model="row.name">
-
-                            <el-option v-for="item in advancedQueryColumns" :label="item.label" :value="item.value"
-                                       :key="item.value"></el-option>
-                        </el-select>
-                    </template>
-                </el-table-column>
-                <el-table-column prop="searchMethod" label="搜索方式" width="150" align="center">
-                    <template slot-scope="{row}">
-                        <el-select v-model="row.searchMethod">
-                            <el-option v-for="item in searchMethods" :label="item" :value="item"
-                                       :key="item"></el-option>
-                        </el-select>
-                    </template>
-                </el-table-column>
-                <el-table-column prop="value" label="参数" align="center">
-                    <template slot-scope="{row}">
-                        <el-input v-model="row.value"></el-input>
-                    </template>
-                </el-table-column>
-                <el-table-column width="60" align="center">
-                    <template slot-scope="{ row, column, $index }">
-                        <el-button @click="removeField($index)" size="small" type="text">删除</el-button>
-                    </template>
-                </el-table-column>
-            </el-table>
-
-            <span slot="footer" class="dialog-footer">
-
-                <el-button @click="advancedQuery" :loading="$store.state.fetchingData">确定</el-button>
-            </span>
-        </el-dialog>
-
-        <el-dialog title="排序" :visible.sync="showTableSortDialog">
-            <el-button @click="addSortField" type="text" icon="el-icon-plus">添加</el-button>
-            <el-table :data="tableSortFields">
-
-                <el-table-column prop="name" label="字段" align="center">
-                    <template slot-scope="{row}">
-                        <el-select v-model="row.name">
-
-                            <el-option v-for="item in advancedQueryColumns" :label="item.label" :value="item.value"
-                                       :key="item.value"></el-option>
-                        </el-select>
-                    </template>
-                </el-table-column>
-                <el-table-column prop="order" label="排序" align="center">
-                    <template slot-scope="{row}">
-                        <el-select v-model="row.order">
-                            <el-option label="降序" value="desc">
-                            </el-option>
-                            <el-option label="升序" value="asc">
-                            </el-option>
-                        </el-select>
-                    </template>
-                </el-table-column>
-                <el-table-column width="60" align="center">
-                    <template slot-scope="{ row, column, $index }">
-                        <el-button @click="removeSortField($index)" size="small" type="text">删除</el-button>
-                    </template>
-                </el-table-column>
-            </el-table>
-
-            <span slot="footer" class="dialog-footer">
-
-                <el-button @click="tableSortQuery" :loading="$store.state.fetchingData">确定</el-button>
-            </span>
-        </el-dialog>
-
-        <el-dialog title="查看图片" :visible.sync="imageDialogVisible" size="small">
-            <img width="100%" :src="imgSrc" alt="">
-        </el-dialog>
-
+      </el-table-column>-->
+
+      <el-table-column v-if="isColumnShow('homeFlag')" prop="homeFlag" label="首页" min-width="100"></el-table-column>
+
+      <el-table-column v-if="isColumnShow('rank')" prop="rank" label="排序" min-width="100"></el-table-column>
+      <el-table-column label="操作" align="center" fixed="right" min-width="150">
+        <template slot-scope="scope">
+          <el-button @click="editRow(scope.row)" type="primary" size="mini" plain>编辑</el-button>
+          <el-button @click="deleteRow(scope.row)" type="danger" size="mini" plain>删除</el-button>
+        </template>
+      </el-table-column>
+    </el-table>
+    <div class="pagination-wrapper">
+      <div class="multiple-mode-wrapper" v-if="0">
+        <el-button size="small" v-if="!multipleMode" @click="toggleMultipleMode(true)">批量编辑</el-button>
+        <el-button-group v-else>
+          <el-button size="small" @click="operation1">批量操作1</el-button>
+          <el-button size="small" @click="operation2">批量操作2</el-button>
+          <el-button size="small" @click="toggleMultipleMode(false)">取消</el-button>
+        </el-button-group>
+      </div>
+      <el-pagination background @size-change="pageSizeChange" @current-change="currentPageChange" :current-page="currentPage" :page-sizes="[10, 20, 30, 40, 50]" :page-size="pageSize" layout="total, sizes, prev, pager, next, jumper" :total="totalNumber"></el-pagination>
     </div>
+    <el-dialog title="高级查询" :visible.sync="showAdvancedQueryDialog">
+      <el-button @click="addField" type="text" icon="el-icon-plus">添加</el-button>
+      <el-table :data="advancedQueryFields">
+        <el-table-column prop="link" label="链接符" align="center">
+          <template slot-scope="{row}">
+            <el-select placeholder="链接" size="small" v-model="row.link" class="filter-item">
+              <el-option label="AND" value="AND"></el-option>
+              <el-option label="OR" value="OR"></el-option>
+            </el-select>
+          </template>
+        </el-table-column>
+        <el-table-column prop="name" label="字段" align="center">
+          <template slot-scope="{row}">
+            <el-select v-model="row.name">
+              <el-option v-for="item in advancedQueryColumns" :label="item.label" :value="item.value" :key="item.value"></el-option>
+            </el-select>
+          </template>
+        </el-table-column>
+        <el-table-column prop="searchMethod" label="搜索方式" width="150" align="center">
+          <template slot-scope="{row}">
+            <el-select v-model="row.searchMethod">
+              <el-option v-for="item in searchMethods" :label="item" :value="item" :key="item"></el-option>
+            </el-select>
+          </template>
+        </el-table-column>
+        <el-table-column prop="value" label="参数" align="center">
+          <template slot-scope="{row}">
+            <el-input v-model="row.value"></el-input>
+          </template>
+        </el-table-column>
+        <el-table-column width="60" align="center">
+          <template slot-scope="{ row, column, $index }">
+            <el-button @click="removeField($index)" size="small" type="text">删除</el-button>
+          </template>
+        </el-table-column>
+      </el-table>
+
+      <span slot="footer" class="dialog-footer">
+        <el-button @click="advancedQuery" :loading="$store.state.fetchingData">确定</el-button>
+      </span>
+    </el-dialog>
+
+    <el-dialog title="排序" :visible.sync="showTableSortDialog">
+      <el-button @click="addSortField" type="text" icon="el-icon-plus">添加</el-button>
+      <el-table :data="tableSortFields">
+        <el-table-column prop="name" label="字段" align="center">
+          <template slot-scope="{row}">
+            <el-select v-model="row.name">
+              <el-option v-for="item in advancedQueryColumns" :label="item.label" :value="item.value" :key="item.value"></el-option>
+            </el-select>
+          </template>
+        </el-table-column>
+        <el-table-column prop="order" label="排序" align="center">
+          <template slot-scope="{row}">
+            <el-select v-model="row.order">
+              <el-option label="降序" value="desc"></el-option>
+              <el-option label="升序" value="asc"></el-option>
+            </el-select>
+          </template>
+        </el-table-column>
+        <el-table-column width="60" align="center">
+          <template slot-scope="{ row, column, $index }">
+            <el-button @click="removeSortField($index)" size="small" type="text">删除</el-button>
+          </template>
+        </el-table-column>
+      </el-table>
+
+      <span slot="footer" class="dialog-footer">
+        <el-button @click="tableSortQuery" :loading="$store.state.fetchingData">确定</el-button>
+      </span>
+    </el-dialog>
+
+    <el-dialog title="查看图片" :visible.sync="imageDialogVisible" size="small">
+      <img width="100%" :src="imgSrc" alt>
+    </el-dialog>
+  </div>
 </template>
 <script>
-    import {mapState} from 'vuex'
-    import {format} from 'date-fns'
-    import zh from 'date-fns/locale/zh_cn'
-
-    export default {
-        created() {
-            this.getData();
+import { mapState } from 'vuex'
+import { format } from 'date-fns'
+import zh from 'date-fns/locale/zh_cn'
+
+export default {
+  created() {
+    this.getData();
+  },
+  data() {
+    return {
+      totalNumber: 0,
+      totalPage: 10,
+      currentPage: 1,
+      pageSize: 20,
+      tableData: [],
+      filter1: '',
+      filter2: '',
+      tableColumns: [
+        {
+          label: '',
+          value: 'id',
+          show: true
         },
-        data() {
-            return {
-                totalNumber: 0,
-                totalPage: 10,
-                currentPage: 1,
-                pageSize: 20,
-                tableData: [],
-                filter1: '',
-                filter2: '',
-                tableColumns: [
-                                                                        {
-                                label: '',
-                                value: 'id',
-                                show: true
-                            },
-                                                                                                                                                                                                                                                                                                                            {
-                                label: '分类',
-                                value: 'typeFlag',
-                                show: true
-                            },
-                                                                                                {
-                                label: '名称',
-                                value: 'caseName',
-                                show: true
-                            },
-                                                                                                {
-                                label: '介绍',
-                                value: 'remark',
-                                show: true
-                            },
-                                                                                                {
-                                label: '封面图片',
-                                value: 'image',
-                                show: true
-                            },
-                                                                                                {
-                                label: '介绍图片',
-                                value: 'introduceImage',
-                                show: true
-                            },
-                                                                                                {
-                                label: '首页',
-                                value: 'homeFlag',
-                                show: true
-                            },
-                                                                                                {
-                                label: '排序',
-                                value: 'rank',
-                                show: true
-                            },
-                                                            ],
-                multipleMode: false,
-                showAdvancedQueryDialog: false,
-                advancedQueryFields: [],
-                showTableSortDialog: false,
-                tableSortFields: [],
-                searchMethods: ['=', '!=', '>', '>=', '<', '<=', 'like'],
-                advancedQueryColumns: [
-                                                                        {
-                                label: '',
-                                value: 'id'
-                            },
-                                                                                                                                                                                                                                                                                                                            {
-                                label: '分类',
-                                value: 'type_flag'
-                            },
-                                                                                                {
-                                label: '名称',
-                                value: 'case_name'
-                            },
-                                                                                                {
-                                label: '介绍',
-                                value: 'remark'
-                            },
-                                                                                                {
-                                label: '封面图片',
-                                value: 'image'
-                            },
-                                                                                                {
-                                label: '介绍图片',
-                                value: 'introduce_image'
-                            },
-                                                                                                {
-                                label: '首页',
-                                value: 'home_flag'
-                            },
-                                                                                                {
-                                label: '排序',
-                                value: 'rank'
-                            },
-                                                            ],
-                advancedQuerySearchKey: '',
-                orderByStr: '',
-                imgSrc: '',
-                imageDialogVisible: false,
-            }
+        {
+          label: '分类',
+          value: 'typeFlag',
+          show: true
         },
-        computed: {
-            ...mapState(['tableHeight']),
-            selection() {
-                return this.$refs.table.selection.map(i => i.id);
-            }
+        {
+          label: '名称',
+          value: 'caseName',
+          show: true
         },
-        methods: {
-            pageSizeChange(size) {
-                this.currentPage = 1;
-                this.pageSize = size;
-                this.getData();
-            },
-            currentPageChange(page) {
-                this.currentPage = page;
-                this.getData();
-            },
-            getData() {
-
-                var data = {
-                    currentPage: this.currentPage,
-                    pageNumber: this.pageSize,
-                    searchKey: this.filter1,
-                    advancedQuery: this.advancedQuerySearchKey,
-                    orderByStr: this.orderByStr,
-                }
-
-                if (this.$route.query.column) {
-                    var tempColumn = this.$route.query.column;
-                    data[tempColumn.split(',')[1]] = tempColumn.split(',')[0];
-                }
-
-                this.$http.get({
-                    url: '/caseInfo/page',
-                    data: data
-                }).then(res => {
-                    if (res.success) {
-                        this.totalNumber = res.data.page.totalNumber;
-                        this.tableData = res.data.pp;
-                    }
-                })
-            },
-            isColumnShow(column) {
-                var row = this.tableColumns.find(i => i.value === column);
-                return row ? row.show : false;
-            },
-            toggleMultipleMode(multipleMode) {
-                this.multipleMode = multipleMode;
-                if (!multipleMode) {
-                    this.$refs.table.clearSelection();
-                }
-            },
-            editRow(row) {
-                this.$router.push({
-                    path: '/caseInfo',
-                    query: {
-                        id: row.id,
-                        column: this.$route.query.column,
-                    }
-                })
-            },
-            operation1() {
-                this.$notify({
-                    title: '提示',
-                    message: this.selection
-                });
-            },
-            operation2() {
-                this.$message('操作2');
-            },
-            addField() {
-                this.advancedQueryFields.push({
-                    link: 'AND',
-                    name: '',
-                    searchMethod: '=',
-                    value: '',
-                });
-            },
-            removeField(i) {
-                if (this.advancedQueryFields.length > 0) {
-                    this.advancedQueryFields.splice(i, 1);
-                }
-            },
-            advancedQuery() {
-
-                this.advancedQuerySearchKey = '';
-
-                if (this.advancedQueryFields.length > 0) {
-
-                    var templist = [];
-
-                    this.advancedQueryFields.forEach(item => {
-                        if (item.link && item.name && item.searchMethod && item.value) {
-                            var tempItem = item.link + '_,' + item.name + '_,' + item.searchMethod + '_,' + item.value;
-                            templist.push(tempItem);
-                        }
-                    })
-
-                    if (templist.length > 0) {
-
-                        this.advancedQuerySearchKey = templist.join('_;');
-                    }
-                }
-
-                this.getData();
-                this.showAdvancedQueryDialog = false;
-            },
-            addSortField() {
-                this.tableSortFields.push({
-                    name: '',
-                    order: 'asc',
-                });
-            },
-            removeSortField(i) {
-                if (this.tableSortFields.length > 0) {
-                    this.tableSortFields.splice(i, 1);
-                }
-            },
-            tableSortQuery() {
-
-                this.orderByStr = '';
-
-                if (this.tableSortFields.length > 0) {
-
-                    var templist = [];
-
-                    this.tableSortFields.forEach(item => {
-                        if (item.name && item.order) {
-                            var tempItem = item.name + '_,' + item.order;
-                            templist.push(tempItem);
-                        }
-                    })
-
-                    if (templist.length > 0) {
-
-                        this.orderByStr = templist.join('_;');
-                    }
-                }
-
-                this.getData();
-                this.showTableSortDialog = false;
-            },
-            exportExcel() {
-                window.location.href = this.$baseUrl + "/caseInfo/exportExcel?searchKey="
-                        + this.filter1 + "&advancedQuery=" + this.advancedQuerySearchKey+"&orderByStr=" + this.orderByStr;
-            },
-            searchData() {
-                this.currentPage = 1;
-                this.getData();
-            },
-            deleteRow(row) {
-                this.$alert('删除将无法恢复，确认要删除么？', '警告', {type: 'error'}).then(() => {
-                    return this.$http.post({
-                        url: '/caseInfo/del',
-                        data: {id: row.id}
-                    })
-                }).then(() => {
-                    this.$message.success('删除成功');
-                    this.getData();
-                }).catch(action => {
-                    if (action === 'cancel') {
-                        this.$message.info('删除取消');
-                    } else {
-                        this.$message.error('删除失败');
-                    }
-                })
-            },
-            DateTimeFormatter(row, column, cellValue) {
-                if (cellValue) {
-                    return format(cellValue, 'YYYY/MM/DD HH:mm', {locale: zh})
-                }
-
-            },
-            DateFormatter(row, column, cellValue) {
-                if (cellValue) {
-                    return format(cellValue, 'YYYY/MM/DD', {locale: zh})
-                }
-
-            },
-            showImg(img) {
-                this.imgSrc = img;
-                this.imageDialogVisible = true;
-            },
-
-        }
+        {
+          label: '介绍',
+          value: 'remark',
+          show: true
+        },
+        {
+          label: '封面图片',
+          value: 'image',
+          show: true
+        },
+        {
+          label: '介绍图片',
+          value: 'introduceImage',
+          show: true
+        },
+        {
+          label: '首页',
+          value: 'homeFlag',
+          show: true
+        },
+        {
+          label: '排序',
+          value: 'rank',
+          show: true
+        },
+      ],
+      multipleMode: false,
+      showAdvancedQueryDialog: false,
+      advancedQueryFields: [],
+      showTableSortDialog: false,
+      tableSortFields: [],
+      searchMethods: ['=', '!=', '>', '>=', '<', '<=', 'like'],
+      advancedQueryColumns: [
+        {
+          label: '',
+          value: 'id'
+        },
+        {
+          label: '分类',
+          value: 'type_flag'
+        },
+        {
+          label: '名称',
+          value: 'case_name'
+        },
+        {
+          label: '介绍',
+          value: 'remark'
+        },
+        {
+          label: '封面图片',
+          value: 'image'
+        },
+        {
+          label: '介绍图片',
+          value: 'introduce_image'
+        },
+        {
+          label: '首页',
+          value: 'home_flag'
+        },
+        {
+          label: '排序',
+          value: 'rank'
+        },
+      ],
+      advancedQuerySearchKey: '',
+      orderByStr: '',
+      imgSrc: '',
+      imageDialogVisible: false,
+    }
+  },
+  computed: {
+    ...mapState(['tableHeight']),
+    selection() {
+      return this.$refs.table.selection.map(i => i.id);
     }
+  },
+  methods: {
+    pageSizeChange(size) {
+      this.currentPage = 1;
+      this.pageSize = size;
+      this.getData();
+    },
+    currentPageChange(page) {
+      this.currentPage = page;
+      this.getData();
+    },
+    getData() {
+
+      var data = {
+        currentPage: this.currentPage,
+        pageNumber: this.pageSize,
+        searchKey: this.filter1,
+        advancedQuery: this.advancedQuerySearchKey,
+        orderByStr: this.orderByStr,
+      }
+
+      if (this.$route.query.column) {
+        var tempColumn = this.$route.query.column;
+        data[tempColumn.split(',')[1]] = tempColumn.split(',')[0];
+      }
+
+      this.$http.get({
+        url: '/caseInfo/page',
+        data: data
+      }).then(res => {
+        if (res.success) {
+          this.totalNumber = res.data.page.totalNumber;
+          this.tableData = res.data.pp;
+        }
+      })
+    },
+    isColumnShow(column) {
+      var row = this.tableColumns.find(i => i.value === column);
+      return row ? row.show : false;
+    },
+    toggleMultipleMode(multipleMode) {
+      this.multipleMode = multipleMode;
+      if (!multipleMode) {
+        this.$refs.table.clearSelection();
+      }
+    },
+    editRow(row) {
+      this.$router.push({
+        path: '/caseInfo',
+        query: {
+          id: row.id,
+          column: this.$route.query.column,
+        }
+      })
+    },
+    operation1() {
+      this.$notify({
+        title: '提示',
+        message: this.selection
+      });
+    },
+    operation2() {
+      this.$message('操作2');
+    },
+    addField() {
+      this.advancedQueryFields.push({
+        link: 'AND',
+        name: '',
+        searchMethod: '=',
+        value: '',
+      });
+    },
+    removeField(i) {
+      if (this.advancedQueryFields.length > 0) {
+        this.advancedQueryFields.splice(i, 1);
+      }
+    },
+    advancedQuery() {
+
+      this.advancedQuerySearchKey = '';
+
+      if (this.advancedQueryFields.length > 0) {
+
+        var templist = [];
+
+        this.advancedQueryFields.forEach(item => {
+          if (item.link && item.name && item.searchMethod && item.value) {
+            var tempItem = item.link + '_,' + item.name + '_,' + item.searchMethod + '_,' + item.value;
+            templist.push(tempItem);
+          }
+        })
+
+        if (templist.length > 0) {
+
+          this.advancedQuerySearchKey = templist.join('_;');
+        }
+      }
+
+      this.getData();
+      this.showAdvancedQueryDialog = false;
+    },
+    addSortField() {
+      this.tableSortFields.push({
+        name: '',
+        order: 'asc',
+      });
+    },
+    removeSortField(i) {
+      if (this.tableSortFields.length > 0) {
+        this.tableSortFields.splice(i, 1);
+      }
+    },
+    tableSortQuery() {
+
+      this.orderByStr = '';
+
+      if (this.tableSortFields.length > 0) {
+
+        var templist = [];
+
+        this.tableSortFields.forEach(item => {
+          if (item.name && item.order) {
+            var tempItem = item.name + '_,' + item.order;
+            templist.push(tempItem);
+          }
+        })
+
+        if (templist.length > 0) {
+
+          this.orderByStr = templist.join('_;');
+        }
+      }
+
+      this.getData();
+      this.showTableSortDialog = false;
+    },
+    exportExcel() {
+      window.location.href = this.$baseUrl + "/caseInfo/exportExcel?searchKey="
+        + this.filter1 + "&advancedQuery=" + this.advancedQuerySearchKey + "&orderByStr=" + this.orderByStr;
+    },
+    searchData() {
+      this.currentPage = 1;
+      this.getData();
+    },
+    deleteRow(row) {
+      this.$alert('删除将无法恢复，确认要删除么？', '警告', { type: 'error' }).then(() => {
+        return this.$http.post({
+          url: '/caseInfo/del',
+          data: { id: row.id }
+        })
+      }).then(() => {
+        this.$message.success('删除成功');
+        this.getData();
+      }).catch(action => {
+        if (action === 'cancel') {
+          this.$message.info('删除取消');
+        } else {
+          this.$message.error('删除失败');
+        }
+      })
+    },
+    DateTimeFormatter(row, column, cellValue) {
+      if (cellValue) {
+        return format(cellValue, 'YYYY/MM/DD HH:mm', { locale: zh })
+      }
+
+    },
+    DateFormatter(row, column, cellValue) {
+      if (cellValue) {
+        return format(cellValue, 'YYYY/MM/DD', { locale: zh })
+      }
+
+    },
+    showImg(img) {
+      this.imgSrc = img;
+      this.imageDialogVisible = true;
+    },
+
+  }
+}
 </script>
 <style lang="less" scoped>
-
 </style>

src/main/webapp/WEB-INF/html/phoneDemo.html

@@ -1 +1 @@
-<!DOCTYPE html><html><head><meta charset=utf-8><meta name=format-detection content="telephone=no"><meta name=apple-mobile-web-app-capable content=yes><meta name=viewport content="width=device-width,initial-scale=1,user-scalable=no"><title>溯源页面</title><link href=./phoneDemo/phoneDemo/css/app.ffcf218991e8fea9d5f70dd7c9cf1a44.css rel=stylesheet></head><body><div id=app></div><script type=text/javascript src=./phoneDemo/phoneDemo/js/manifest.cf4638b5dbcd5db4cb82.js></script><script type=text/javascript src=./phoneDemo/phoneDemo/js/vendor.206364f17da43f0aaf5e.js></script><script type=text/javascript src=./phoneDemo/phoneDemo/js/app.cd18c6f36715af7418b5.js></script></body></html>
+<!DOCTYPE html><html><head><meta charset=utf-8><meta name=format-detection content="telephone=no"><meta name=apple-mobile-web-app-capable content=yes><meta name=viewport content="width=device-width,initial-scale=1,user-scalable=no"><title>溯源页面</title><link href=./phoneDemo/phoneDemo/css/app.a2b65f29d1b289235d6f1a2624e2e309.css rel=stylesheet></head><body><div id=app></div><script type=text/javascript src=./phoneDemo/phoneDemo/js/manifest.64d62ae74f0a90b62bc0.js></script><script type=text/javascript src=./phoneDemo/phoneDemo/js/vendor.206364f17da43f0aaf5e.js></script><script type=text/javascript src=./phoneDemo/phoneDemo/js/app.cd18c6f36715af7418b5.js></script></body></html>

src/main/webapp/phoneDemo/phoneDemo/js/manifest.cf4638b5dbcd5db4cb82.js → src/main/webapp/phoneDemo/phoneDemo/js/manifest.64d62ae74f0a90b62bc0.js

@@ -1,2 +1,2 @@
-!function(e){var n=window.webpackJsonp;window.webpackJsonp=function(r,a,c){for(var u,i,f,p=0,s=[];p<r.length;p++)i=r[p],t[i]&&s.push(t[i][0]),t[i]=0;for(u in a)Object.prototype.hasOwnProperty.call(a,u)&&(e[u]=a[u]);for(n&&n(r,a,c);s.length;)s.shift()();if(c)for(p=0;p<c.length;p++)f=o(o.s=c[p]);return f};var r={},t={8:0};function o(n){if(r[n])return r[n].exports;var t=r[n]={i:n,l:!1,exports:{}};return e[n].call(t.exports,t,t.exports,o),t.l=!0,t.exports}o.e=function(e){var n=t[e];if(0===n)return new Promise(function(e){e()});if(n)return n[2];var r=new Promise(function(r,o){n=t[e]=[r,o]});n[2]=r;var a=document.getElementsByTagName("head")[0],c=document.createElement("script");c.type="text/javascript",c.charset="utf-8",c.async=!0,c.timeout=12e4,o.nc&&c.setAttribute("nonce",o.nc),c.src=o.p+"phoneDemo/js/"+e+"."+{0:"76aa55a2ca543b5ff104",1:"4be6726480cb3d2049ac",2:"4baf575be903095b6a87",3:"19e8ca8acd6005946ef4",4:"736b1832d85a7a3160e5",5:"96e551ae90d7cd79b372"}[e]+".js";var u=setTimeout(i,12e4);function i(){c.onerror=c.onload=null,clearTimeout(u);var n=t[e];0!==n&&(n&&n[1](new Error("Loading chunk "+e+" failed.")),t[e]=void 0)}return c.onerror=c.onload=i,a.appendChild(c),r},o.m=e,o.c=r,o.d=function(e,n,r){o.o(e,n)||Object.defineProperty(e,n,{configurable:!1,enumerable:!0,get:r})},o.n=function(e){var n=e&&e.__esModule?function(){return e.default}:function(){return e};return o.d(n,"a",n),n},o.o=function(e,n){return Object.prototype.hasOwnProperty.call(e,n)},o.p="./phoneDemo/",o.oe=function(e){throw console.error(e),e}}([]);
-//# sourceMappingURL=manifest.cf4638b5dbcd5db4cb82.js.map
+!function(e){var n=window.webpackJsonp;window.webpackJsonp=function(r,a,c){for(var u,i,f,p=0,s=[];p<r.length;p++)i=r[p],t[i]&&s.push(t[i][0]),t[i]=0;for(u in a)Object.prototype.hasOwnProperty.call(a,u)&&(e[u]=a[u]);for(n&&n(r,a,c);s.length;)s.shift()();if(c)for(p=0;p<c.length;p++)f=o(o.s=c[p]);return f};var r={},t={8:0};function o(n){if(r[n])return r[n].exports;var t=r[n]={i:n,l:!1,exports:{}};return e[n].call(t.exports,t,t.exports,o),t.l=!0,t.exports}o.e=function(e){var n=t[e];if(0===n)return new Promise(function(e){e()});if(n)return n[2];var r=new Promise(function(r,o){n=t[e]=[r,o]});n[2]=r;var a=document.getElementsByTagName("head")[0],c=document.createElement("script");c.type="text/javascript",c.charset="utf-8",c.async=!0,c.timeout=12e4,o.nc&&c.setAttribute("nonce",o.nc),c.src=o.p+"phoneDemo/js/"+e+"."+{0:"76aa55a2ca543b5ff104",1:"4be6726480cb3d2049ac",2:"4baf575be903095b6a87",3:"1913fe0da134103dcba5",4:"736b1832d85a7a3160e5",5:"96e551ae90d7cd79b372"}[e]+".js";var u=setTimeout(i,12e4);function i(){c.onerror=c.onload=null,clearTimeout(u);var n=t[e];0!==n&&(n&&n[1](new Error("Loading chunk "+e+" failed.")),t[e]=void 0)}return c.onerror=c.onload=i,a.appendChild(c),r},o.m=e,o.c=r,o.d=function(e,n,r){o.o(e,n)||Object.defineProperty(e,n,{configurable:!1,enumerable:!0,get:r})},o.n=function(e){var n=e&&e.__esModule?function(){return e.default}:function(){return e};return o.d(n,"a",n),n},o.o=function(e,n){return Object.prototype.hasOwnProperty.call(e,n)},o.p="./phoneDemo/",o.oe=function(e){throw console.error(e),e}}([]);
+//# sourceMappingURL=manifest.64d62ae74f0a90b62bc0.js.map

src/main/zouma/index.html

@@ -4,18 +4,22 @@
 <head>
     <meta charset="utf-8">
     <meta name="viewport" content="width=device-width,initial-scale=1.0">
-    <!-- 引入样式 -->
-    <link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
-    <!-- 引入组件库 -->
-    <script src="https://unpkg.com/element-ui/lib/index.js"></script>
     <title>走马信息科技有限公司</title>
+
+    <style>
+        .detail img {
+            /* width: 100%; */
+            display: block;
+            margin: auto;
+            max-width: 100%;
+        }
+    </style>
 </head>
 
 <body>
     <div id="app"></div>
     <!-- built files will be auto injected -->
 </body>
-
 <script>
     function getQueryString(name) {
         var reg = new RegExp("(^|&)" + name + "=([^&]*)(&|$)", "i");

src/main/zouma/package-lock.json

@@ -1556,8 +1556,7 @@
     "camelcase": {
       "version": "1.2.1",
       "resolved": "https://registry.npmjs.org/camelcase/-/camelcase-1.2.1.tgz",
-      "integrity": "sha1-m7UwTS4LVmmLLHWLCKPqqdqlijk=",
-      "dev": true
+      "integrity": "sha1-m7UwTS4LVmmLLHWLCKPqqdqlijk="
     },
     "camelcase-keys": {
       "version": "2.1.0",
@@ -9751,6 +9750,14 @@
       "integrity": "sha1-9rRQHC7EzdJrp4vnIilh3ndiFZg=",
       "dev": true
     },
+    "uppercamelcase": {
+      "version": "1.1.0",
+      "resolved": "https://registry.npmjs.org/uppercamelcase/-/uppercamelcase-1.1.0.tgz",
+      "integrity": "sha1-Mk2YprOvx+iolT4QZBUJsOTiP5c=",
+      "requires": {
+        "camelcase": "1.2.1"
+      }
+    },
     "uri-js": {
       "version": "4.2.2",
       "resolved": "https://registry.npmjs.org/uri-js/-/uri-js-4.2.2.tgz",
@@ -9896,6 +9903,14 @@
       "resolved": "https://registry.npmjs.org/vue/-/vue-2.6.8.tgz",
       "integrity": "sha512-+vp9lEC2Kt3yom673pzg1J7T1NVGuGzO9j8Wxno+rQN2WYVBX2pyo/RGQ3fXCLh2Pk76Skw/laAPCuBuEQ4diw=="
     },
+    "vue-amap": {
+      "version": "0.5.9",
+      "resolved": "https://registry.npmjs.org/vue-amap/-/vue-amap-0.5.9.tgz",
+      "integrity": "sha512-zVDTZkLCFo8+jf1RD3d7Pcg5Ay+t5HHA3+V/frscEZQp2PGbUDOhJtH/JDxazJBYUDHqaPs743AAU/gGADphIg==",
+      "requires": {
+        "uppercamelcase": "1.1.0"
+      }
+    },
     "vue-axios": {
       "version": "2.1.4",
       "resolved": "https://registry.npmjs.org/vue-axios/-/vue-axios-2.1.4.tgz",

src/main/zouma/package.json

@@ -18,6 +18,7 @@
         "less-loader": "^4.1.0",
         "swiper": "^4.5.0",
         "vue": "^2.5.2",
+        "vue-amap": "^0.5.9",
         "vue-axios": "^2.1.1",
         "vue-router": "^3.0.1",
         "vuex": "^3.0.1"
@@ -68,4 +69,4 @@
         "last 2 versions",
         "not ie <= 8"
     ]
-}
+}

src/main/zouma/src/App.vue

@@ -11,6 +11,7 @@ export default {
 </script>
 
 <style>
+
 *{
   margin: 0;
   padding: 0;

src/main/zouma/src/assets/TraceabilitySystem/去除文件名中.bat → src/main/zouma/src/assets/rapid/去除文件名中.bat

@@ -2,4 +2,4 @@
 
 for /f "delims=" %%1 in ('dir /a /b') do (set wind=%%1
 
-ren "%%~1" "!wind:@2x=!")
+ren "%%~1" "!wind:@3x=!")

src/main/zouma/src/components/CaseItem.vue

@@ -0,0 +1,76 @@
+<template>
+  <router-link :to="{name:'caseDetail',query:{id:info.id}}" class="caseItem">
+    <div class="bg swiperImg" :style="{backgroundImage:'url('+info.image+')'}"></div>
+    <div class="text">
+        {{info.caseName}}
+    </div>
+  </router-link>
+</template>
+
+<script>
+export default {
+  name: 'CaseItem',
+  props: {
+    info: {
+      type: Object,
+      default: () => {
+        return {
+          image: ''
+        };
+      }
+    }
+  }
+}
+</script>
+
+<style lang="less" scoped>
+.caseItem {
+  width: 350px;
+  height: 260px;
+  overflow: hidden;
+  margin-top: 25px;
+  cursor: pointer;
+  position: relative;
+
+  &:nth-child(3n + 1) {
+    margin-right: 25px;
+  }
+  &:nth-child(3n + 2) {
+    margin-right: 25px;
+  }
+
+  .swiperImg {
+    width: 350px;
+    height: 260px;
+    transition: transform ease-in-out 0.3s;
+    position: absolute;
+    left: 0;
+    top: 0;
+  }
+
+  .text {
+    position: absolute;
+    width: 100%;
+    height: 100%;
+    left: 0;
+    bottom: 0;
+    background: rgba(0, 0, 0, 0);
+    transition: all ease-in-out 0.3s;
+    text-align: center;
+    line-height: 260px;
+    color: rgba(255, 255, 255, 0);
+    font-size: 26px;
+  }
+
+  &:hover {
+    .swiperImg {
+      transform: scale(1.2);
+    }
+
+    .text{
+        background: rgba(0, 0, 0, 0.5);
+        color: rgba(255, 255, 255, 1);
+    }
+  }
+}
+</style>

src/main/zouma/src/components/HeadContent.vue

@@ -1,9 +1,10 @@
 <template>
   <el-header height="100px" class="headClass" :style="{background:headColor}">
+    <img src="../assets/logo.png" class="logo" alt>
     <div class="headerList">
       <template v-for="(item,index) in headerTitle">
-        <div class="header-item" :class="{active:(nowChooseIndex==index)}" slot="reference" v-if="!item.children">
-          <span :id="'item_'+index" @click="goHref(item.href)">{{item.name}}</span>
+        <div class="header-item" :class="{active:(nowChooseIndex==index)}" slot="reference" v-if="!item.children" @click="goHref(item.href)">
+          <span :id="'item_'+index">{{item.name}}</span>
         </div>
         <el-popover placement="bottom" :width="item.children.length==1?164:398" trigger="hover" v-else>
           <div class="header-item" slot="reference" :class="{active:(nowChooseIndex==index)}">
@@ -24,10 +25,10 @@
 <script>
 export default {
   name: 'headContent',
-  props:{
-    headColor:{
-      type:String,
-      default:''
+  props: {
+    headColor: {
+      type: String,
+      default: ''
     }
   },
   created() {
@@ -48,17 +49,14 @@ export default {
             name: 'App开发',
             href: '/appDevelopment'
           }, {
-            name: '微信-小程序',
-            href: ''
-          }, {
-            name: '微信H5定制',
-            href: ''
+            name: '微信开发',
+            href: '/weChatDevelopment'
           }, {
             name: '智慧溯源系统',
             href: '/traceabilitySystem'
           }, {
-            name: '网站建设',
-            href: ''
+            name: '快速开发平台',
+            href: '/rapidDevelopment'
           }
         ]]
       }, {
@@ -135,10 +133,10 @@ export default {
         }]]
       }, {
         name: '案例展示',
-        href: ''
+        href: '/case'
       }, {
         name: '关于我们',
-        href: ''
+        href: '/about'
       }],
       lineWidth: 0,
       lineLeft: 0,
@@ -167,6 +165,11 @@ export default {
     }
   },
   watch: {
+    '$route'() {
+      setTimeout(() => {
+        this.getLine()
+      }, 500)
+    }
   },
   methods: {
     getLine() {
@@ -181,13 +184,11 @@ export default {
       return result;
     },
     goHref(href) {
-      if(!href){
+      if (!href) {
         return
       }
       this.$router.push(href)
-      setTimeout(() => {
-        this.getLine()
-      },500)
+
     }
   }
 
@@ -198,12 +199,19 @@ export default {
 <style lang="less" scoped>
 .headClass {
   display: flex;
-  justify-content: flex-end;
+  justify-content: space-between;
   position: fixed;
   width: 100%;
   top: 0;
   left: 0;
   z-index: 500;
+
+  .logo {
+    width: 231px;
+    height: 47px;
+    margin-left: 6vw;
+    align-self: center;
+  }
 }
 .headerList {
   display: flex;
@@ -216,10 +224,10 @@ export default {
     font-size: 16px;
     color: #fff;
     cursor: pointer;
-    transition: all ease-in-out .3s;
+    transition: all ease-in-out 0.3s;
 
     &:hover {
-    font-weight: bold;
+      font-weight: bold;
     }
   }
 

src/main/zouma/src/main.js

@@ -1,18 +1,38 @@
-// The Vue build version to load with the `import` command
-// (runtime-only or standalone) has been set in webpack.base.conf with an alias.
 import Vue from 'vue'
 import App from './App'
 import router from './router'
 import store from './store'
+import ElementUI from 'element-ui'
 import axios from 'axios'
-import ElementUI from 'element-ui';
+import VueAMap from 'vue-amap'
+
+
 import './theme/index.css'
 import './animate.min.css'
 import 'swiper/dist/css/swiper.css';
+import 'element-ui/lib/theme-chalk/index.css'
+
+
+
+
+// 初始化vue-amap
+VueAMap.initAMapApiLoader({
+    // 高德的key
+    key: 'dd8f1d46b89cb06d842c321d0d021672',
+    // 插件集合
+    plugin: ['AMap.Autocomplete', 'AMap.PlaceSearch', 'AMap.Scale', 'AMap.OverView', 'AMap.ToolBar', 'AMap.MapType', 'AMap.PolyEditor', 'AMap.CircleEditor'],
+    // 高德 sdk 版本，默认为 1.4.4
+    v: '1.4.7'
+});
+
+
+
 Vue.use(ElementUI);
+Vue.use(VueAMap);
+
 
 Vue.config.productionTip = false
-const baseUrl = process.env.NODE_ENV === 'production' ? '../' : 'http://www.xiangjuwu.com/';
+const baseUrl = process.env.NODE_ENV === 'production' ? '../' : `http://${location.hostname}:8080`;
 // const baseUrl = 'http://www.xiangjuwu.com'
 axios.defaults.withCredentials = true;
 axios.defaults.baseURL = baseUrl;

src/main/zouma/src/pages/About.vue

@@ -0,0 +1,259 @@
+<template>
+  <div class="content">
+    <div class="bg topImg" ref="topImg" :style="{backgroundImage:'url('+require('../assets/about/women_img_00.jpg')+')'}"></div>
+
+    <div class="aboutContent">
+      <h1>基本信息</h1>
+
+      <p style="margin-top:40px;">南京走马信息技术有限公司专业从事互联网产品研发建设及企业应用系统开发的高新技术企业，公司核心团队由多名资深前端工程师、资深UI/UE设计师、资深架构师、资深APP开发工程师，知名企业IT管理人员组成，他们对企业信息化建设有着丰富的经验及创新意识。</p>
+      <p style="margin-top:30px;">我们为客户提供集管理咨询、软件开发、系统维护为一体的综合性服务。自主创新产品使用当前主流的应用开发技术，及众多客户软件开发实践的成功经验。具体服务内容包括APP开发，微信订阅号、企业号、服务号开发，小程序设计开发，H5定制，企业网站开发，溯源系统定制，快速开发平台定制，CRM、ERP企业管理系统开发等。</p>
+
+      <img src="../assets/about/2019-03-29_102433.png" style="width:800px;margin-top:60px;" alt>
+
+      <h1 style="margin-top:88px;">广受好评</h1>
+
+      <p style="margin-top:33px;">我们坚持量身定制，同时也更加注重性价比，想把实惠带给千万用户。选择我们不仅是对我们的信任，也是对您自身眼光的肯定。清晰的定位，独具匠心的创意与策划、新颖别致的产品视觉、人性化交互、有力的技术支持、完善的售后服务体质，使我们获得了100%的客户好评，我们目的是要以最优的质量，最快的速度来完成产品研发任务，为企业或创业者争取最优化的时间。</p>
+
+      <div class="cooperation" style="margin-top:60px;">
+        <div class="cooperation-item" v-for="item in cooperationList" @mouseover="item.isShow=true" @mouseleave="item.isShow=false">
+          <div class="bg" v-if="item.isShow" :style="{backgroundImage:'url('+item.preImg+')'}"></div>
+          <div class="bg" v-else :style="{backgroundImage:'url('+item.img+')'}"></div>
+        </div>
+      </div>
+
+      <h1 style="margin-top:88px;">联系方式</h1>
+
+      <div class="map">
+        <div class="mapLfet">
+          <div class="map-item">
+            <div class="name">地址：</div>
+            <div class="val">南京市江宁区迎翠路7号中关村国际服务外包产业园良匠工坊</div>
+          </div>
+          <div class="map-item">
+            <div class="name">电话：</div>
+            <div class="val">15651768023</div>
+          </div>
+        </div>
+
+        <div class="mapRight">
+          <el-amap vid="amapDemo" :zoom="zoom" :center="center">
+            <el-amap-marker v-for="(marker, index) in markers" :position="marker.position" :events="marker.events" :visible="marker.visible" :draggable="marker.draggable" :vid="index"></el-amap-marker>
+          </el-amap>
+        </div>
+      </div>
+    </div>
+
+   
+
+
+
+  </div>
+</template>
+
+
+
+<script>
+export default {
+  name: 'home',
+  mounted() {
+
+  },
+  data() {
+    return {
+      cooperationList: [
+        {
+          preImg: require('../assets/kehu_01_pre.png'),
+          img: require('../assets/kehu_01.png'),
+          isShow: false
+        },
+        {
+          preImg: require('../assets/kehu_02_pre.png'),
+          img: require('../assets/kehu_02.png'),
+          isShow: false
+        },
+        {
+          preImg: require('../assets/kehu_03_pre.png'),
+          img: require('../assets/kehu_03.png'),
+          isShow: false
+        },
+        {
+          preImg: require('../assets/kehu_04_pre.png'),
+          img: require('../assets/kehu_04.png'),
+          isShow: false
+        }, {
+          preImg: require('../assets/kehu_05_pre.png'),
+          img: require('../assets/kehu_05.png'),
+          isShow: false
+        },
+        {
+          preImg: require('../assets/kehu_06_pre.png'),
+          img: require('../assets/kehu_06.png'),
+          isShow: false
+        },
+        {
+          preImg: require('../assets/kehu_07_pre.png'),
+          img: require('../assets/kehu_07.png'),
+          isShow: false
+        }, {
+          preImg: require('../assets/kehu_08_pre.png'),
+          img: require('../assets/kehu_08.png'),
+          isShow: false
+        }, {
+          preImg: require('../assets/kehu_09_pre.png'),
+          img: require('../assets/kehu_09.png'),
+          isShow: false
+        }, {
+          preImg: require('../assets/kehu_10_pre.png'),
+          img: require('../assets/kehu_10.png'),
+          isShow: false
+        }, {
+          preImg: require('../assets/kehu_11_pre.png'),
+          img: require('../assets/kehu_11.png'),
+          isShow: false
+        },
+        {
+          preImg: require('../assets/kehu_12_pre.png'),
+          img: require('../assets/kehu_12.png'),
+          isShow: false
+        },
+        {
+          preImg: require('../assets/kehu_13_pre.png'),
+          img: require('../assets/kehu_13.png'),
+          isShow: false
+        },
+        {
+          preImg: require('../assets/kehu_14_pre.png'),
+          img: require('../assets/kehu_14.png'),
+          isShow: false
+        }, {
+          preImg: require('../assets/kehu_15_pre.png'),
+          img: require('../assets/kehu_15.png'),
+          isShow: false
+        },
+        {
+          preImg: require('../assets/kehu_16_pre.png'),
+          img: require('../assets/kehu_16.png'),
+          isShow: false
+        },
+        {
+          preImg: require('../assets/kehu_17_pre.png'),
+          img: require('../assets/kehu_17.png'),
+          isShow: false
+        }, {
+          preImg: require('../assets/kehu_18_pre.png'),
+          img: require('../assets/kehu_18.png'),
+          isShow: false
+        }, {
+          preImg: require('../assets/kehu_19_pre.png'),
+          img: require('../assets/kehu_19.png'),
+          isShow: false
+        }, {
+          preImg: require('../assets/kehu_20_pre.png'),
+          img: require('../assets/kehu_20.png'),
+          isShow: false
+        }
+      ],
+      zoom: 16,
+      center: [118.793367, 31.931750],
+      markers: [
+        {
+          position: [118.793367, 31.931750],
+        }
+      ],
+
+    }
+  },
+  methods: {
+
+  }
+}
+</script>
+
+<!-- Add "scoped" attribute to limit CSS to this component only -->
+<style lang="less" scoped>
+.content {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+}
+.bg {
+  background-position: center center;
+  background-size: auto 100%;
+  background-repeat: no-repeat;
+}
+.topImg {
+  height: 900px;
+
+  width: 100%;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+
+  img {
+    width: 846px;
+  }
+}
+
+.aboutContent {
+  margin-top: -220px;
+  width: 900px;
+  padding: 88px 100px;
+  background-color: #fff;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+
+  p {
+    font-size: 15px;
+    font-weight: bold;
+    color: rgba(102, 102, 102, 1);
+    line-height: 28px;
+  }
+}
+
+.cooperation {
+  width: 800px;
+  display: flex;
+  justify-content: space-between;
+  flex-wrap: wrap;
+  .cooperation-item {
+    width: 152px;
+    height: 80px;
+    margin-bottom: 10px;
+    div {
+      width: 152px;
+      height: 80px;
+    }
+  }
+}
+
+.map {
+  display: flex;
+  justify-content: space-between;
+  width: 800px;
+  margin-top: 43px;
+
+  .mapLfet {
+    width: 317px;
+
+    .map-item {
+      display: flex;
+
+      .name {
+        min-width: 50px;
+      }
+
+      font-size: 15px;
+      font-weight: bold;
+      color: rgba(102, 102, 102, 1);
+      line-height: 28px;
+      margin-bottom: 20px;
+    }
+  }
+
+  .mapRight {
+    width: 440px;
+    height: 280px;
+  }
+}
+</style>

src/main/zouma/src/pages/AppDevelopment.vue

@@ -1,195 +1,116 @@
 <template>
   <div class="content">
-    <div class="topImg" ref="topImg">
+    <div class="topImg bg" ref="topImg" :style="{backgroundImage:'url('+require('../assets/App/app_img_00.jpg')+')'}">
       <div class="topLeft">
-        <div class="title">智慧溯源系统</div>
-        <div class="subTitle">解决产品防伪溯源、智慧包装、供应链管理等难题</div>
+        <div class="title">APP开发</div>
+        <div class="subTitle">提供符合行业特点的专业产品设计和App定制开发服务</div>
         <el-button type="primaryMax" plain style="width:200px;margin-top:47px;line-height:30px;">
           获取体验账号
           <i class="el-icon-arrow-right el-icon--right"></i>
         </el-button>
       </div>
 
-      <img src="../assets/TraceabilitySystem/suyuan_img_00.png" alt>
-    </div>
+      <div style="width:691px"></div>
 
-    <!-- 行业 -->
-    <h1 style="margin:116px auto 100px;">多种行业溯源解决方案满足您的需求</h1>
-    <div class="industryList">
-      <div class="industry-item">
-        <div class="img bg" :style="{backgroundImage:'url('+require('../assets/TraceabilitySystem/suyuan_img_01.png')+')'}"></div>
-        <div class="text">食品</div>
-      </div>
-      <div class="industry-item">
-        <div class="img bg" :style="{backgroundImage:'url('+require('../assets/TraceabilitySystem/suyuan_img_02.png')+')'}"></div>
-        <div class="text">畜牧业</div>
-      </div>
-      <div class="industry-item">
-        <div class="img bg" :style="{backgroundImage:'url('+require('../assets/TraceabilitySystem/suyuan_img_03.png')+')'}"></div>
-        <div class="text">农产品</div>
-      </div>
-      <div class="industry-item">
-        <div class="img bg" :style="{backgroundImage:'url('+require('../assets/TraceabilitySystem/suyuan_img_04.png')+')'}"></div>
-        <div class="text">茶叶</div>
-      </div>
-      <div class="industry-item">
-        <div class="img bg" :style="{backgroundImage:'url('+require('../assets/TraceabilitySystem/suyuan_img_05.png')+')'}"></div>
-        <div class="text">药品</div>
-      </div>
-      <div class="industry-item">
-        <div class="img bg" :style="{backgroundImage:'url('+require('../assets/TraceabilitySystem/suyuan_img_06.png')+')'}"></div>
-        <div class="text">进口产品</div>
-      </div>
-      <div class="industry-item">
-        <div class="img bg" :style="{backgroundImage:'url('+require('../assets/TraceabilitySystem/suyuan_img_07.png')+')'}"></div>
-        <div class="text">乳制品</div>
-      </div>
-      <div class="industry-item">
-        <div class="img bg" :style="{backgroundImage:'url('+require('../assets/TraceabilitySystem/suyuan_img_08.png')+')'}"></div>
-        <div class="text">更多</div>
-      </div>
     </div>
 
-    <!-- 特色 -->
-    <h1 style="margin:200px auto 190px;">产品溯源管理平台系统特色</h1>
-    <div class="characteristic-item" ref="characteristic_0">
-      <div class="text" style="margin-right:116px;">
-        <div class="title">操作系统简易化</div>
-        <div class="subTitle">平台的管理界面简单易用、操作方便，人性化设计，入网即用，全自动平台，多账号管理，简单设置即可完成企业产品溯源信息。</div>
-      </div>
-      <img src="../assets/TraceabilitySystem/suyuan_img_09.png" alt>
-    </div>
-    <div class="characteristic-item" style="margin-top:162px" ref="characteristic_1">
-      <img src="../assets/TraceabilitySystem/suyuan_img_10.png" alt>
-      <div class="text" style="margin-left:278px;">
-        <div class="title">供应链管理数字化</div>
-        <div class="subTitle">从原材料到生产、物流、营销数字化监控，各个节点数据相连，系统智能化数据分析。生产、库存、物流、经销商、门店等供应链系统数据可公开化，增加效率，增加上下游信用体系建设。</div>
-      </div>
-    </div>
-    <div class="characteristic-item" style="margin-top:67px" ref="characteristic_2">
-      <div class="text" style="margin-right:228px;">
-        <div class="title">大数据营销分析智能化</div>
-        <div class="subTitle">一物一码产品“身份”管理，流转环节数据管控，智能供应链信息记录，大数据智能化分析，清晰化生产库存管理及营销效果监控。“码”上解决。</div>
+    <!-- 产品 -->
+    <div class="content-item">
+      <div class="content-top" style="margin:140px auto 80px;">
+        <h1>打造优质APP产品，快速助您产品落地</h1>
+        <div class="subTitle" style="margin-top:33px">随着移动互联网的普及，用户越来越依赖手机App应用软件，移动互联网时代手机App不仅便携了人们的生活，也让每个企业开始了移动信息化进程。 随着移动互联技术的不断成熟，丰富的营销玩法和互动方式让用户逐渐呈现更多主动性和依赖性，企业与用户的交流也更加便捷。我们通过定制App解决方案帮助企业覆盖更多相关用户场景，持续获得流量增长，实现商业价值的整合转换。</div>
       </div>
-      <img src="../assets/TraceabilitySystem/suyuan_img_11.png" alt>
     </div>
 
-    <!-- 价值体现 -->
-    <div class="valueContent bg" :style="{backgroundImage:'url('+require('../assets/home_img_18.jpg')+')'}">
-      <h1 style="margin:110px auto 109px;color:#fff;">智慧溯源的价值体现</h1>
-
-      <div class="valueList">
-        <div class="value-item">
-          <img src="../assets/TraceabilitySystem/suyuan_icon_jieyue.png" alt>
-          <p>节约成本</p>
-        </div>
-        <div class="value-item">
-          <img src="../assets/TraceabilitySystem/suyuan_icon_kongzhi.png" alt>
-          <p>控制风险</p>
-        </div>
-        <div class="value-item">
-          <img src="../assets/TraceabilitySystem/suyuan_icon_shuju.png" alt>
-          <p>数据搜集</p>
-        </div>
-        <div class="value-item">
-          <img src="../assets/TraceabilitySystem/suyuan_icon_manzu.png" alt>
-          <p>满足国家监控</p>
-        </div>
-        <div class="value-item">
-          <img src="../assets/TraceabilitySystem/suyuan_icon_yingxiao.png" alt>
-          <p>营销机会</p>
-        </div>
-        <div class="value-item">
-          <img src="../assets/TraceabilitySystem/suyuan_icon_gexing.png" alt>
-          <p>个性化管理</p>
-        </div>
+    <div class="product">
+      <div class="product-item">
+        <img src="../assets/app/app_img_01.png" alt>
+        <div class="title">安卓APP开发</div>
+        <div class="subTitle">Android APP</div>
+        <hr>
+        <div class="content">采用原生安卓程序，根据安卓产品研发设计规范和流程，调用硬件功能、处理速度快、性能高、用户体验好、可离线使用</div>
       </div>
 
-      <el-button type="primaryMax" plain style="width:200px;margin-top:47px;line-height:30px;">获取体验账号</el-button>
-    </div>
-
-    <!-- 赋码形式 -->
-    <h1 style="margin:180px auto 120px;">多种赋码形式，满足企业个性化需求</h1>
-    <div class="formList">
-      <div class="form-item">
-        <img src="../assets/TraceabilitySystem/suyuan_img_13.png" alt>
-        <p>一箱一码</p>
-      </div>
-      <div class="form-item">
-        <img src="../assets/TraceabilitySystem/suyuan_img_14.png" alt>
-        <p>一盒一码</p>
-      </div>
-      <div class="form-item">
-        <img src="../assets/TraceabilitySystem/suyuan_img_15.png" alt>
-        <p>一瓶一码</p>
+      <div class="product-item">
+        <img src="../assets/app/app_img_02.png" alt>
+        <div class="title">苹果IOS开发</div>
+        <div class="subTitle">Apple IOS</div>
+        <hr>
+        <div class="content">采用IOS原生开发，遵循IOS软件研发规范，您提供一站式的IOS完整的系统结构与内容编程， 落实APP定制开发服务</div>
       </div>
-      <div class="form-item">
-        <img src="../assets/TraceabilitySystem/suyuan_img_16.png" alt>
-        <p>一签一码</p>
+
+      <div class="product-item">
+        <img src="../assets/app/app_img_03.png" alt>
+        <div class="title">Web APP开发</div>
+        <div class="subTitle">Web APP development</div>
+        <hr>
+        <div class="content">采用Web开发，符合WebApp研发规 范和流程，大多适用于微信公众号端移动商城、移动官网等</div>
       </div>
-      <div class="form-item">
-        <img src="../assets/TraceabilitySystem/suyuan_img_17.png" alt>
-        <p>一券一码</p>
+
+      <div class="product-item">
+        <img src="../assets/app/app_img_04.png" alt>
+        <div class="title">混合/套壳开发</div>
+        <div class="subTitle">Hybrid App</div>
+        <hr>
+        <div class="content">相对于原生开发的APP，开发费用较低、开发周期较短、而且更加灵活，但体验和性能较差、不适合做交互性太强的项目</div>
       </div>
     </div>
+    <!-- 实现 -->
+    <div class="achieve">
+      <div class="title">App能够帮助您实现</div>
 
-    <!-- 价值所在 -->
-    <h1 style="margin:180px auto 120px;">一物一码，价值所在</h1>
+      <img src="../assets/app/app_img_05.png" alt>
 
-    <div class="product">
-      <div class="product-item">
-        <img src="../assets/TraceabilitySystem/suyuan_img_18.png" alt>
-        <h3>引流量</h3>
-        <p>跨界营销，多种动销活动，立体营销，高速引流，增加企业销量</p>
+      <div class="achieve-item left" style="top:308px">
+        <div class="title">更精准的目标定位</div>
+        <div class="subTitle">手机App可以帮助企业实现精准营销，App将企业的最新信息快速精准的传达给目标客户</div>
       </div>
-      <div class="product-item">
-        <img src="../assets/TraceabilitySystem/suyuan_img_19.png" alt>
-        <h3>做决策</h3>
-        <p>实时查看数据，提供营销分析，为商业决策提供依据</p>
+
+      <div class="achieve-item left" style="top:540px">
+        <div class="title">更便捷的品牌互动</div>
+        <div class="subTitle">手机App随时随地传达信息给客户，不会受时间跟空间等原因受阻</div>
       </div>
-      <div class="product-item">
-        <img src="../assets/TraceabilitySystem/suyuan_img_20.png" alt>
-        <h3>防假冒</h3>
-        <p>一物一码，万物物联，真实记录商品来龙去脉，增加品牌形象</p>
+
+      <div class="achieve-item right" style="top:355px">
+        <div class="title">更丰富的表现形式</div>
+        <div class="subTitle">手机App比传统媒介拥有更丰富的表现形式，移动设备可以为企业带来前所未有的互动体验</div>
       </div>
-      <div class="product-item">
-        <img src="../assets/TraceabilitySystem/suyuan_img_21.png" alt>
-        <h3>管产品</h3>
-        <p>掌握产品流向，产品窜货，自动提醒，增加渠道管控力</p>
+
+      <div class="achieve-item right" style="top:555px">
+        <div class="title">更强大的用户粘性</div>
+        <div class="subTitle">手机App能提高用户的粘性，留住新老客户，让他们成为企业中最好的口碑传播者</div>
       </div>
     </div>
 
-    <!-- 案例展示 -->
+    <!-- 团队 -->
     <div class="content-item">
       <div class="content-top" style="margin:140px auto 80px;">
-        <h1>案例展示</h1>
+        <h1>专业的技术开发团队</h1>
         <hr>
-        <div class="subTitle">做过哪些项目很重要，用心更重要</div>
+        <div class="subTitle">卓越的交互体验设计+完美的视觉呈现+强大的技术研发实力=更多价值</div>
       </div>
     </div>
-    <div class="caseList">
-      <div class="case-item">
-        <div class="img bg" :style="{backgroundImage:'url('+require('../assets/TraceabilitySystem/home_img_12.png')+')'}"></div>
-        <div class="text">
-          <img src="../assets/erweim.jpg" alt>
-          <p>使用手机扫描二维码查看溯源结果</p>
-        </div>
-      </div>
-      <div class="case-item">
-        <div class="img bg" :style="{backgroundImage:'url('+require('../assets/TraceabilitySystem/home_img_12.png')+')'}"></div>
-        <div class="text">
-          <img src="../assets/erweim.jpg" alt>
-          <p>使用手机扫描二维码查看溯源结果</p>
-        </div>
-      </div>
-      <div class="case-item">
-        <div class="img bg" :style="{backgroundImage:'url('+require('../assets/TraceabilitySystem/home_img_12.png')+')'}"></div>
-        <div class="text">
-          <img src="../assets/erweim.jpg" alt>
-          <p>使用手机扫描二维码查看溯源结果</p>
-        </div>
+
+    <img src="../assets/app/img_00001.png" class="team" alt>
+
+    <!-- 案例 -->
+    <div class="content-item">
+      <div class="content-top" style="margin:190px auto 100px;">
+        <h1>案例展示</h1>
+        <hr>
+        <div class="subTitle">做过哪些项目很重要，用心更重要</div>
       </div>
     </div>
+    <img src="../assets/app/img_00002.png" alt class="caseImg">
+    <img src="../assets/app/img_00003.png" alt class="caseImg">
+    <img src="../assets/app/img_00004.png" alt class="caseImg">
+    <img src="../assets/app/img_00005.png" alt class="caseImg">
+    <img src="../assets/app/img_00006.png" alt class="caseImg">
+    <img src="../assets/app/img_00007.png" alt class="caseImg">
+    <img src="../assets/app/img_00008.png" alt class="caseImg">
+    <img src="../assets/app/img_00009.png" alt class="caseImg">
+    <img src="../assets/app/img_00010.png" alt class="caseImg">
+    <el-button type="primary" plain style="width:200px;line-height:18px">查看更多详细案例</el-button>
   </div>
 </template>
 
@@ -236,7 +157,7 @@ export default {
     width: 32px;
     height: 4px;
     background: rgba(21, 168, 170, 1);
-    margin:24px auto 0;
+    margin: 24px auto 0;
     transition: all 0.6s ease-in-out;
     border: none;
   }
@@ -248,6 +169,7 @@ export default {
     line-height: 20px;
     margin: 14px auto 0;
     text-align: center;
+    max-width: 950px;
   }
 
   &:hover {
@@ -273,12 +195,6 @@ export default {
   height: 750px;
   max-height: 70vh;
   width: 100%;
-  background: linear-gradient(
-    270deg,
-    rgba(0, 198, 251, 1) 0%,
-    rgba(42, 99, 177, 1) 100%
-  );
-
   display: flex;
   align-items: center;
   justify-content: center;
@@ -314,240 +230,142 @@ h1 {
   text-align: center;
 }
 
-.industryList {
-  width: 1050px;
-  position: relative;
-  display: flex;
-  flex-wrap: wrap;
-  justify-content: space-between;
-
-  .industry-item {
-    width: 250px;
-    height: 250px;
-    overflow: hidden;
-    position: relative;
-    margin-bottom: 20px;
-    .img {
-      width: 250px;
-      height: 250px;
-      transition: all ease-in-out 0.3s;
-    }
-
-    .text {
-      font-size: 22px;
-      font-weight: bold;
-      color: rgba(255, 255, 255, 1);
-      line-height: 30px;
-      position: absolute;
-      left: 50%;
-      top: 50%;
-      transform: translate(-50%, -50%);
-    }
-
-    &:hover {
-      .img {
-        transform: scale(1.5);
-      }
-    }
-  }
-}
-
-.characteristic-item {
-  display: flex;
-  align-items: center;
-  justify-content: center;
-
-  .text {
-    .title {
-      font-size: 36px;
-      font-weight: bolder;
-      color: rgba(21, 168, 170, 1);
-      line-height: 50px;
-    }
-    .subTitle {
-      font-size: 16px;
-      color: rgba(0, 0, 0, 1);
-      line-height: 28px;
-      margin-top: 24px;
-      width: 555px;
-    }
-  }
-
-  img {
-    width: 423px;
-    height: 379px;
-  }
-}
-
-.valueContent {
-  width: 100%;
-  height: 779px;
-  margin-top: 240px;
-  display: flex;
-  flex-direction: column;
-  justify-content: center;
-  align-items: center;
-}
-
-.valueList {
-  width: 1180px;
+.product {
+  width: 1234px;
   display: flex;
   justify-content: space-between;
+  padding-bottom: 120px;
 
-  .value-item {
-    width: 180px;
-    height: 290px;
-    background: rgba(21, 168, 170, 1);
+  .product-item {
+    width: 228px;
+    height: 410px;
+    background: rgba(242, 244, 245, 1);
+    border-radius: 6px;
+    padding: 0 29px;
     display: flex;
-    flex-direction: column;
     align-items: center;
-    justify-content: center;
+    flex-direction: column;
+    cursor: pointer;
+    transition: all ease-in-out 0.6s;
 
     img {
-      width: 80px;
-      height: 80px;
+      width: 69px;
+      height: 73px;
+      margin-top: 62px;
+      transition: all ease-in-out 0.6s;
     }
 
-    p {
-      font-size: 16px;
-      font-weight: bolder;
-      color: rgba(255, 255, 255, 1);
-      line-height: 22px;
-      margin-top: 40px;
-    }
-  }
-}
-
-.formList {
-  display: flex;
-  justify-content: space-between;
-  width: 1000px;
-  .form-item {
-    img {
-      width: 160px;
-      height: 160px;
-    }
-    p {
-      font-size: 18px;
+    .title {
+      font-size: 22px;
       font-weight: bold;
       color: rgba(0, 0, 0, 1);
-      line-height: 25px;
-      text-align: center;
-      margin-top: 37px;
+      line-height: 30px;
+      margin-top: 45px;
     }
-  }
-}
 
-.product {
-  width: 1160px;
-  justify-content: space-between;
-  align-items: center;
-  display: flex;
-  flex-wrap: wrap;
-  .product-item {
-    width: 500px;
-    height: 400px;
-    background: rgba(255, 255, 255, 1);
-    box-shadow: 0px 6px 18px 0px rgba(0, 0, 0, 0.08);
-    display: flex;
-    flex-direction: column;
-    align-items: center;
-    justify-content: center;
-    transition: all 0.3s ease-in-out;
-    img {
-      width: 310px;
-      -webkit-transition: 1s all;
-      transition: 1s all;
-      -moz-transition: 1s all;
+    .subTitle {
+      font-size: 13px;
+      color: rgba(153, 153, 153, 1);
+      line-height: 18px;
+      margin-top: 11px;
     }
 
-    h3 {
-      font-size: 22px;
-      font-weight: bolder;
-      color: rgba(0, 0, 0, 1);
-      line-height: 36px;
-      margin: 31px 0 14px;
+    hr {
+      width: 20px;
+      height: 2px;
+      background: rgba(153, 153, 153, 1);
+      margin-top: 27px;
+      transition: width 0.3s ease-in-out;
+      border: none;
     }
-    p {
-      width: 220px;
+
+    .content {
       font-size: 14px;
-      font-weight: 400;
-      color: #000000;
+      color: rgba(102, 102, 102, 1);
       line-height: 20px;
-      margin-bottom: 53px;
+      margin-top: 29px;
       text-align: center;
     }
 
     &:hover {
-      box-shadow: 0px 10px 40px 0px rgba(21, 168, 170, 0.26);
+      hr {
+        width: 40px;
+        background: #15a8aa;
+      }
 
       img {
-        -webkit-transform: rotatey(360deg);
-        -moz-transform: rotatey(360deg);
         transform: rotatey(360deg);
-        -o-transform: rotatey(360deg);
-        -ms-transform: rotatey(360deg);
       }
-    }
 
-    &:nth-child(n + 3) {
-      margin-top: 60px;
+      box-shadow: 0px 3px 18px 0px rgba(21, 168, 170, 0.8);
     }
   }
 }
 
-.caseList {
-  width: 1100px;
+.achieve {
+  background: linear-gradient(
+    -360deg,
+    rgba(0, 102, 236, 1) 0%,
+    rgba(20, 146, 206, 1) 100%
+  );
+  width: 100%;
+  height: 880px;
   display: flex;
+  flex-direction: column;
   align-items: center;
-  justify-content: space-between;
-  .case-item {
-    width: 350px;
-    height: 260px;
-    overflow: hidden;
-    position: relative;
-    cursor: pointer;
+  position: relative;
+
+  .title {
+    font-size: 38px;
+    font-weight: bolder;
+    color: rgba(255, 255, 255, 1);
+    line-height: 53px;
+    padding: 100px 0 98px;
+  }
+
+  img {
+    width: 442px;
+    height: 549px;
+  }
+
+  .achieve-item {
+    position: absolute;
 
-    .img {
-      width: 350px;
-      height: 260px;
-      transition: transform 0.3s ease-in-out;
+    &.left {
+      right: 50%;
+      transform: translateX(-231px);
+      text-align: right;
     }
 
-    .text {
-      width: 350px;
-      height: 260px;
-      background: rgba(0, 0, 0, 0.8);
-      position: absolute;
-      left: 0;
-      top: 260px;
-      display: flex;
-      align-items: center;
-      justify-content: center;
-      flex-direction: column;
-      transition: top 0.3s ease-in-out;
-      img {
-        width: 180px;
-        height: 180px;
-      }
-      p {
-        font-size: 15px;
-        font-weight: bold;
-        color: rgba(255, 255, 255, 1);
-        line-height: 21px;
-        text-align: center;
-        margin-top: 15px;
-      }
+    &.right {
+      left: 50%;
+      transform: translateX(231px);
     }
 
-    &:hover {
-      .img {
-        transform: scale(1.5);
-      }
-      .text {
-        top: 0;
-      }
+    .title {
+      font-size: 22px;
+      font-weight: bolder;
+      color: rgba(255, 255, 255, 1);
+      line-height: 30px;
+      padding: 0;
+    }
+
+    .subTitle {
+      font-size: 15px;
+      color: rgba(255, 255, 255, 1);
+      line-height: 21px;
+      margin-top: 15px;
+      max-width: 320px;
     }
   }
 }
+
+.team {
+  width: 1140px;
+}
+
+.caseImg {
+  width: 1090px;
+  margin-bottom: 56px;
+}
 </style>

src/main/zouma/src/pages/Case.vue

@@ -0,0 +1,524 @@
+<template>
+  <div class="content">
+    <div class="bg topImg" ref="topImg" :style="{backgroundImage:'url('+require('../assets/case/anli_img_00.jpg')+')'}">
+      <img src="../assets/home_text_01.png" alt>
+    </div>
+
+    <div class="menu">
+      <div class="menuContent">
+        <img class="home" src="../assets/case/home.png" alt @click="goNext('/home')">
+        <img class="next" src="../assets/case/icon_into.png" alt>
+        <span>案例列表</span>
+      </div>
+    </div>
+
+    <div class="tab">
+      <div class="tab-item" v-for="(tab,tabIndex) in tabList" :class="{active:tabIndex==nowTab}" @click="goSwiper(tabIndex)">{{tab}}</div>
+      <div class="tabLine" :style="{left:tabLine+'px'}"></div>
+    </div>
+
+    <!-- 案例展示 -->
+    <div class="content-item">
+      <div class="case">
+        <div class="swiper-container">
+          <div class="swiper-wrapper">
+            <div class="swiper-slide" v-for="swiper in 4" v-loading="isLoading">
+              <template v-if="allCase.length>0">
+                <case-item v-for="(item,index) in allCase"  :info="item"></case-item>
+              </template>
+              <div class="nothing" v-else>暂无数据。。。</div>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+import { TweenMax } from 'gsap/TweenMax'
+import Swiper from 'swiper'
+import CaseItem from '../components/CaseItem.vue'
+export default {
+  name: 'home',
+  mounted() {
+    setTimeout(() => {
+
+      this.mySwiper = new Swiper('.swiper-container', {
+        on: {
+          init: () => {
+            this.getCaseList(0)
+          },
+          slideChange: () => {
+            this.getCaseList(this.mySwiper.activeIndex)
+          },
+        },
+      })
+    }, 1000)
+
+
+  },
+  directives:
+    {
+      fade(el, binding) {
+        if (typeof binding.value == 'function')
+          binding.value(el);
+      }
+    },
+  data() {
+    return {
+      allCase: [],
+      tabList: ['APP开发', '微信开发', '溯源系统', '网站建设'],
+      nowMenu: 0,
+      mySwiper: null,
+      isLoading: true
+    }
+  },
+  computed: {
+    nowTab() {
+      return this.mySwiper ? this.mySwiper.activeIndex : 0
+    },
+    tabLine() {
+      return this.mySwiper ? this.mySwiper.activeIndex * 124 + 45 : 45;
+    }
+  },
+  methods: {
+    goSwiper(index) {
+      this.mySwiper.slideTo(index, 600, false);
+    },
+    getCaseList(index) {
+      this.allCase = [];
+      this.isLoading = true;
+      this.$http.get({
+        url: '/caseInfo/page',
+        data: {
+          typeFlag: index || 0
+        }
+      }).then(res => {
+        this.isLoading = false
+        if (res.success) {
+          if (res.data.pp.length > 0) {
+            this.allCase = res.data.pp
+          }
+
+        }
+      })
+    },
+    goNext(path) {
+      this.$router.push(path)
+    },
+    tweenIn(index) {
+      return (el) => {
+        TweenLite.to(el, 1, { x: -this.getLeft(index), y: -this.getTop(index) });
+      }
+    },
+    getLine(index) {
+      this.nowMenu = index;
+      setTimeout(() => {
+        this.menuLine.left = document.getElementById('menu_' + index).offsetLeft;
+        this.menuLine.width = document.getElementById('menu_' + index).offsetWidth;
+      }, 100)
+    },
+    getLeft(index) {
+      var left = 0;
+      switch (index % 3) {
+        case 0:
+          left = -175;
+          break;
+        case 1:
+          left = 0;
+          break;
+        case 2:
+          left = 175;
+          break;
+      }
+      return left;
+    },
+    getTop(index) {
+      var top = 0;
+      switch (index % 3) {
+        case 0: case 1: case 2:
+          top = -130;
+          break;
+        case 3: case 4: case 5:
+          top = 130;
+          break;
+      }
+      return top;
+    }
+  },
+  components:{
+    CaseItem
+  }
+}
+</script>
+
+<!-- Add "scoped" attribute to limit CSS to this component only -->
+<style lang="less" scoped>
+.content {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+}
+.bg {
+  background-position: center center;
+  background-size: cover;
+  background-repeat: no-repeat;
+}
+.topImg {
+  height: 600px;
+  max-height: 55vh;
+  width: 100%;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+
+  img {
+    width: 846px;
+  }
+}
+
+.menu {
+  height: 50px;
+  background: rgba(242, 244, 245, 1);
+  width: 100%;
+
+  .menuContent {
+    width: 1100px;
+    margin: auto;
+    display: flex;
+    align-items: center;
+    height: 50px;
+
+    .home {
+      width: 16px;
+      height: 15px;
+      cursor: pointer;
+    }
+
+    .next {
+      width: 18px;
+      height: 18px;
+      margin-left: 1px;
+    }
+
+    span {
+      font-size: 14px;
+      color: rgba(0, 0, 0, 1);
+      margin-left: 1px;
+    }
+  }
+}
+
+.content-item {
+  h1 {
+    text-align: center;
+    font-size: 30px;
+  }
+  hr {
+    width: 32px;
+    height: 4px;
+    background: rgba(21, 168, 170, 1);
+    margin: 60px auto 0;
+    transition: all 0.6s ease-in-out;
+    border: none;
+  }
+
+  .subTitle {
+    font-size: 14px;
+    font-weight: 400;
+    color: rgba(102, 102, 102, 1);
+    line-height: 20px;
+    margin: 14px auto 0;
+    text-align: center;
+  }
+
+  &:hover {
+    hr {
+      width: 100px;
+    }
+  }
+}
+
+.product {
+  width: 1160px;
+  justify-content: space-between;
+  align-items: center;
+  display: flex;
+  flex-wrap: wrap;
+  .product-item {
+    width: 500px;
+    height: 400px;
+    background: rgba(255, 255, 255, 1);
+    box-shadow: 0px 6px 18px 0px rgba(0, 0, 0, 0.08);
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    justify-content: center;
+    transition: all 0.3s ease-in-out;
+    img {
+      width: 190px;
+      -webkit-transition: 1s all;
+      transition: 1s all;
+      -moz-transition: 1s all;
+    }
+
+    h3 {
+      font-size: 25px;
+      font-weight: 300;
+      color: rgba(0, 0, 0, 1);
+      line-height: 36px;
+      margin: 34px 0 15px;
+    }
+    p {
+      font-size: 14px;
+      font-weight: 400;
+      color: rgba(77, 77, 77, 1);
+      line-height: 20px;
+      margin-bottom: 53px;
+    }
+
+    &:hover {
+      box-shadow: 0px 10px 40px 0px rgba(21, 168, 170, 0.26);
+
+      img {
+        -webkit-transform: rotatey(360deg);
+        -moz-transform: rotatey(360deg);
+        transform: rotatey(360deg);
+        -o-transform: rotatey(360deg);
+        -ms-transform: rotatey(360deg);
+      }
+    }
+
+    &:nth-child(n + 3) {
+      margin-top: 60px;
+    }
+  }
+}
+
+.solution {
+  width: 1162px;
+  display: flex;
+  justify-content: space-between;
+
+  .solution-item {
+    width: 268px;
+    height: 380px;
+    overflow: hidden;
+    position: relative;
+    cursor: pointer;
+
+    .solution-img {
+      width: 268px;
+      height: 380px;
+      transition: all ease-in-out 0.3s;
+    }
+
+    .solution-title {
+      position: absolute;
+      left: 0;
+      bottom: 0;
+      width: 100%;
+      height: 60px;
+      background: rgba(21, 168, 170, 0.46);
+      line-height: 60px;
+      font-size: 22px;
+      font-weight: 600;
+      color: rgba(255, 255, 255, 1);
+      text-align: center;
+    }
+
+    .solution-text {
+      width: 204px;
+      height: 0px;
+      background: rgba(0, 76, 77, 0.6);
+      text-align: center;
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      font-size: 14px;
+      font-weight: 600;
+      color: rgba(255, 255, 255, 1);
+      line-height: 20px;
+      position: absolute;
+      bottom: 0;
+      left: 0;
+      padding: 0 32px;
+      overflow: hidden;
+      // transform: translateY(-50%);
+      transition: height ease-in-out 0.3s;
+    }
+
+    &:hover {
+      .solution-img {
+        transform: scale(1.5);
+      }
+      .solution-text {
+        height: 100%;
+      }
+    }
+  }
+}
+
+.tab {
+  display: flex;
+  align-items: center;
+  padding: 20px 0;
+  position: relative;
+  .tab-item {
+    color: #000;
+    line-height: 22px;
+    line-height: 50px;
+    cursor: pointer;
+    min-width: 124px;
+    text-align: center;
+
+    &:not(:last-child):after {
+      content: "|";
+      font-size: 10px;
+      color: #000;
+      float: right;
+    }
+
+    &.active {
+      font-size: 18px;
+      font-weight: bold;
+      color: rgba(21, 168, 170, 1);
+    }
+  }
+
+  .tabLine {
+    width: 32px;
+    height: 4px;
+    background: rgba(21, 168, 170, 1);
+    position: absolute;
+    bottom: 22px;
+    transition: left ease-in-out 0.3s;
+  }
+}
+
+.contact {
+  width: 100%;
+  height: 450px;
+  margin-top: 140px;
+  // background-attachment: fixed;
+  // background-size: 100% 100%;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  flex-direction: column;
+
+  h1 {
+    font-size: 30px;
+    font-weight: 600;
+    color: rgba(255, 255, 255, 1);
+    line-height: 53px;
+  }
+  p {
+    width: 671px;
+    text-align: center;
+    font-size: 14px;
+    font-weight: 400;
+    color: rgba(255, 255, 255, 1);
+    line-height: 20px;
+    margin-top: 30px;
+  }
+}
+
+.case {
+  .swiper-container {
+    width: 1100px;
+  }
+  .swiper-slide {
+  display: flex;
+  flex-wrap: wrap;
+  min-height: 570px;
+
+  .nothing {
+    width: 100%;
+    text-align: center;
+    align-self: center;
+    color: #666;
+    font-size: 24px;
+  }
+}
+}
+
+@keyframes moveEvent {
+  0% {
+    transform: translateX(0);
+  }
+  20% {
+    transform: translateX(-20px);
+  }
+  80% {
+    transform: translateX(20px);
+  }
+  100% {
+    transform: translateX(0);
+  }
+}
+
+.serviceList {
+  width: 794px;
+  display: flex;
+  justify-content: space-between;
+
+  .service-item {
+    img {
+      width: 116px;
+    }
+
+    h3 {
+      font-size: 20px;
+      font-weight: 400;
+      color: rgba(102, 102, 102, 1);
+      line-height: 28px;
+      margin-top: 13px;
+      text-align: center;
+      transition: all ease-in-out 0.3s;
+    }
+
+    &:hover {
+      img {
+        animation: moveEvent 0.3s ease-in-out;
+      }
+      h3 {
+        transform: scale(1.2);
+      }
+    }
+  }
+}
+
+
+
+.procedure {
+  width: 100%;
+  height: 600px;
+  margin-top: 110px;
+
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  img {
+    width: 778px;
+    margin-top: 39px;
+  }
+}
+
+.cooperation {
+  width: 1100px;
+  display: flex;
+  justify-content: space-between;
+  flex-wrap: wrap;
+  .cooperation-item {
+    width: 210px;
+    height: 110px;
+    margin-bottom: 15px;
+    div {
+      width: 210px;
+      height: 110px;
+    }
+  }
+}
+</style>

src/main/zouma/src/pages/CaseDetail.vue

@@ -0,0 +1,213 @@
+<template>
+  <div class="content">
+    <div class="bg topImg" ref="topImg" :style="{backgroundImage:'url('+require('../assets/case/anli_img_00.jpg')+')'}">
+      <img src="../assets/home_text_01.png" alt>
+    </div>
+
+    <div class="menu">
+      <div class="menuContent">
+        <img class="home" src="../assets/case/home.png" alt @click="goNext('/home')">
+        <img class="next" src="../assets/case/icon_into.png" alt>
+        <span @click="goNext('/case')" style="cursor: pointer">案例列表</span>
+        <img class="next" src="../assets/case/icon_into.png" alt>
+        <span>案例详情</span>
+      </div>
+    </div>
+
+    <div class="detailTop">
+      <h1>{{caseInfo.caseName}}</h1>
+      <p>{{caseInfo.remark}}</p>
+    </div>
+
+    <div class="detail" v-html="caseInfo.introduceImage"></div>
+  </div>
+</template>
+
+<script>
+import { TweenMax } from 'gsap/TweenMax'
+import Swiper from 'swiper'
+import CaseItem from '../components/CaseItem.vue'
+export default {
+  name: 'home',
+  mounted() {
+    this.$http.get({
+      url: '/caseInfo/getOne',
+      data: {
+        id: this.$route.query.id
+      }
+    }).then(res => {
+      this.caseInfo = res.data
+    })
+
+
+  },
+  data() {
+    return {
+      caseInfo: {}
+    }
+  },
+  computed: {
+
+  },
+  methods: {
+    goNext(path) {
+      this.$router.push(path)
+    },
+  },
+}
+</script>
+
+<!-- Add "scoped" attribute to limit CSS to this component only -->
+<style lang="less" scoped>
+.content {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+}
+.bg {
+  background-position: center center;
+  background-size: cover;
+  background-repeat: no-repeat;
+}
+.topImg {
+  height: 600px;
+  max-height: 55vh;
+  width: 100%;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+
+  img {
+    width: 846px;
+  }
+}
+
+.menu {
+  height: 50px;
+  background: rgba(242, 244, 245, 1);
+  width: 100%;
+
+  .menuContent {
+    width: 1100px;
+    margin: auto;
+    display: flex;
+    align-items: center;
+    height: 50px;
+
+    .home {
+      width: 16px;
+      height: 15px;
+      cursor: pointer;
+    }
+
+    .next {
+      width: 18px;
+      height: 18px;
+      margin-left: 1px;
+    }
+
+    span {
+      font-size: 14px;
+      color: rgba(0, 0, 0, 1);
+      margin-left: 1px;
+    }
+  }
+}
+
+.detail {
+  width: 1280px;
+  img {
+    display: block;
+    width: 100%;
+  }
+}
+
+@keyframes moveEvent {
+  0% {
+    transform: translateX(0);
+  }
+  20% {
+    transform: translateX(-20px);
+  }
+  80% {
+    transform: translateX(20px);
+  }
+  100% {
+    transform: translateX(0);
+  }
+}
+
+.serviceList {
+  width: 794px;
+  display: flex;
+  justify-content: space-between;
+
+  .service-item {
+    img {
+      width: 116px;
+    }
+
+    h3 {
+      font-size: 20px;
+      font-weight: 400;
+      color: rgba(102, 102, 102, 1);
+      line-height: 28px;
+      margin-top: 13px;
+      text-align: center;
+      transition: all ease-in-out 0.3s;
+    }
+
+    &:hover {
+      img {
+        animation: moveEvent 0.3s ease-in-out;
+      }
+      h3 {
+        transform: scale(1.2);
+      }
+    }
+  }
+}
+
+.procedure {
+  width: 100%;
+  height: 600px;
+  margin-top: 110px;
+
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  img {
+    width: 778px;
+    margin-top: 39px;
+  }
+}
+
+.cooperation {
+  width: 1100px;
+  display: flex;
+  justify-content: space-between;
+  flex-wrap: wrap;
+  .cooperation-item {
+    width: 210px;
+    height: 110px;
+    margin-bottom: 15px;
+    div {
+      width: 210px;
+      height: 110px;
+    }
+  }
+}
+
+.detailTop {
+  width: 840px;
+  padding-top: 60px;
+
+  p {
+    font-size: 15px;
+    font-weight: bold;
+    color: rgba(102, 102, 102, 1);
+    line-height: 28px;
+    padding: 30px 0 40px;
+  }
+}
+</style>

src/main/zouma/src/pages/RapidDevelopment.vue

@@ -0,0 +1,334 @@
+<template>
+  <div class="content">
+    <div class="topImg bg" ref="topImg" :style="{backgroundImage:'url('+require('../assets/rapid/pingtai_img_00.jpg')+')'}">
+      <div class="topLeft">
+        <div class="title">快速开发平台</div>
+        <div class="subTitle">0代码软件快速开发平台，模块化开发</div>
+        <el-button type="primaryMax" plain style="width:200px;margin-top:47px;line-height:30px;">
+          马上获取试用
+          <i class="el-icon-arrow-right el-icon--right"></i>
+        </el-button>
+      </div>
+
+     <div style="width:691px"></div>
+    </div>
+
+    <!-- 用途 -->
+    <div class="content-item">
+      <div class="content-top" style="margin:140px auto 160px;">
+        <h1>软件快速开发平台的用途是什么</h1>
+        <div class="subTitle" style="margin-top:33px">如果您是企业，是否感到找一款真正适合您的现成软件不容易，而定制开发太贵，自己开发又没有专业人才； 如果您是软件公司，是否感到开发人员工资太高，留住人才太难，人才走了，产品完了，就算开发好的产品，个性化修改太累并易导致BUG； 如果您是个人，是否有将自己多年管理经验和突然间的创意变成软件带来收益的冲动，但又苦于不懂编程。其实，你们都需要一款0代码软件快速开发平台，走马智能软件开发平台可以帮助你们解决这一切。走马智能软件开发平台是一款配置型软件快速开发框架，一次开发，同时生成WEB、CS客户端、移动APP客户端、微信端、阿里钉钉。 随着移动互联技术的不断成熟，丰富的营销玩法和互动方式让用户逐渐呈现更多主动性和依赖性，企业与用户的交流也更加便捷。我们通过定制App解决方案帮助企业覆盖更多相关用户场景，持续获得流量增长，实现商业价值的整合转换。</div>
+      </div>
+    </div>
+
+    <div class="use">
+      <div class="use-item" style="margin-top:110px;">
+        <img src="../assets/rapid/pingtai_img_02.png" alt>
+        <div class="text">
+          <div class="title">标准化产品</div>
+          <div class="content">我们提供的应用系统是按标准功能设计的，这是为了适用于不同用户的需求，用户在标准功能基础上根据自己的要求进行修改和扩展。</div>
+        </div>
+      </div>
+
+      <div class="use-item" style="margin-top:137px;">
+        <div class="text">
+          <div class="title">精细化模块</div>
+          <div class="content">每个应用系统力求精细化，对每个管理细节进行深入研究和精心雕琢，追求功能实用性和操作人性化，界面精美简洁，操作简单快捷。</div>
+        </div>
+        <img src="../assets/rapid/pingtai_img_03.png" alt>
+      </div>
+    </div>
+
+    <div class="content-item">
+      <div class="content-top" style="margin:128px auto 60px;">
+        <h1>丰富的应用组件</h1>
+        <div class="subTitle" style="margin-top:33px">组织架构、权限、工作流、报表、快速开发、APP开发、微信组件、即时通讯、访问过滤、单点登录、缓存集群“全能”支撑，稍作组合就可开发出一套软件 如果您是软件公司，是否感到开发人员工资太高，留住人才太难，人才走了，产品完了，就算开发好的产品，个性化修改太累并易导致BUG； 如果您是个人，是否有将自己多年管理经验和突然间的创意变成软件带来收益的冲动，但又苦于不懂编程。其实，你们都需要一款0代码软件快速开发平台，走马智能软件开发平台可以帮助你们解决这一切。走马智能软件开发平台是一款配置型软件快速开发框架，一次开发，同时生成WEB、CS客户端、移动APP客户端、微信端、阿里钉钉。 随着移动互联技术的不断成熟，丰富的营销玩法和互动方式让用户逐渐呈现更多主动性和依赖性，企业与用户的交流也更加便捷。我们通过定制App解决方案帮助企业覆盖更多相关用户场景，持续获得流量增长，实现商业价值的整合转换。</div>
+      </div>
+    </div>
+    <img src="../assets/rapid/pingtai_img_04.png" alt style="width:894px">
+
+    <div class="reason">
+      <div class="title">为什么选择我们</div>
+      <div class="subTitle">零基础和专业开发人员都可轻松驾驭的框架，提供的不仅仅是源代码！ 更具备深入人心的服务，有不会的问题均可联系我们。</div>
+      <img src="../assets/rapid/pingtai_img_05.png" alt>
+    </div>
+
+    <h5 style="margin-top:150px;">各应用系统功能严格依据科学的管理原则进行设计，同时充分考虑了企业的实际情况，理论和实践相结合，以确保每个功能的实用性和易用性。</h5>
+    <img style="width:1079px;margin-top:130px;" src="../assets/rapid/pingtai_img_06.png" alt>
+
+    <h1 style="margin:229px 0 184px">一物一码，价值所在</h1>
+
+    <div class="valueList">
+      <div class="value-item" v-for="item in valueList">
+        <img :src="item.img" alt>
+        <div class="name">{{item.name}}</div>
+        <div class="val">{{item.val}}</div>
+      </div>
+    </div>
+
+    
+    <el-button type="primary" plain style="width:200px;line-height:18px;margin-top:100px">马上获取试用</el-button>
+  </div>
+</template>
+
+<script>
+import { TweenMax } from 'gsap/TweenMax'
+import Swiper from 'swiper'
+export default {
+  name: 'rapidDevelopment',
+  data() {
+    return {
+      valueList: [{
+        img: require('../assets/rapid/pingtai_img_07.png'),
+        name: '傻瓜式开发',
+        val: '平台不用懂编程，不用写代码，只要懂业务就可以开发系统。配置一下即成系统，调用模板、插件或工具便可完成大型企业级系统开发。且一次配置，BS（WEB）、CS（WIN）、APP、微信、钉钉同时生成，五种方式均可以操作。'
+      }, {
+        img: require('../assets/rapid/pingtai_img_08.png'),
+        name: '无限扩展的可能',
+        val: '可轻松插入开发平台自带的各种插件或第三方开发的插件；可轻松集成开发平台自带的各种应用或第三方应用，也可将您现有的系统接入平台；可在平台上二次开发或自定义页面接入，理论上没有开发不了的功能。'
+      }, {
+        img: require('../assets/rapid/pingtai_img_09.png'),
+        name: '支持多种数据库',
+        val: '开发平台开发的系统可接入多个数据库或多类型数据库，每个模块可以是不同数据库。支持SQL Server、MySQL、Oracle、Access、SQLite等。你无需关心不同类型数据库间的语法区别，平台会自动帮你转换。'
+      }, {
+        img: require('../assets/rapid/pingtai_img_10.png'),
+        name: '支持主流浏览器',
+        val: '开发平台兼容目前各种主流浏览器，包括IE(微软浏览器)、Chrome(谷歌浏览器)、Firefox(火狐浏览器)、Safari(苹果浏览器)、Opera，以及国内众多基于IE内核的浏览器，如360、QQ、傲游、世界之窗等。'
+      }, {
+        img: require('../assets/rapid/pingtai_img_11.png'),
+        name: '主流接口随意调用',
+        val: '开发平台集成了多种第三方接口，开发者无需研究啰嗦的第三方接口规则，直接在自己开发的应用中使用。如支付宝支付、微信支付、阿里钉钉、微信企业号、服务号、QQ登录、百度地图等。持续跟进热门接口。'
+      }, {
+        img: require('../assets/rapid/pingtai_img_12.png'),
+        name: '多种硬件轻松接入',
+        val: '通过开发平台内​​置接口可轻松接入各类硬件，无需研究其复杂难懂的原始接口。如PDA、扫描仪、条码枪、读卡器、电子秤、语音盒、网络传真机、短信猫、身份证阅读器、摄像头、麦克风、门禁考勤机、工控设备等。'
+      }]
+    }
+  },
+  methods: {
+    menu(scrollTop) {
+      var allTop = scrollTop + window.innerHeight / 2 + 200
+      if (allTop >= this.$refs.characteristic_0.offsetTop && allTop < this.$refs.characteristic_1.offsetTop) {
+      }
+      else if (allTop >= this.$refs.characteristic_1.offsetTop && allTop < this.$refs.characteristic_2.offsetTop) {
+      }
+      else if (allTop >= this.$refs.characteristic_2.offsetTop) {
+      }
+      else {
+      }
+    }
+  }
+}
+</script>
+
+<!-- Add "scoped" attribute to limit CSS to this component only -->
+<style lang="less" scoped>
+.content-item {
+  h1 {
+    text-align: center;
+    font-size: 30px;
+  }
+  hr {
+    width: 32px;
+    height: 4px;
+    background: rgba(21, 168, 170, 1);
+    margin: 24px auto 0;
+    transition: all 0.6s ease-in-out;
+    border: none;
+  }
+
+  .subTitle {
+    font-size: 14px;
+    font-weight: 400;
+    color: rgba(102, 102, 102, 1);
+    line-height: 20px;
+    margin: 14px auto 0;
+    text-align: center;
+    max-width: 950px;
+  }
+
+  &:hover {
+    hr {
+      width: 100px;
+    }
+  }
+}
+
+h5 {
+  font-size: 20px;
+  color: rgba(0, 0, 0, 1);
+  line-height: 36px;
+  max-width: 704px;
+  text-align: center;
+}
+
+.content {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  width: 100%;
+  overflow: hidden;
+}
+.bg {
+  background-position: center center;
+  background-size: cover;
+  background-repeat: no-repeat;
+}
+.topImg {
+  height: 750px;
+  max-height: 70vh;
+  width: 100%;
+
+  display: flex;
+  align-items: center;
+  justify-content: center;
+
+  .topLeft {
+    margin-right: 11vw;
+
+    .title {
+      font-size: 50px;
+      font-weight: bolder;
+      color: rgba(255, 255, 255, 1);
+      line-height: 70px;
+    }
+
+    .subTitle {
+      font-size: 23px;
+      font-weight: bold;
+      color: rgba(255, 255, 255, 1);
+      line-height: 32px;
+      margin-top: 12px;
+    }
+  }
+
+  img {
+    width: 691px;
+  }
+}
+
+h1 {
+  font-size: 30px;
+  color: rgba(0, 0, 0, 1);
+  line-height: 53px;
+  text-align: center;
+}
+
+.use {
+  width: 100%;
+  height: 886px;
+  background: rgba(250, 250, 250, 1);
+  .use-item {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    img {
+      width: 532px;
+      margin: 0 33px;
+    }
+
+    .text {
+      margin: 0 33px;
+      .title {
+        font-size: 26px;
+        font-weight: bold;
+        color: rgba(21, 168, 170, 1);
+        line-height: 37px;
+      }
+
+      .content {
+        font-size: 14px;
+        color: rgba(0, 0, 0, 1);
+        line-height: 28px;
+        margin-top: 20px;
+        width: 360px;
+      }
+    }
+  }
+}
+
+.reason {
+  width: 100%;
+  height: 593px;
+  background: linear-gradient(
+    90deg,
+    rgba(65, 96, 223, 1) 0%,
+    rgba(73, 31, 199, 1) 100%
+  );
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  margin-top: 127px;
+
+  .title {
+    font-size: 38px;
+    font-weight: bold;
+    color: rgba(255, 255, 255, 1);
+    line-height: 53px;
+    margin-top: 100px;
+  }
+
+  .subTitle {
+    font-size: 14px;
+    color: rgba(255, 255, 255, 1);
+    line-height: 25px;
+    margin-top: 30px;
+  }
+
+  img {
+    width: 1140px;
+    margin-top: 50px;
+  }
+}
+
+.valueList {
+  width: 1060px;
+  display: flex;
+  flex-wrap: wrap;
+  justify-content: space-between;
+  .value-item {
+    width: 500px;
+    height: 350px;
+    background: rgba(255, 255, 255, 1);
+    box-shadow: 0px 6px 18px 0px rgba(0, 0, 0, 0.08);
+    border-radius: 10px;
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    margin-bottom: 60px;
+    transition: all ease-in-out 0.3s;
+    cursor: pointer;
+
+    img {
+      width: 80px;
+      margin-top: 46px;
+      transition: all ease-in-out 0.3s;
+    }
+
+    .name {
+      font-size: 20px;
+      font-weight: bold;
+      color: rgba(0, 0, 0, 1);
+      line-height: 28px;
+      margin-top: 12px;
+    }
+
+    .val {
+      width: 330px;
+      font-size: 14px;
+      color: rgba(0, 0, 0, 1);
+      line-height: 20px;
+      margin-top: 14px;
+      text-align: center;
+    }
+
+    &:hover {
+      box-shadow: 0px 3px 18px 0px rgba(21, 168, 170, 0.4);
+
+      img {
+        transform: scale(1.2);
+      }
+    }
+  }
+}
+</style>

src/main/zouma/src/pages/TraceabilitySystem.vue

@@ -1,6 +1,6 @@
 <template>
   <div class="content">
-    <div class="topImg" ref="topImg">
+    <div class="topImg bg" ref="topImg" :style="{backgroundImage:'url('+require('../assets/TraceabilitySystem/suyuan_img_00.jpg')+')'}">
       <div class="topLeft">
         <div class="title">智慧溯源系统</div>
         <div class="subTitle">解决产品防伪溯源、智慧包装、供应链管理等难题</div>
@@ -9,8 +9,7 @@
           <i class="el-icon-arrow-right el-icon--right"></i>
         </el-button>
       </div>
-
-      <img src="../assets/TraceabilitySystem/suyuan_img_00.png" alt>
+      <div style="width:691px"></div>
     </div>
 
     <!-- 行业 -->
@@ -236,7 +235,7 @@ export default {
     width: 32px;
     height: 4px;
     background: rgba(21, 168, 170, 1);
-    margin:24px auto 0;
+    margin: 24px auto 0;
     transition: all 0.6s ease-in-out;
     border: none;
   }
@@ -273,12 +272,6 @@ export default {
   height: 750px;
   max-height: 70vh;
   width: 100%;
-  background: linear-gradient(
-    270deg,
-    rgba(0, 198, 251, 1) 0%,
-    rgba(42, 99, 177, 1) 100%
-  );
-
   display: flex;
   align-items: center;
   justify-content: center;

src/main/zouma/src/pages/WeChatDevelopment.vue

@@ -0,0 +1,409 @@
+<template>
+  <div class="content">
+    <div class="topImg bg" ref="topImg" :style="{backgroundImage:'url('+require('../assets/weChat/weixin_img_00.jpg')+')'}">
+      <div class="topLeft">
+        <div class="title">微信·小程序开发</div>
+        <div class="subTitle">提供符合行业特点的专业产品设计和微信定制开发服务</div>
+        <el-button type="primaryMax" plain style="width:200px;margin-top:47px;line-height:30px;">
+          马上获取报价
+          <i class="el-icon-arrow-right el-icon--right"></i>
+        </el-button>
+      </div>
+      <div style="width:691px"></div>
+    </div>
+
+    <!-- 品牌 -->
+    <h1 style="margin:128px 0 203px">再小的个体，也有自己的品牌</h1>
+    <div class="brand">
+      <div class="brand-item" v-for="item in brandList">
+        <div class="img">
+          <img :src="item.img" alt>
+        </div>
+        <div class="title">{{item.title}}</div>
+        <hr>
+        <div class="infoList">
+          <div class="info-item" v-for="info in item.infoList">
+            <div class="name">{{info.name}}</div>
+            <div class="val">{{info.val}}</div>
+          </div>
+        </div>
+      </div>
+    </div>
+
+    <!-- 功能 -->
+
+    <div class="function">
+      <div class="title">微信公众平台功能列表</div>
+      <img src="../assets/weChat/weixin_img_05.png" alt>
+    </div>
+
+    <!-- 团队 -->
+    <div class="content-item">
+      <div class="content-top" style="margin:140px auto 80px;">
+        <h1>专业的技术开发团队</h1>
+        <hr>
+        <div class="subTitle">卓越的交互体验设计+完美的视觉呈现+强大的技术研发实力=更多价值</div>
+      </div>
+    </div>
+
+    <img src="../assets/app/img_00001.png" class="team" alt>
+
+    <!-- 案例 -->
+    <div class="content-item">
+      <div class="content-top" style="margin:190px auto 100px;">
+        <h1>案例展示</h1>
+        <hr>
+        <div class="subTitle">做过哪些项目很重要，用心更重要</div>
+      </div>
+    </div>
+    <img src="../assets/app/img_00002.png" alt class="caseImg">
+    <img src="../assets/app/img_00003.png" alt class="caseImg">
+    <img src="../assets/app/img_00004.png" alt class="caseImg">
+    <img src="../assets/app/img_00005.png" alt class="caseImg">
+    <img src="../assets/app/img_00006.png" alt class="caseImg">
+    <img src="../assets/app/img_00007.png" alt class="caseImg">
+    <img src="../assets/app/img_00008.png" alt class="caseImg">
+    <img src="../assets/app/img_00009.png" alt class="caseImg">
+    <img src="../assets/app/img_00010.png" alt class="caseImg">
+    <el-button type="primary" plain style="width:200px;line-height:18px">查看更多详细案例</el-button>
+  </div>
+</template>
+
+<script>
+import { TweenMax } from 'gsap/TweenMax'
+import Swiper from 'swiper'
+export default {
+  name: 'traceabilitySystem',
+  mounted() {
+
+  },
+  data() {
+    return {
+      brandList: [{
+        img: require('../assets/weChat/weixin_img_01.png'),
+        title: '服务号',
+        infoList: [{
+          name: '服务号：',
+          val: '为企业和组织提供更强大的业务服务与用户管理能力，主要偏向服务类交互（功能类似12315，114，银行，提供绑定信息，服务交互的）'
+        }, {
+          name: '适用人群：',
+          val: '媒体、企业、政府或其他组织'
+        }, {
+          name: '群发次数：',
+          val: '服务号1个月（按自然月）内可发送4条群发消息'
+        }]
+      }, {
+        img: require('../assets/weChat/weixin_img_02.png'),
+        title: '订阅号',
+        infoList: [{
+          name: '订阅号：',
+          val: '为媒体和个人提供一种新的信息传播方式，主要功能是在微信侧给用户传达资讯；（功能类似报纸杂志，提供新闻信息或娱乐趣事）'
+        }, {
+          name: '适用人群：',
+          val: '个人、媒体、企业、政府或其他组织'
+        }, {
+          name: '群发次数：',
+          val: '订阅号（认证用户、非认证用户）1天内可群发1条消息'
+        }]
+      }, {
+        img: require('../assets/weChat/weixin_img_03.png'),
+        title: '小程序',
+        infoList: [{
+          name: '小程序：',
+          val: '小程序是一种新的开放能力，开发者可以快速地开发一个小程序。小程序可以在微信内被便捷地获取和传播，同时具有出色的使用体验'
+        }, {
+          name: '适用人群：',
+          val: '个人、媒体、企业、政府或其他组织'
+        }, {
+          name: '应用特色：',
+          val: '媲美APP，用户体验佳、海量生态入口，流量互导、核心功能齐全'
+        }]
+      }, {
+        img: require('../assets/weChat/weixin_img_04.png'),
+        title: '企业微信',
+        infoList: [{
+          name: '企业微信：',
+          val: '企业的专业办公管理工具。支持用企业微信添加客户微信，帮助企业实现统一管理客户关系，并与微信支付、小程序等互通'
+        }, {
+          name: '适用人群：',
+          val: '媒体、企业、政府或其他组织'
+        }, {
+          name: '应用特色：',
+          val: '客户联系、灵活审批、智能打卡、第三方应用'
+        }]
+      }]
+    }
+  },
+  methods: {
+    menu(scrollTop) {
+      var allTop = scrollTop + window.innerHeight / 2 + 200
+      if (allTop >= this.$refs.characteristic_0.offsetTop && allTop < this.$refs.characteristic_1.offsetTop) {
+      }
+      else if (allTop >= this.$refs.characteristic_1.offsetTop && allTop < this.$refs.characteristic_2.offsetTop) {
+      }
+      else if (allTop >= this.$refs.characteristic_2.offsetTop) {
+      }
+      else {
+      }
+    }
+  }
+}
+</script>
+
+<!-- Add "scoped" attribute to limit CSS to this component only -->
+<style lang="less" scoped>
+.content-item {
+  h1 {
+    text-align: center;
+    font-size: 30px;
+  }
+  hr {
+    width: 32px;
+    height: 4px;
+    background: rgba(21, 168, 170, 1);
+    margin: 24px auto 0;
+    transition: all 0.6s ease-in-out;
+    border: none;
+  }
+
+  .subTitle {
+    font-size: 14px;
+    font-weight: 400;
+    color: rgba(102, 102, 102, 1);
+    line-height: 20px;
+    margin: 14px auto 0;
+    text-align: center;
+    max-width: 950px;
+  }
+
+  &:hover {
+    hr {
+      width: 100px;
+    }
+  }
+}
+
+.content {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  width: 100%;
+  overflow: hidden;
+}
+.bg {
+  background-position: center center;
+  background-size: cover;
+  background-repeat: no-repeat;
+}
+.topImg {
+  height: 750px;
+  max-height: 70vh;
+  width: 100%;
+
+  display: flex;
+  align-items: center;
+  justify-content: center;
+
+  .topLeft {
+    margin-right: 11vw;
+
+    .title {
+      font-size: 50px;
+      font-weight: bolder;
+      color: rgba(255, 255, 255, 1);
+      line-height: 70px;
+    }
+
+    .subTitle {
+      font-size: 23px;
+      font-weight: bold;
+      color: rgba(255, 255, 255, 1);
+      line-height: 32px;
+      margin-top: 12px;
+    }
+  }
+
+  img {
+    width: 691px;
+  }
+}
+
+h1 {
+  font-size: 30px;
+  color: rgba(0, 0, 0, 1);
+  line-height: 53px;
+  text-align: center;
+}
+
+.brand {
+  width: 1130px;
+  display: flex;
+  flex-wrap: wrap;
+  justify-content: space-between;
+  .brand-item {
+    width: 490px;
+    height: 252px;
+    background: rgba(255, 255, 255, 1);
+    box-shadow: 0px 10px 20px 0px rgba(0, 0, 0, 0.06);
+    position: relative;
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    padding: 0 30px;
+    margin-bottom: 93px;
+    cursor: pointer;
+    transition: all ease-in-out 0.6s;
+
+    .img {
+      width: 80px;
+      height: 80px;
+      background: rgba(255, 255, 255, 1);
+      box-shadow: 0px -10px 20px 0px rgba(0, 0, 0, 0.06);
+      position: absolute;
+      top: -50px;
+      left: 50%;
+      transform: translateX(-50%);
+      padding: 10px;
+      border-radius: 100%;
+      img {
+        width: 80px;
+      }
+    }
+
+    .title {
+      font-size: 22px;
+      font-weight: bolder;
+      color: rgba(0, 0, 0, 1);
+      line-height: 30px;
+      margin-top: 68px;
+    }
+
+    hr {
+      width: 20px;
+      height: 2px;
+      background: rgba(153, 153, 153, 1);
+      border: none;
+      margin-top: 23px;
+      transition: all ease-in-out 0.3s;
+    }
+
+    .infoList {
+      margin-top: 20px;
+
+      .info-item {
+        display: flex;
+        align-items: flex-start;
+        font-size: 13px;
+        color: rgba(102, 102, 102, 1);
+        line-height: 18px;
+        margin-bottom: 10px;
+        .name {
+          min-width: 65px;
+        }
+      }
+    }
+
+    &:hover {
+      box-shadow: 0px 6px 18px 0px rgba(21, 168, 170, 0.5);
+
+      hr {
+        width: 40px;
+        background-color: rgba(21, 168, 170, 1);
+      }
+    }
+  }
+}
+
+.achieve {
+  background: linear-gradient(
+    -360deg,
+    rgba(0, 102, 236, 1) 0%,
+    rgba(20, 146, 206, 1) 100%
+  );
+  width: 100%;
+  height: 880px;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  position: relative;
+
+  .title {
+    font-size: 38px;
+    font-weight: bolder;
+    color: rgba(255, 255, 255, 1);
+    line-height: 53px;
+    padding: 100px 0 98px;
+  }
+
+  img {
+    width: 442px;
+    height: 549px;
+  }
+
+  .achieve-item {
+    position: absolute;
+
+    &.left {
+      right: 50%;
+      transform: translateX(-231px);
+      text-align: right;
+    }
+
+    &.right {
+      left: 50%;
+      transform: translateX(231px);
+    }
+
+    .title {
+      font-size: 22px;
+      font-weight: bolder;
+      color: rgba(255, 255, 255, 1);
+      line-height: 30px;
+      padding: 0;
+    }
+
+    .subTitle {
+      font-size: 15px;
+      color: rgba(255, 255, 255, 1);
+      line-height: 21px;
+      margin-top: 15px;
+      max-width: 320px;
+    }
+  }
+}
+
+.team {
+  width: 1140px;
+}
+
+.caseImg {
+  width: 1090px;
+  margin-bottom: 56px;
+}
+
+.function {
+  width: 100%;
+  height: 647px;
+  background: linear-gradient(
+    270deg,
+    rgba(145, 71, 212, 1) 0%,
+    rgba(118, 43, 246, 1) 100%
+  );
+  display: flex;
+  align-items: center;
+  flex-direction: column;
+
+  .title {
+    font-size: 38px;
+    font-weight: bold;
+    color: rgba(255, 255, 255, 1);
+    line-height: 53px;
+    margin: 100px 0 70px;
+  }
+
+  img {
+    width: 780px;
+    height: 324px;
+  }
+}
+</style>

src/main/zouma/src/router/index.js

@@ -33,6 +33,46 @@ const router = new Router({
             meta: {
                 title: 'App开发',
             }
+        }, {
+            path: "/weChatDevelopment",
+            name: "weChatDevelopment",
+            component: resolve => require(["../pages/WeChatDevelopment"], resolve),
+            meta: {
+                title: '微信开发',
+
+            }
+        }, {
+            path: "/rapidDevelopment",
+            name: "rapidDevelopment",
+            component: resolve => require(["../pages/RapidDevelopment"], resolve),
+            meta: {
+                title: '快速开发平台',
+
+            }
+        }, {
+            path: "/about",
+            name: "about",
+            component: resolve => require(["../pages/About"], resolve),
+            meta: {
+                title: '关于我们',
+
+            }
+        }, {
+            path: "/case",
+            name: "case",
+            component: resolve => require(["../pages/Case"], resolve),
+            meta: {
+                title: '案例展示',
+
+            }
+        }, {
+            path: "/caseDetail",
+            name: "caseDetail",
+            component: resolve => require(["../pages/CaseDetail"], resolve),
+            meta: {
+                title: '案例详情',
+
+            }
         }]
     }]
 })

src/main/zouma/src/store/index.js

@@ -1,14 +1,27 @@
 import Vue from 'vue'
 import Vuex from 'vuex'
 
-Vue.use(Vuex)
-
+Vue.use(Vuex);
 
 export default new Vuex.Store({
     state: {
-
+        tableHeight: 0,
+        fetchingData: false,
+        userInfo: null,
+        clientWidth: 0
     },
     mutations: {
-
-    }
-})
+        updateTableHeight(state, height) {
+            state.tableHeight = height;
+        },
+        updateFetchingData(state, fetchingData) {
+            state.fetchingData = fetchingData
+        },
+        updateUserInfo(state, userInfo) {
+            state.userInfo = userInfo
+        },
+        updateClientWidth(state, width) {
+            state.clientWidth = width
+        }
+    },
+});