重构版备份1

pc/build/webpack.dev.conf.js

@@ -46,7 +46,7 @@ const devWebpackConfig = merge(baseWebpackConfig, {
     },
     proxy: {
       '/api': {
-        target: 'https://www.4dkankan.com',
+        target: 'https://test.4dkankan.com',
         changeOrigin: true,
       }
     }

pc/config/index.js

@@ -23,7 +23,7 @@ module.exports = {
     // Use Eslint Loader?
     // If true, your code will be linted during bundling and
     // linting errors and warnings will be shown in the console.
-    useEslint: true,
+    useEslint: false,
     // If true, eslint errors and warnings will also be shown in the error overlay
     // in the browser.
     showEslintErrorsInOverlay: false,

pc/package-lock.json

@@ -752,6 +752,13 @@
       "integrity": "sha1-iYUI2iIm84DfkEcoRWhJwVAaSw0=",
       "dev": true
     },
+    "asap": {
+      "version": "2.0.6",
+      "resolved": "https://registry.npm.taobao.org/asap/download/asap-2.0.6.tgz",
+      "integrity": "sha1-5QNHYR1+aQlDIIu9r+vLwvuGbUY=",
+      "dev": true,
+      "optional": true
+    },
     "asn1": {
       "version": "0.2.4",
       "resolved": "http://registry.npm.taobao.org/asn1/download/asn1-0.2.4.tgz",
@@ -4627,6 +4634,21 @@
         }
       }
     },
+    "dom7": {
+      "version": "2.1.5",
+      "resolved": "https://registry.npm.taobao.org/dom7/download/dom7-2.1.5.tgz?cache=0&sync_timestamp=1594656069232&other_urls=https%3A%2F%2Fregistry.npm.taobao.org%2Fdom7%2Fdownload%2Fdom7-2.1.5.tgz",
+      "integrity": "sha1-p5QRAXgAsx2EAAcM2uu/ySwfY3c=",
+      "requires": {
+        "ssr-window": "^2.0.0"
+      },
+      "dependencies": {
+        "ssr-window": {
+          "version": "2.0.0",
+          "resolved": "https://registry.npm.taobao.org/ssr-window/download/ssr-window-2.0.0.tgz",
+          "integrity": "sha1-mMMBrvmVIzF/jWlhjwAQeRCW78Q="
+        }
+      }
+    },
     "domain-browser": {
       "version": "1.2.0",
       "resolved": "http://registry.npm.taobao.org/domain-browser/download/domain-browser-1.2.0.tgz",
@@ -7636,6 +7658,13 @@
       "integrity": "sha1-Cpf7h2mG6AgcYxFg+PnziRV/AEM=",
       "dev": true
     },
+    "image-size": {
+      "version": "0.5.5",
+      "resolved": "https://registry.npm.taobao.org/image-size/download/image-size-0.5.5.tgz",
+      "integrity": "sha1-Cd/Uq50g4p6xw+gLiZA3jfnjy5w=",
+      "dev": true,
+      "optional": true
+    },
     "import-cwd": {
       "version": "2.1.0",
       "resolved": "https://registry.npm.taobao.org/import-cwd/download/import-cwd-2.1.0.tgz",
@@ -8927,6 +8956,75 @@
       "integrity": "sha1-W4o6d2Xf4AEmHd6RVYnngvjJTR4=",
       "dev": true
     },
+    "less": {
+      "version": "3.11.3",
+      "resolved": "https://registry.npm.taobao.org/less/download/less-3.11.3.tgz",
+      "integrity": "sha1-LYU5VPz+AWmor4aWILyqFlY9zBw=",
+      "dev": true,
+      "requires": {
+        "clone": "^2.1.2",
+        "errno": "^0.1.1",
+        "graceful-fs": "^4.1.2",
+        "image-size": "~0.5.0",
+        "make-dir": "^2.1.0",
+        "mime": "^1.4.1",
+        "promise": "^7.1.1",
+        "request": "^2.83.0",
+        "source-map": "~0.6.0",
+        "tslib": "^1.10.0"
+      },
+      "dependencies": {
+        "clone": {
+          "version": "2.1.2",
+          "resolved": "https://registry.npm.taobao.org/clone/download/clone-2.1.2.tgz",
+          "integrity": "sha1-G39Ln1kfHo+DZwQBYANFoCiHQ18=",
+          "dev": true
+        },
+        "make-dir": {
+          "version": "2.1.0",
+          "resolved": "https://registry.npm.taobao.org/make-dir/download/make-dir-2.1.0.tgz?cache=0&sync_timestamp=1587567572251&other_urls=https%3A%2F%2Fregistry.npm.taobao.org%2Fmake-dir%2Fdownload%2Fmake-dir-2.1.0.tgz",
+          "integrity": "sha1-XwMQ4YuL6JjMBwCSlaMK5B6R5vU=",
+          "dev": true,
+          "optional": true,
+          "requires": {
+            "pify": "^4.0.1",
+            "semver": "^5.6.0"
+          }
+        },
+        "pify": {
+          "version": "4.0.1",
+          "resolved": "https://registry.npm.taobao.org/pify/download/pify-4.0.1.tgz",
+          "integrity": "sha1-SyzSXFDVmHNcUCkiJP2MbfQeMjE=",
+          "dev": true,
+          "optional": true
+        }
+      }
+    },
+    "less-loader": {
+      "version": "4.1.0",
+      "resolved": "https://registry.npm.taobao.org/less-loader/download/less-loader-4.1.0.tgz?cache=0&sync_timestamp=1593787670620&other_urls=https%3A%2F%2Fregistry.npm.taobao.org%2Fless-loader%2Fdownload%2Fless-loader-4.1.0.tgz",
+      "integrity": "sha1-LBNSxbCaT4QQFJAnT9UWdN5BNj4=",
+      "dev": true,
+      "requires": {
+        "clone": "^2.1.1",
+        "loader-utils": "^1.1.0",
+        "pify": "^3.0.0"
+      },
+      "dependencies": {
+        "clone": {
+          "version": "2.1.2",
+          "resolved": "https://registry.npm.taobao.org/clone/download/clone-2.1.2.tgz",
+          "integrity": "sha1-G39Ln1kfHo+DZwQBYANFoCiHQ18=",
+          "dev": true
+        },
+        "pify": {
+          "version": "3.0.0",
+          "resolved": "https://registry.npm.taobao.org/pify/download/pify-3.0.0.tgz",
+          "integrity": "sha1-5aSs0sEB/fPZpNB/DbxNtJ3SgXY=",
+          "dev": true
+        }
+      }
+    },
     "leven": {
       "version": "2.1.0",
       "resolved": "https://registry.npm.taobao.org/leven/download/leven-2.1.0.tgz",
@@ -13142,6 +13240,16 @@
       "integrity": "sha1-foz42PW48jnBvGi+tOt4Vn1XLvg=",
       "dev": true
     },
+    "promise": {
+      "version": "7.3.1",
+      "resolved": "https://registry.npm.taobao.org/promise/download/promise-7.3.1.tgz",
+      "integrity": "sha1-BktyYCsY+Q8pGSuLG8QY/9Hr078=",
+      "dev": true,
+      "optional": true,
+      "requires": {
+        "asap": "~2.0.3"
+      }
+    },
     "promise-inflight": {
       "version": "1.0.1",
       "resolved": "http://registry.npm.taobao.org/promise-inflight/download/promise-inflight-1.0.1.tgz",
@@ -15379,6 +15487,11 @@
         "tweetnacl": "~0.14.0"
       }
     },
+    "ssr-window": {
+      "version": "1.0.1",
+      "resolved": "https://registry.npm.taobao.org/ssr-window/download/ssr-window-1.0.1.tgz",
+      "integrity": "sha1-MHUqakZm53Z/C35qpvwv29DZs2k="
+    },
     "ssri": {
       "version": "5.3.0",
       "resolved": "https://registry.npm.taobao.org/ssri/download/ssri-5.3.0.tgz?cache=0&sync_timestamp=1569877716166&other_urls=https%3A%2F%2Fregistry.npm.taobao.org%2Fssri%2Fdownload%2Fssri-5.3.0.tgz",
@@ -15700,6 +15813,15 @@
         "whet.extend": "~0.9.9"
       }
     },
+    "swiper": {
+      "version": "5.3.6",
+      "resolved": "https://registry.npm.taobao.org/swiper/download/swiper-5.3.6.tgz",
+      "integrity": "sha1-ECt/gUXXNOxMMOBGAhYDgjVrWUg=",
+      "requires": {
+        "dom7": "^2.1.3",
+        "ssr-window": "^1.0.1"
+      }
+    },
     "symbol-tree": {
       "version": "3.2.4",
       "resolved": "https://registry.npm.taobao.org/symbol-tree/download/symbol-tree-3.2.4.tgz",
@@ -16024,6 +16146,12 @@
         }
       }
     },
+    "tslib": {
+      "version": "1.13.0",
+      "resolved": "https://registry.npm.taobao.org/tslib/download/tslib-1.13.0.tgz?cache=0&sync_timestamp=1589411820927&other_urls=https%3A%2F%2Fregistry.npm.taobao.org%2Ftslib%2Fdownload%2Ftslib-1.13.0.tgz",
+      "integrity": "sha1-yIHhPMcBWJTtkUhi0nZDb6mkcEM=",
+      "dev": true
+    },
     "tty-browserify": {
       "version": "0.0.0",
       "resolved": "http://registry.npm.taobao.org/tty-browserify/download/tty-browserify-0.0.0.tgz",
@@ -16431,6 +16559,11 @@
       "resolved": "http://registry.npm.taobao.org/vue/download/vue-2.6.10.tgz?cache=0&other_urls=http%3A%2F%2Fregistry.npm.taobao.org%2Fvue%2Fdownload%2Fvue-2.6.10.tgz",
       "integrity": "sha1-pysaQqTYKnIepDjRtr9V5mGVxjc="
     },
+    "vue-awesome-swiper": {
+      "version": "4.1.1",
+      "resolved": "https://registry.npm.taobao.org/vue-awesome-swiper/download/vue-awesome-swiper-4.1.1.tgz",
+      "integrity": "sha1-j3qyIa0AMCHXVrhqphj0KZJJAP4="
+    },
     "vue-eslint-parser": {
       "version": "2.0.3",
       "resolved": "https://registry.npm.taobao.org/vue-eslint-parser/download/vue-eslint-parser-2.0.3.tgz",
@@ -16451,6 +16584,11 @@
       "integrity": "sha1-UylVzB6yCKPZkLOp+acFdGV+CPI=",
       "dev": true
     },
+    "vue-i18n": {
+      "version": "8.18.2",
+      "resolved": "https://registry.npm.taobao.org/vue-i18n/download/vue-i18n-8.18.2.tgz?cache=0&sync_timestamp=1593249467120&other_urls=https%3A%2F%2Fregistry.npm.taobao.org%2Fvue-i18n%2Fdownload%2Fvue-i18n-8.18.2.tgz",
+      "integrity": "sha1-zXwS8uF45vqiOw48/S97rJMF+Pw="
+    },
     "vue-jest": {
       "version": "1.4.0",
       "resolved": "https://registry.npm.taobao.org/vue-jest/download/vue-jest-1.4.0.tgz",

pc/package.json

@@ -23,7 +23,10 @@
     "luxy.js": "^0.1.0",
     "three": "^0.102.1",
     "vue": "^2.5.2",
-    "vue-router": "^3.0.1"
+    "vue-awesome-swiper": "^4.1.1",
+    "vue-i18n": "^8.18.2",
+    "vue-router": "^3.0.1",
+    "swiper": "5.3.6"
   },
   "devDependencies": {
     "autoprefixer": "^7.1.2",
@@ -61,6 +64,8 @@
     "html-webpack-plugin": "^2.30.1",
     "jest": "^22.0.4",
     "jest-serializer-vue": "^0.3.0",
+    "less": "^3.9.0",
+    "less-loader": "^4.1.0",
     "nightwatch": "^0.9.12",
     "node-notifier": "^5.1.2",
     "node-sass": "^4.10.0",

pc/src/App.vue

@@ -1,17 +1,6 @@
 <template>
   <div id="app" :style="{transform:scale!==1 && gre150? `scale(${scale})`:'none','paddingTop':deviceLogin?'0px':'80px'}">
-    <browseVideo v-if="showVideo" :url="showVideo.url"/>
-    <div class="big-nav" :class="{'hidden-nav':deviceLogin}">
-      <iheader>
-        <inavs slot-scope="{cp}" :cp="cp" />
-      </iheader>
-    </div>
-    <div class="mask" :class="{active: showMask}" :style="{zIndex: maskZIndex}"></div>
-    <iaside :active="showLogin" :cp='asideCp'/>
-    <ichat />
     <router-view />
-    <ifooter v-if="$route.name!=='about'" />
-    <ileft />
   </div>
 </template>
 

pc/src/apis/index.js

@@ -0,0 +1,7 @@
+import axios from '@/util/http'
+
+export default {
+  saveAduit (data) {
+    return axios.post('agentAduit/save')
+  }
+}

pc/src/assets/font/iconfont.json

@@ -0,0 +1,688 @@
+{
+  "id": "941679",
+  "name": "四维看看官网",
+  "font_family": "iconfont",
+  "css_prefix_text": "icon-",
+  "description": "",
+  "glyphs": [
+    {
+      "icon_id": "15926961",
+      "name": "case_hot",
+      "font_class": "case_hot",
+      "unicode": "e704",
+      "unicode_decimal": 59140
+    },
+    {
+      "icon_id": "15926962",
+      "name": "case_recommend",
+      "font_class": "case_recommend",
+      "unicode": "e705",
+      "unicode_decimal": 59141
+    },
+    {
+      "icon_id": "15926963",
+      "name": "case_new",
+      "font_class": "case_new",
+      "unicode": "e706",
+      "unicode_decimal": 59142
+    },
+    {
+      "icon_id": "13556696",
+      "name": "视频教学",
+      "font_class": "teaching",
+      "unicode": "e6bb",
+      "unicode_decimal": 59067
+    },
+    {
+      "icon_id": "13511619",
+      "name": "ctmservice",
+      "font_class": "ctmservice",
+      "unicode": "e6ba",
+      "unicode_decimal": 59066
+    },
+    {
+      "icon_id": "12688160",
+      "name": "6month",
+      "font_class": "month2",
+      "unicode": "e6ad",
+      "unicode_decimal": 59053
+    },
+    {
+      "icon_id": "12688156",
+      "name": "3month",
+      "font_class": "month1",
+      "unicode": "e6ac",
+      "unicode_decimal": 59052
+    },
+    {
+      "icon_id": "12611097",
+      "name": "year",
+      "font_class": "year",
+      "unicode": "e6ab",
+      "unicode_decimal": 59051
+    },
+    {
+      "icon_id": "12611093",
+      "name": "month",
+      "font_class": "month",
+      "unicode": "e6a9",
+      "unicode_decimal": 59049
+    },
+    {
+      "icon_id": "12526908",
+      "name": "vas",
+      "font_class": "vas",
+      "unicode": "e6a8",
+      "unicode_decimal": 59048
+    },
+    {
+      "icon_id": "12505452",
+      "name": "home",
+      "font_class": "home",
+      "unicode": "e6a7",
+      "unicode_decimal": 59047
+    },
+    {
+      "icon_id": "12465577",
+      "name": "edit",
+      "font_class": "edit",
+      "unicode": "e6a6",
+      "unicode_decimal": 59046
+    },
+    {
+      "icon_id": "12465573",
+      "name": "choice",
+      "font_class": "choice",
+      "unicode": "e6a5",
+      "unicode_decimal": 59045
+    },
+    {
+      "icon_id": "12294532",
+      "name": "cloud",
+      "font_class": "cloud",
+      "unicode": "e698",
+      "unicode_decimal": 59032
+    },
+    {
+      "icon_id": "12041843",
+      "name": "全部",
+      "font_class": "all",
+      "unicode": "e696",
+      "unicode_decimal": 59030
+    },
+    {
+      "icon_id": "11995521",
+      "name": "_eye",
+      "font_class": "eye",
+      "unicode": "e694",
+      "unicode_decimal": 59028
+    },
+    {
+      "icon_id": "11183830",
+      "name": "forbid",
+      "font_class": "forbid",
+      "unicode": "e677",
+      "unicode_decimal": 58999
+    },
+    {
+      "icon_id": "11174574",
+      "name": "close",
+      "font_class": "close",
+      "unicode": "e676",
+      "unicode_decimal": 58998
+    },
+    {
+      "icon_id": "10833389",
+      "name": "发展机会",
+      "font_class": "fazhanjihui",
+      "unicode": "e675",
+      "unicode_decimal": 58997
+    },
+    {
+      "icon_id": "10833379",
+      "name": "店面布置",
+      "font_class": "dianmianbuzhi",
+      "unicode": "e674",
+      "unicode_decimal": 58996
+    },
+    {
+      "icon_id": "10833378",
+      "name": "宣传资料",
+      "font_class": "xuanchuanziliao",
+      "unicode": "e673",
+      "unicode_decimal": 58995
+    },
+    {
+      "icon_id": "10833343",
+      "name": "专属客服",
+      "font_class": "zhuanshukefu",
+      "unicode": "e672",
+      "unicode_decimal": 58994
+    },
+    {
+      "icon_id": "10833209",
+      "name": "利润分成",
+      "font_class": "lirunfencheng",
+      "unicode": "e671",
+      "unicode_decimal": 58993
+    },
+    {
+      "icon_id": "10832268",
+      "name": "经销商",
+      "font_class": "jingxiaoshang",
+      "unicode": "e670",
+      "unicode_decimal": 58992
+    },
+    {
+      "icon_id": "10615309",
+      "name": "保修条款",
+      "font_class": "baoxiutiaokuan",
+      "unicode": "e66f",
+      "unicode_decimal": 58991
+    },
+    {
+      "icon_id": "8145817",
+      "name": "箭头",
+      "font_class": "jiantou",
+      "unicode": "e66e",
+      "unicode_decimal": 58990
+    },
+    {
+      "icon_id": "9415385",
+      "name": "vip_false",
+      "font_class": "vip_false",
+      "unicode": "e66b",
+      "unicode_decimal": 58987
+    },
+    {
+      "icon_id": "9415386",
+      "name": "vip_true",
+      "font_class": "vip_true",
+      "unicode": "e66d",
+      "unicode_decimal": 58989
+    },
+    {
+      "icon_id": "9257936",
+      "name": "减号",
+      "font_class": "jianhao",
+      "unicode": "e66a",
+      "unicode_decimal": 58986
+    },
+    {
+      "icon_id": "9257935",
+      "name": "加号",
+      "font_class": "jiahao",
+      "unicode": "e669",
+      "unicode_decimal": 58985
+    },
+    {
+      "icon_id": "9136252",
+      "name": "与",
+      "font_class": "and",
+      "unicode": "e668",
+      "unicode_decimal": 58984
+    },
+    {
+      "icon_id": "9134512",
+      "name": "shoppingcart",
+      "font_class": "cart",
+      "unicode": "e667",
+      "unicode_decimal": 58983
+    },
+    {
+      "icon_id": "8912308",
+      "name": "liulan",
+      "font_class": "liulan",
+      "unicode": "e666",
+      "unicode_decimal": 58982
+    },
+    {
+      "icon_id": "8912305",
+      "name": "bianji",
+      "font_class": "bianji",
+      "unicode": "e665",
+      "unicode_decimal": 58981
+    },
+    {
+      "icon_id": "8912303",
+      "name": "dianlang",
+      "font_class": "dianlang",
+      "unicode": "e664",
+      "unicode_decimal": 58980
+    },
+    {
+      "icon_id": "8912299",
+      "name": "3d",
+      "font_class": "3d",
+      "unicode": "e663",
+      "unicode_decimal": 58979
+    },
+    {
+      "icon_id": "8912298",
+      "name": "sfm",
+      "font_class": "sfm",
+      "unicode": "e662",
+      "unicode_decimal": 58978
+    },
+    {
+      "icon_id": "8912296",
+      "name": "qiumu",
+      "font_class": "qiumu",
+      "unicode": "e661",
+      "unicode_decimal": 58977
+    },
+    {
+      "icon_id": "8912294",
+      "name": "haisi",
+      "font_class": "haisi",
+      "unicode": "e660",
+      "unicode_decimal": 58976
+    },
+    {
+      "icon_id": "8912288",
+      "name": "sony",
+      "font_class": "sony",
+      "unicode": "e65f",
+      "unicode_decimal": 58975
+    },
+    {
+      "icon_id": "8780208",
+      "name": "kaiguan1",
+      "font_class": "kaiguan1",
+      "unicode": "e65e",
+      "unicode_decimal": 58974
+    },
+    {
+      "icon_id": "8780206",
+      "name": "kaiguan",
+      "font_class": "kaiguan",
+      "unicode": "e65d",
+      "unicode_decimal": 58973
+    },
+    {
+      "icon_id": "8779276",
+      "name": "使用手册",
+      "font_class": "ser_manual",
+      "unicode": "e652",
+      "unicode_decimal": 58962
+    },
+    {
+      "icon_id": "8732896",
+      "name": "shang",
+      "font_class": "shang",
+      "unicode": "e65c",
+      "unicode_decimal": 58972
+    },
+    {
+      "icon_id": "8732895",
+      "name": "xia",
+      "font_class": "xia",
+      "unicode": "e65b",
+      "unicode_decimal": 58971
+    },
+    {
+      "icon_id": "8725927",
+      "name": "yuandian",
+      "font_class": "yuandian",
+      "unicode": "e65a",
+      "unicode_decimal": 58970
+    },
+    {
+      "icon_id": "8436649",
+      "name": "8-sanwei",
+      "font_class": "-sanwei",
+      "unicode": "e601",
+      "unicode_decimal": 58881
+    },
+    {
+      "icon_id": "8479931",
+      "name": "1",
+      "font_class": "icon-test",
+      "unicode": "e649",
+      "unicode_decimal": 58953
+    },
+    {
+      "icon_id": "8479933",
+      "name": "2",
+      "font_class": "icon-test1",
+      "unicode": "e64a",
+      "unicode_decimal": 58954
+    },
+    {
+      "icon_id": "8479934",
+      "name": "3",
+      "font_class": "icon-test2",
+      "unicode": "e608",
+      "unicode_decimal": 58888
+    },
+    {
+      "icon_id": "8479935",
+      "name": "4",
+      "font_class": "icon-test3",
+      "unicode": "e64c",
+      "unicode_decimal": 58956
+    },
+    {
+      "icon_id": "8479936",
+      "name": "5",
+      "font_class": "icon-test4",
+      "unicode": "e64d",
+      "unicode_decimal": 58957
+    },
+    {
+      "icon_id": "8498457",
+      "name": "lianxi",
+      "font_class": "lianxi",
+      "unicode": "e64e",
+      "unicode_decimal": 58958
+    },
+    {
+      "icon_id": "8498471",
+      "name": "kehu",
+      "font_class": "kehu",
+      "unicode": "e650",
+      "unicode_decimal": 58960
+    },
+    {
+      "icon_id": "8509042",
+      "name": "meiti",
+      "font_class": "meiti",
+      "unicode": "e653",
+      "unicode_decimal": 58963
+    },
+    {
+      "icon_id": "8527404",
+      "name": "yewu",
+      "font_class": "yewu",
+      "unicode": "e654",
+      "unicode_decimal": 58964
+    },
+    {
+      "icon_id": "8623739",
+      "name": "8-xuanzhe",
+      "font_class": "-xuanzhe-copy",
+      "unicode": "e655",
+      "unicode_decimal": 58965
+    },
+    {
+      "icon_id": "8624521",
+      "name": "8-xuanzhe",
+      "font_class": "-xuanzhe-copy-copy",
+      "unicode": "e656",
+      "unicode_decimal": 58966
+    },
+    {
+      "icon_id": "8633025",
+      "name": "zuo",
+      "font_class": "zuo",
+      "unicode": "e657",
+      "unicode_decimal": 58967
+    },
+    {
+      "icon_id": "8633026",
+      "name": "you",
+      "font_class": "you",
+      "unicode": "e659",
+      "unicode_decimal": 58969
+    },
+    {
+      "icon_id": "8640242",
+      "name": "8-renren",
+      "font_class": "-renren",
+      "unicode": "e64f",
+      "unicode_decimal": 58959
+    },
+    {
+      "icon_id": "8640245",
+      "name": "8-AI",
+      "font_class": "-AI",
+      "unicode": "e651",
+      "unicode_decimal": 58961
+    },
+    {
+      "icon_id": "8673168",
+      "name": "空间定位",
+      "font_class": "tech_space_location",
+      "unicode": "e648",
+      "unicode_decimal": 58952
+    },
+    {
+      "icon_id": "8673166",
+      "name": "空间建模",
+      "font_class": "tech_space_modeling",
+      "unicode": "e646",
+      "unicode_decimal": 58950
+    },
+    {
+      "icon_id": "8673071",
+      "name": "空间展示",
+      "font_class": "tech_space_display",
+      "unicode": "e645",
+      "unicode_decimal": 58949
+    },
+    {
+      "icon_id": "8433722",
+      "name": "使用教程",
+      "font_class": "tutorial",
+      "unicode": "e642",
+      "unicode_decimal": 58946
+    },
+    {
+      "icon_id": "8433683",
+      "name": "服务条款",
+      "font_class": "protocol",
+      "unicode": "e641",
+      "unicode_decimal": 58945
+    },
+    {
+      "icon_id": "8433679",
+      "name": "维修服务",
+      "font_class": "service",
+      "unicode": "e640",
+      "unicode_decimal": 58944
+    },
+    {
+      "icon_id": "8433668",
+      "name": "app下载",
+      "font_class": "appdown",
+      "unicode": "e63f",
+      "unicode_decimal": 58943
+    },
+    {
+      "icon_id": "8433665",
+      "name": "常见问题",
+      "font_class": "faq",
+      "unicode": "e63e",
+      "unicode_decimal": 58942
+    },
+    {
+      "icon_id": "8426846",
+      "name": "行业-房地产",
+      "font_class": "industry_realty",
+      "unicode": "e63b",
+      "unicode_decimal": 58939
+    },
+    {
+      "icon_id": "8426824",
+      "name": "行业-博物馆",
+      "font_class": "industry_museum",
+      "unicode": "e63a",
+      "unicode_decimal": 58938
+    },
+    {
+      "icon_id": "8426823",
+      "name": "行业-工业",
+      "font_class": "industry_industry",
+      "unicode": "e639",
+      "unicode_decimal": 58937
+    },
+    {
+      "icon_id": "8426822",
+      "name": "行业-政务",
+      "font_class": "industry_gover",
+      "unicode": "e638",
+      "unicode_decimal": 58936
+    },
+    {
+      "icon_id": "8426821",
+      "name": "行业-电商",
+      "font_class": "industry_ecom",
+      "unicode": "e637",
+      "unicode_decimal": 58935
+    },
+    {
+      "icon_id": "8426819",
+      "name": "行业-餐饮",
+      "font_class": "industry_catering",
+      "unicode": "e636",
+      "unicode_decimal": 58934
+    },
+    {
+      "icon_id": "8426817",
+      "name": "行业-app",
+      "font_class": "industry_app",
+      "unicode": "e635",
+      "unicode_decimal": 58933
+    },
+    {
+      "icon_id": "8426816",
+      "name": "六目相机",
+      "font_class": "icon_cam_pro",
+      "unicode": "e634",
+      "unicode_decimal": 58932
+    },
+    {
+      "icon_id": "8426815",
+      "name": "二目相机",
+      "font_class": "icon_cam_lite",
+      "unicode": "e633",
+      "unicode_decimal": 58931
+    },
+    {
+      "icon_id": "8426806",
+      "name": "相机配件",
+      "font_class": "icon_cam_fitting",
+      "unicode": "e632",
+      "unicode_decimal": 58930
+    },
+    {
+      "icon_id": "898671",
+      "name": "关闭",
+      "font_class": "cuowu",
+      "unicode": "e647",
+      "unicode_decimal": 58951
+    },
+    {
+      "icon_id": "2870291",
+      "name": "关闭",
+      "font_class": "guanbi",
+      "unicode": "e60b",
+      "unicode_decimal": 58891
+    },
+    {
+      "icon_id": "6863318",
+      "name": "4dkk",
+      "font_class": "logo_a",
+      "unicode": "e605",
+      "unicode_decimal": 58885
+    },
+    {
+      "icon_id": "6863328",
+      "name": "4dkk",
+      "font_class": "logo_b",
+      "unicode": "e607",
+      "unicode_decimal": 58887
+    },
+    {
+      "icon_id": "6860061",
+      "name": "抖音",
+      "font_class": "douyin",
+      "unicode": "e602",
+      "unicode_decimal": 58882
+    },
+    {
+      "icon_id": "6860712",
+      "name": "chat",
+      "font_class": "chat",
+      "unicode": "e603",
+      "unicode_decimal": 58883
+    },
+    {
+      "icon_id": "6861003",
+      "name": "geren",
+      "font_class": "geren",
+      "unicode": "e606",
+      "unicode_decimal": 58886
+    },
+    {
+      "icon_id": "521803",
+      "name": "新浪",
+      "font_class": "xinlang",
+      "unicode": "e60a",
+      "unicode_decimal": 58890
+    },
+    {
+      "icon_id": "863476",
+      "name": "facebook",
+      "font_class": "facebook",
+      "unicode": "e62a",
+      "unicode_decimal": 58922
+    },
+    {
+      "icon_id": "1830862",
+      "name": "提升",
+      "font_class": "tisheng",
+      "unicode": "e604",
+      "unicode_decimal": 58884
+    },
+    {
+      "icon_id": "2112497",
+      "name": "苹果",
+      "font_class": "pingguo",
+      "unicode": "e658",
+      "unicode_decimal": 58968
+    },
+    {
+      "icon_id": "2180950",
+      "name": "左箭头",
+      "font_class": "youjiantou",
+      "unicode": "e600",
+      "unicode_decimal": 58880
+    },
+    {
+      "icon_id": "2281299",
+      "name": "微信",
+      "font_class": "weixin",
+      "unicode": "e64b",
+      "unicode_decimal": 58955
+    },
+    {
+      "icon_id": "3323954",
+      "name": "ins",
+      "font_class": "ins",
+      "unicode": "e63d",
+      "unicode_decimal": 58941
+    },
+    {
+      "icon_id": "4388466",
+      "name": "搜索",
+      "font_class": "sousuo",
+      "unicode": "e619",
+      "unicode_decimal": 58905
+    },
+    {
+      "icon_id": "4584889",
+      "name": "安卓",
+      "font_class": "anzhuo",
+      "unicode": "e66c",
+      "unicode_decimal": 58988
+    },
+    {
+      "icon_id": "5834930",
+      "name": "对",
+      "font_class": "dui",
+      "unicode": "e61f",
+      "unicode_decimal": 58911
+    }
+  ]
+}

pc/src/assets/style/public.scss

@@ -15,8 +15,8 @@ $theme-color:#1fe4dc;
 }
 
 .container {
-  width: 1276px;
-  min-width: 1276px;
+
+  max-width: 1276px;
   margin: 0 auto;
 }
 
@@ -207,6 +207,12 @@ body{
   display: block;
   clear: both;
 }
+.fl {
+  float: left;
+}
+.fr {
+  float: right;
+}
 .loading-hover{
   position: absolute;
   width: 100%;
@@ -257,6 +263,25 @@ body{
   margin-top: 30px;
 }
 
+.common-title {
+  font-size: 40px;
+  color: #202020;
+  position: relative;
+  font-weight: normal;
+  margin-top: 113px;
+  &::after {
+    position: absolute;
+    left: 0;
+    bottom: -10px;
+    height: 2px;
+    width: 118px;
+    background: #1FE4DC;
+    content: '';
+    display: block;
+    
+  }
+}
+
 @keyframes fadeUp {
   from {
     opacity: 0;
@@ -482,4 +507,13 @@ $padding:20px;
   100% {
     transform: rotate(360deg);
   }
+}
+
+@keyframes fadeIn {
+  0% {
+    opacity: 0;
+  }
+  100% {
+    opacity: 1;
+  }
 }

pc/src/components/card/index.vue

@@ -86,11 +86,12 @@ export default {
 
 <style lang="scss" scoped>
 .card-con {
-  width: 330px;
+  width: 100%;
   position: relative;
+  margin-bottom: 20px;
   .card-img{
-    width: 330px;
-    height: 200px;
+    width: 100%;
+    height: 184px;
     cursor: pointer;
     background-position: center;
     background-size: auto 100%;
@@ -98,8 +99,8 @@ export default {
 
   }
   img {
-    width: 330px;
-    height: 200px;
+    width: 100%;
+    height: 184px;
     cursor: pointer;
   }
 
@@ -113,8 +114,8 @@ export default {
     background-color: rgba(31, 228, 220, 0.7);
     opacity: 0;
     transition: opacity .5s cubic-bezier(.39, .03, .41, .98);
-    width: 330px;
-    height: 200px;
+    width: 100%;
+    height: 184px;
     cursor: pointer;
     >.text-info {
       width: 100%;
@@ -211,21 +212,13 @@ export default {
 
     .txt {
       color: #929292;
+      overflow: hidden;
+      max-width: 150px;
+      display: inline-block;
+      white-space: nowrap;
+      text-overflow: ellipsis;
     }
   }
 }
 
-@media screen and (min-width: 2000px) {
-  .card-con {
-    width: 420px;
-    .card-img{
-      width: 420px;
-      height: 260px;
-    }
-    .item-info{
-      width: 420px;
-      height: 260px;
-    }
-  }
- }
 </style>

pc/src/components/common/phoneAddressSelect.vue

@@ -0,0 +1,79 @@
+<template>
+  <div class="phone-address">
+    <div class="search-w">
+      <input class="search-input" placeholder="搜索" type="text" v-model="keyword">
+      <h-icon type="sousuo" class="sousuo-icon" />
+    </div>
+    <ul class="num-list">
+      <li class="num-item" v-for="(item, index) in selectCall" :key="index" @click="selectPhone(item)">{{`${item[1]}(${item[0]})`}}</li>
+    </ul>
+  </div>
+</template>
+
+<script>
+import selectCall from '@/util/country.js'
+export default {
+  data () {
+    return {
+      keyword: ''
+    }
+  },
+  computed: {
+    selectCall () {
+      return selectCall.filter(item => `${item[1]}(${item[0]})`.indexOf(this.keyword) > -1)
+    }
+  },
+  methods: {
+    selectPhone (item) {
+      this.$emit('select', item)
+    }
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+.phone-address {
+  padding: 20px 20px 10px;
+  border:1px solid rgba(144,144,144,1);
+  border-radius: 3px;
+  font-size: 14px;
+  color: #202020;
+  height: 224px;
+  width: 240px;
+  overflow: auto;
+  position: absolute;
+  background: #fff;
+  .search-w {
+    position: relative;
+  }
+  .search-input {
+    height: 26px;
+    line-height: 24px;
+    background:rgba(247,247,247,1);
+    border:1px solid rgba(144,144,144,1);
+    border-radius:3px;
+    width: 100%;
+    padding-right: 27px;
+    &::placeholder {
+      text-align: right;
+    }
+  }
+  .sousuo-icon {
+    position: absolute;
+    right: 8px;
+    // top: 8px;
+    line-height: 26px;
+    color: #909090;
+    display: inline;
+  }
+  li {
+    cursor: pointer;
+    border-bottom: 0.25px solid #707070;
+    padding: 6px 0;
+    color: #909090;
+    &:hover {
+      color: #202020;
+    }
+  }
+}
+</style>

pc/src/components/mall/number.vue

@@ -0,0 +1,72 @@
+<template>
+  <div class="number-input">
+    <div class="input-btn reduce">-</div>
+    <input  v-model="num" @input="onInput($event)"  />
+    <div class="input-btn add">+</div>
+  </div>
+</template>
+
+<script>
+export default {
+  props: {
+    value: {
+      type: [String, Number],
+      default: 1
+    },
+    max: Number
+  },
+  data () {
+    return {
+      num: 1
+    }
+  },
+  model: {
+    prop: 'value',
+    event: 'input'
+  },
+  methods: {
+    onInput ($event) {
+      let value = Number($event.target.value.replace(/[^\d]/g,''))
+      let max = this.max
+      if (max) {
+        if (value > max) {
+          value = max
+        }
+      }
+      if (value <= 0) {
+        value = 1
+      }
+      
+      this.num = value
+      this.$emit('input', value)
+      return false
+    }
+  }
+
+}
+</script>
+
+<style lang="scss" scoped>
+.number-input {
+  display: inline-block;
+  border: 1px solid #EBEBEB;
+}
+.input-btn {
+  width: 28px;
+  height: 28px;
+  background: #F7F7F7;
+  display: inline-block;
+  cursor: pointer;
+  text-align: center;
+  font-weight: bold;
+  color: #909090;
+  vertical-align: middle;
+}
+input {
+  border: none;
+  line-height: 28px;
+  width: 58px;
+  text-align: center;
+  vertical-align: middle;
+}
+</style>

pc/src/components/shared/Col.vue

@@ -0,0 +1,89 @@
+<template>
+  <div
+    :is="tag"
+    :style="style"
+    class="h-col"
+    :class="classes"
+    >
+    <slot />
+  </div>
+</template>
+
+<script>
+export default {
+  name: 'HCol',
+
+  props: {
+    tag: {
+      type: String,
+      default: 'div'
+    },
+    span: {
+      type: Number,
+      default: 24
+    },
+    offset: Number,
+    pull: Number,
+    push: Number
+  },
+
+  computed: {
+    gutter () {
+      let parent = this.$parent
+      while (parent && parent.$options.componentName !== 'HRow') {
+        parent = parent.$parent
+      }
+      return parent ? parent.gutter : 0
+    },
+    style () {
+      const style = {}
+      if (this.gutter) {
+        style.paddingLeft = this.gutter / 2 + 'px'
+        style.paddingRight = style.paddingLeft
+      }
+      return style
+    },
+    classes () {
+      const classList = []
+      ;['span', 'offset', 'pull', 'push'].forEach(prop => {
+        if (this[prop] || this[prop] === 0) {
+          classList.push(
+            prop !== 'span'
+              ? `h-col-${prop}-${this[prop]}`
+              : `h-col-${this[prop]}`
+          )
+        }
+      })
+      return classList
+    }
+  }
+}
+</script>
+
+<style lang="less">
+[class*="h-col-"] {
+  float: left;
+  box-sizing: border-box;
+}
+[class*="h-col-pull"],
+[class*="h-col-push"] {
+  position: relative;
+}
+
+.col-loop (@i) when (@i > 0) {
+  .h-col-@{i} {
+    width: (1 / 24 * @i * 100) * 1%;
+  }
+  .h-col-offset-@{i} {
+    margin-left: (1 / 24 * @i * 100) * 1%;
+  }
+  .h-col-pull-@{i} {
+    right: (1 / 24 * @i * 100) * 1%;
+  }
+  .h-col-push-@{i} {
+    left: (1 / 24 * @i * 100) * 1%;
+  }
+  .col-loop(@i - 1);
+}
+.col-loop(24);
+</style>

pc/src/components/shared/Icon.vue

@@ -0,0 +1,23 @@
+<template>
+  <i
+    class="iconfont"
+    :class="{ [`${prefixCls}-${type}`]: type }"
+    v-on="$listeners"
+  />
+</template>
+
+<script>
+export default {
+  name: 'HIcon',
+  props: {
+    prefixCls: {
+      type: String,
+      default: 'icon'
+    },
+    type: {
+      type: String,
+      required: true
+    }
+  }
+}
+</script>

pc/src/components/shared/MessageBox/MessageBox.vue

@@ -0,0 +1,114 @@
+<template>
+  <HModal
+    :visible="visible"
+    :show-close="showClose"
+    :mask="mask"
+    :close-on-click-mask="closeOnClickMask"
+    :close-on-press-escape="closeOnPressEscape"
+    @hide="handleAction('close')"
+  >
+    <div class="h-message-box">
+      <header v-if="title" class="h-message-box__header">
+        <HIcon v-if="icon" :type="icon" />
+        {{ title }}
+      </header>
+      <main class="h-message-box__body">
+        <div class="h-message-box__message">{{ message }}</div>
+      </main>
+      <footer class="h-message-box__footer">
+        <div plain :class="cancelButtonClass" v-if="!hideCancleButton" @click="handleAction('cancel')">{{ cancelButtonText }}</div>
+        <div ref="confirm" :class="confirmButtonClass" @click="handleAction('confirm')">{{ confirmButtonText }}</div>
+      </footer>
+    </div>
+  </HModal>
+</template>
+
+<script>
+export default {
+  name: 'HMessageBox',
+  data () {
+    return {
+      visible: false,
+      title: undefined,
+      icon: undefined,
+      message: '',
+      action: '',
+      showConfirmButton: true,
+      showCancelButton: false,
+      confirmButtonText: '',
+      cancelButtonText: '',
+      confirmButtonClass: '',
+      cancelButtonClass: '',
+      showClose: true,
+      mask: true,
+      closeOnClickMask: true,
+      closeOnPressEscape: true,
+      hideCancleButton: false
+    }
+  },
+
+  watch: {
+    visible (val) {
+      if (val) {
+        this.uid++
+      }
+    }
+  },
+
+  methods: {
+    getSafeClose() {
+      const currentId = this.uid
+      return () => {
+        this.$nextTick(() => {
+          if (currentId === this.uid) this.doClose()
+        })
+      }
+    },
+    doClose() {
+      if (!this.visible) return
+      this.visible = false
+      this._closing = true
+
+      this.onClose && this.onClose()
+      setTimeout(() => {
+        if (this.action) this.callback(this.action, this)
+      })
+    },
+    handleAction (action) {
+      this.action = action
+      if (typeof this.beforeClose === 'function') {
+        this.close = this.getSafeClose()
+        this.beforeClose(action, this, this.close)
+      } else {
+        this.doClose()
+      }
+    }
+  }
+}
+</script>
+
+<style lang="less">
+.h-message-box {
+  width: 420px;
+  padding: 10px 15px;
+}
+.h-message-box__header {
+  padding: 5px 0;
+  font-size: 18px;
+}
+.h-message-box__body {
+  padding: 10px 0;
+  color: #202020;
+  line-height: 1.5;
+}
+.h-message-box__footer {
+  padding-top: 10px;
+  text-align: right;
+  .h-button {
+    font-size: 12px;
+  }
+  .h-button + .h-button {
+    margin-left: 10px;
+  }
+}
+</style>

pc/src/components/shared/MessageBox/plugin.js

@@ -0,0 +1,163 @@
+import Vue from 'vue'
+import MessageBoxComponent from './MessageBox'
+
+const MessageBoxConstructor = Vue.extend(MessageBoxComponent)
+
+const defaults = {
+  title: '提示',
+  message: '',
+  showClose: true,
+  lockScroll: true,
+  closeOnClickMask: true,
+  closeOnPressEscape: true,
+  showConfirmButton: true,
+  showCancelButton: false,
+  confirmButtonText: '确定',
+  cancelButtonText: '取消',
+  confirmButtonClass: '',
+  cancelButtonClass: '',
+  customClass: '',
+  beforeClose: null
+}
+
+let currentMsg, instance
+let msgQueue = []
+
+const defaultCallback = action => {
+  if (currentMsg) {
+    let callback = currentMsg.callback
+    if (typeof callback === 'function') {
+      callback(action)
+    }
+    if (currentMsg.resolve) {
+      if (action === 'confirm') {
+        currentMsg.resolve(action)
+      } else if (currentMsg.reject && (action === 'cancel' || action === 'close')) {
+        currentMsg.reject(action)
+      }
+    }
+  }
+}
+
+const initInstance = () => {
+  instance = new MessageBoxConstructor({
+    el: document.createElement('div')
+  })
+
+  instance.callback = defaultCallback
+}
+
+const showNextMsg = () => {
+  if (!instance) {
+    initInstance()
+  }
+  instance.action = ''
+
+  if (!instance.visible || instance.closeTimer) {
+    if (msgQueue.length > 0) {
+      currentMsg = msgQueue.shift()
+
+      let options = currentMsg.options
+      for (let prop in options) {
+        if (options.hasOwnProperty(prop)) {
+          instance[prop] = options[prop]
+        }
+      }
+      if (options.callback === undefined) {
+        instance.callback = defaultCallback
+      }
+
+      let oldCb = instance.callback
+      instance.callback = (action, instance) => {
+        oldCb(action, instance)
+        showNextMsg()
+      }
+
+      ;['mask', 'showClose', 'closeOnClickMask', 'closeOnPressEscape'].forEach(prop => {
+        if (instance[prop] === undefined) {
+          instance[prop] = true
+        }
+      })
+      document.body.appendChild(instance.$el)
+
+      Vue.nextTick(() => {
+        instance.visible = true
+      })
+    }
+  }
+}
+
+export const MessageBox = function(options, callback) {
+  if (Vue.prototype.$isServer) return
+  if (typeof options === 'string') {
+    options = {
+      message: options
+    }
+    if (typeof arguments[1] === 'string') {
+      options.title = arguments[1]
+    }
+  } else if (options.callback && !callback) {
+    callback = options.callback
+  }
+
+  return new Promise((resolve, reject) => {
+    msgQueue.push({
+      options: Object.assign({}, defaults, MessageBox.defaults, options),
+      callback: callback,
+      resolve: resolve,
+      reject: reject
+    })
+
+    showNextMsg()
+  })
+
+}
+
+MessageBox.setDefaults = defaults => {
+  MessageBox.defaults = defaults
+}
+
+MessageBox.alert = (message, title, options) => {
+  if (typeof title === 'object') {
+    options = title
+    title = defaults.title
+  } else if (title === undefined) {
+    title = defaults.title
+  }
+  return MessageBox(Object.assign({
+    title: title,
+    message: message,
+    $type: 'alert',
+    closeOnPressEscape: false,
+    closeOnClickModal: false,
+    hideCancleButton: true
+  }, options))
+}
+
+MessageBox.confirm = (message, title, options) => {
+  if (typeof title === 'object') {
+    options = title
+    title = defaults.title
+  } else if (title === undefined) {
+    title = defaults.title
+  }
+  return MessageBox(Object.assign({
+    title: title,
+    message: message,
+    $type: 'confirm',
+    showCancelButton: true
+  }, options))
+}
+
+MessageBox.close = () => {
+  instance.doClose()
+  instance.visible = false
+  msgQueue = []
+  currentMsg = null
+}
+
+export default function install (Vue) {
+  Vue.prototype.$msgbox = MessageBox
+  Vue.prototype.$alert = MessageBox.alert
+  Vue.prototype.$confirm = MessageBox.confirm
+}

pc/src/components/shared/Modal.vue

@@ -0,0 +1,157 @@
+<template>
+  <transition name="fade">
+    <div v-show="visible" tabindex="-1" class="h-modal" @keyup.esc="onEscapePressed">
+      <div class="mask" v-if="mask" @click="onMaskClicked" />
+      <transition :name="transitionName" @after-enter="afterEnter" @after-leave="afterLeave">
+        <div class="h-modal__content" v-if="visible" :style="modalStyle">
+          <HIcon v-if="showClose" type="close" class="close" @click="close" />
+          <slot></slot>
+        </div>
+      </transition>
+    </div>
+  </transition>
+</template>
+
+<script>
+export default {
+  name: 'HModal',
+  props: {
+    visible: {
+      type: Boolean,
+      required: true
+    },
+    transitionName: {
+      type: String,
+      default: 'h-modal'
+    },
+    showClose: {
+      type: Boolean,
+      default: true
+    },
+    mask: {
+      type: Boolean,
+      default: true
+    },
+    closeOnClickMask: {
+      type: Boolean,
+      default: true
+    },
+    closeOnPressEscape: {
+      type: Boolean,
+      default: false
+    },
+    modalStyle: {
+      type: Object,
+      default: () => ({})
+    }
+  },
+  watch: {
+    visible(isShow) {
+      isShow && this.$nextTick(() => {
+        this.$el.focus()
+        this.$emit('show')
+      })
+    }
+  },
+  methods: {
+    close () {
+      this.$emit('hide')
+      this.$emit('update:visible', false)
+    },
+    onMaskClicked () {
+      if (this.closeOnClickMask) {
+        this.close()
+      }
+    },
+    onEscapePressed () {
+      if (this.closeOnPressEscape) {
+        this.close()
+      }
+    },
+    afterEnter () {
+      this.$emit('after-enter')
+    },
+    afterLeave () {
+      this.$emit('after-leave')
+    }
+  }
+}
+</script>
+
+<style lang="less">
+.h-modal,
+.h-modal .mask {
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+  z-index: 100;
+}
+.h-modal {
+  position: fixed;
+  text-align: center;
+  .mask {
+    position: absolute;
+    background: rgba(0, 0, 0, .5);
+  }
+  &:after {
+    content: '';
+    display: inline-block;
+    height: 100%;
+    vertical-align: middle;
+  }
+
+  .h-modal__content {
+    position: relative;
+    display: inline-block;
+    margin: 0 auto;
+    z-index: 101;
+    background: #fff;
+    box-shadow: 0 1px 3px rgba(0, 0, 0, .2);
+    vertical-align: middle;
+    text-align: left;
+  }
+
+  .close {
+    position: absolute;
+    cursor: pointer;
+    top: 10px;
+    right: 10px;
+    font-size: 18px;
+    padding: 5px;
+    z-index: 9999;
+    color: #ccc;
+    line-height: 1;
+    &:hover {
+      color: #666;
+    }
+  }
+}
+
+.fade-enter-active, .fade-leave-active {
+  transition: opacity .3s;
+}
+.fade-enter, .fade-leave-to {
+  opacity: 0;
+}
+
+@keyframes h-modal-enter {
+  from {
+    transform: scale(0);
+  }
+}
+
+@keyframes h-modal-leave {
+  to {
+    transform: scale(0);
+  }
+}
+
+.h-modal-enter-active {
+  animation: h-modal-enter .3s both;
+}
+
+.h-modal-leave-active {
+  animation: h-modal-leave .5s both;
+}
+</style>

pc/src/components/shared/Row.vue

@@ -0,0 +1,39 @@
+<template>
+  <div
+    :is="tag"
+    :style="style"
+    class="h-row clear"
+    >
+    <slot />
+  </div>
+</template>
+
+<script>
+export default {
+  name: 'HRow',
+  componentName: 'HRow',
+  props: {
+    tag: {
+      type: String,
+      default: 'div'
+    },
+    gutter: Number
+  },
+  computed: {
+    style () {
+      const ret = {}
+      if (this.gutter) {
+        ret.marginLeft = `-${this.gutter / 2}px`
+        ret.marginRight = ret.marginLeft
+      }
+      return ret
+    }
+  }
+}
+</script>
+
+<style lang="less">
+.h-row {
+  position: relative;
+}
+</style>

pc/src/lang/_zh.js

@@ -0,0 +1,17 @@
+module.exports = {
+  header: {
+    core_product: '核心产品',
+    solutions: '行业解决方案',
+    kankan_space: '看看空间',
+    core_tech: '核心技术',
+    service: '服务支持',
+    about: '关于我们',
+    online_shop: '在线商城'
+  },
+  pages: {
+    home: {},
+    mall: {
+      postage: '运费：顺丰包邮'
+    }
+  }
+}

pc/src/lang/index.js

@@ -0,0 +1,17 @@
+import Vue from 'vue'
+import VueI18n from 'vue-i18n'
+import zh from './_zh'
+import en from './_en'
+
+Vue.use(VueI18n)
+
+const i18n = new VueI18n({
+  locale: 'zh',
+  messages: {
+    zh,
+    en
+  },
+  fallbackLocale: 'zh'
+})
+
+export { i18n }

pc/src/main.js

@@ -3,7 +3,9 @@ import Vue from 'vue'
 import App from './App'
 import vuex from 'vuex'
 import Toast from '@/components/toast/toast'
+import { i18n } from './lang'
 
+import './register-components'
 // import axios from './util/http.js'
 // import router from './router'
 Vue.prototype.$cdn = 'https://4dscene.4dage.com/new4dkk/'
@@ -19,7 +21,7 @@ Vue.prototype.$http = axios
 // Vue.prototype.$serverName = 'http://192.168.0.10:8080/'
 // Vue.prototype.$serverName = 'https://www.4dkankan.com/'
 
-Vue.prototype.$serverName = ''
+Vue.prototype.$serverName = 'https://test.4dkankan.com'
 
 Vue.config.productionTip = false
 
@@ -59,9 +61,10 @@ Date.prototype.format = dateFtt
 /* eslint-enable */
 
 /* eslint-disable no-new */
-new Vue({
+window.$app = new Vue({
   el: '#app',
   router,
+  i18n,
   store: require('./store').default,
   components: { App },
   template: '<App/>'

pc/src/page/about/index.vue

@@ -2,6 +2,9 @@
   <div class="about-layout" ref="aboutLayout">
     <aboutBg class="about-bg"/>
     <div>
+      <div class="plate02 ">
+        <img src="@/assets/images/about/hezhao.png" alt>
+      </div>
       <div class="plate01 plate">
         <div class="introduce">
           <img :src="`${$cdn}images/event.png`" alt>
@@ -14,10 +17,10 @@
           </div>
         </div>
       </div>
-      <div class="plate02 ">
-        <img :src="`${$cdn}images/hezhao.png`" alt>
-      </div>
-      <div class="plate03" :style="{marginLeft:(split - 390)+ 'px'}">
+      
+      <div class="plate03-w">
+        <div class="plate03 plate01" >
+          
         <div class="event plate">
           <touch class="touch-layout" :iactive='iactive' :data="imgs" :width="360" :loop="3000">
             <div class="item" slot="item" slot-scope="{item}">
@@ -27,9 +30,9 @@
               <span @click="iactive=i" v-for="(item, i) in data" :key="i" :class="{active: i===index}"></span>
             </div>
           </touch>
-          <div class="e-node">
-            <h2>{{langAbout.events.title}}</h2>
-            <ul>
+          <div class="e-node-w">
+            <h2 class="common-title">{{langAbout.events.title}}</h2>
+            <ul class="e-node">
               <li v-for="(item,idx) in langAbout.events.nodes" :key="idx">
                 <h3>{{item.year}}</h3>
                 <p v-for="(sub, i) in item.txt" :key="i" v-html="sub"></p>
@@ -37,6 +40,7 @@
             </ul>
           </div>
         </div>
+      </div>
         <!-- <div class="contact plate">
           <img :src="`${$cdn}images/company.png`" alt>
           <div class="e-node">
@@ -49,7 +53,6 @@
           </div>
         </div> -->
       </div>
-      <ifooter/>
     </div>
   </div>
 </template>
@@ -153,4 +156,19 @@ export default {
     }
   }
 }
+.plate03-w {
+  padding-top: 217px;
+  background: #e7e7e7;;
+  .common-title {
+    margin-top: 0;
+  }
+}
+.e-node-w {
+  position: relative;
+  .common-title {
+    position: absolute;
+    top: -140px;
+    left: 40px;
+  }
+}
 </style>

pc/src/page/about/style.scss

@@ -84,13 +84,12 @@ $txt_delay: 0.2s;
   }
   .plate03 {
     text-align: center;
-    width: 1340px;
-    margin-top: 120px;
-    margin-bottom: 120px;
+    width: 1240px;
+    margin-top: 0;
+    margin-bottom: 0;
     .event {
       display: flex;
       align-items: flex-start;
-      margin-bottom: 170px;
       .touch-layout {
         width: 360px;
         height: 240px;

pc/src/page/cases/index.vue

@@ -1,37 +1,27 @@
 <template>
-<div :style="{minHeight:scene.length>0?'none':'84vh'}" v-show="split">
-  <div class="case-con" :style="{paddingLeft:(split-260)+ 'px'}">
-    <div class="case-header">
-      <img :src="language==='en'?`${$cdn}images/3dcase_img_tit-en.png`:`${$cdn}images/3dcase_img_tit.png`" alt="">
-      <div class="case-nav">
-        <div class="nav-con">
-          <vcenter>
-            <div class="list-nav" :style="{width:language==='en'?'950px':'705px'}">
-              <!-- <div class="list-txt b-title">{{caseType}}</div> -->
-              <router-link :style="{marginLeft:language==='en'?'20px':'38px'}" :class="{'active-txt':caseType===langCases.typeName[item.name]}" class="sub-list b-title" :to="item.to" v-for="(item,i) in navs" :key="i">{{langCases.typeName[item.name]}}</router-link>
-            </div>
-            <div class="lists">
-              <ul class="list-navs">
-                <li :class="{active:sortActive===item.id}" v-for="(item,index) in langCases.sort.items" :key="index" @click="sortActive = item.id">
-                  <span class="b-label">{{item.name}}</span>
-                </li>
-              </ul>
-              <div class="select" ref="mbMenu">
-                <span @click="selectActive=!selectActive" :class="{active:selectActive}">{{langCases.sceneSelected[selected]}}</span>
-                <ul :style="{maxHeight:selectActive?'200px':'0',padding:selectActive?'15px 0':'0'}">
-                  <li @click="selected= item.id" v-for="(item,i) in langCases.selectType" :key="i">{{item.name}}</li>
-                </ul>
-              </div>
-            </div>
-          </vcenter>
-        </div>
-      </div>
+<div class="case-w">
+  <div class="cases-header">
+    <div class="container">
+      <h1>看看空间</h1>
+      <ul class="cases-type-list">
+        <li class="cases-type-item" :class="{'is-active': $route.params.id === item.name}" v-for="item in types" :key="item.id" @click="$router.push(`/cases/${item.name}`)">{{ item.name }}</li>
+      </ul>
     </div>
   </div>
-  <div class="case-body" :style="{marginLeft:(split-(isWide?380:329))+ 'px'}">
-    <div class="card" :class="{card_active:scene.length>0}" :style="{animationDelay:`${0.1*(i)}s`}" v-for="(item,i) in scene" :key="i">
-      <card :data="item" :style="{marginRight:(i+1)%(isWide?4:3)===0?'0': isWide?'50px':'6vw'}"></card>
+  <div class="case-body container" >
+    <div class="body-header clear">
+      <ul class="sub-types fl">
+        <li class="sub-type-item" :class="{'is-active': sortActive === item.id}" v-for="item in sub_types" :key="item.name" @click="sortActive = item.id"><h-icon :type="item.icon" />{{ item.name }}</li>
+      </ul>
+      <div class="search fr">
+        <input type="text" placeholder="输入搜索关键字">
+      </div>
     </div>
+    <h-row :gutter="20">
+      <h-col :span="6" v-for="(item,i) in scene" :key="i">
+        <card :data="item" ></card>
+      </h-col>
+    </h-row>
   </div>
   <div class="paging" :class="{pagingshow:total}">
     <vcenter>
@@ -42,8 +32,7 @@
 </template>
 
 <script>
-// 这里可以导入其他文件（比如：组件，工具js，第三方插件js，json文件，图片文件等等）
-// 例如：import 《组件名称》 from '《组件路径》';
+
 import {mapState} from 'vuex'
 import vcenter from '@/components/vcenter'
 import card from '@/components/card'
@@ -55,37 +44,48 @@ let sceneSTYpe = {
   '四维看看 Pro': 4
 }
 
-let nav = [
+const types = [
   {
-    name: '房地产',
-    to: {name: 'cases', params: {id: '房地产'}}
+    id: null,
+    name: '全部'
   },
   {
-    name: '博物馆',
-    to: {name: 'cases', params: {id: '博物馆'}}
+    id: 2,
+    name: '房屋地产'
   },
   {
-    name: '电商',
-    to: {name: 'cases', params: {id: '电商'}}
+    id: 1,
+    name: '文博展览'
   },
   {
-    name: '家居',
-    to: {name: 'cases', params: {id: '家居'}}
+    id: 4,
+    name: '餐饮家居'
   },
   {
-    name: '餐饮',
-    to: {name: 'cases', params: {id: '餐饮'}}
+    id: null,
+    name: '消安刑侦'
   },
+]
+
+const sub_types = [
   {
-    name: '其他',
-    to: {name: 'cases', params: {id: '其他'}}
+    icon: 'case_recommend',
+    name: '精品推荐',
+    id: 1
   },
   {
-    name: '全部',
-    to: {name: 'cases', params: {id: '全部'}}
-  }
+    icon: 'case_hot',
+    name: '热门浏览',
+    id: 3
+  },
+  {
+    icon: 'case_new',
+    name: '最新发布',
+    id: 2
+  },
 ]
 
+
 export default {
   // import引入的组件需要注入到对象中才能使用
   components: {
@@ -96,6 +96,8 @@ export default {
   data () {
     // 这里存放数据
     return {
+      types,
+      sub_types,
       selectActive: false,
       total: 0,
       pageSize: 12,
@@ -104,7 +106,7 @@ export default {
       scene: [],
       isWide: window.innerWidth > 1697,
       selected: '四维看看 Pro',
-      caseType: null
+      caseType: null,
     }
   },
   // 监听属性 类似于data概念
@@ -112,23 +114,7 @@ export default {
     ...mapState({
       langCases: state => state.language.home.cases,
       language: state => state.language.current,
-      split: state => state.ui.navDivision
-    }),
-    navs () {
-      let temp = []
-      let noMacth = true
-      nav.map(item => {
-        if (item.name !== this.$route.params.id) {
-          temp.push(item)
-        } else {
-          noMacth = false
-        }
-      })
-      if (noMacth) {
-        temp.pop()
-      }
-      return nav
-    }
+    })
   },
   // 监控data中的数据变化
   watch: {
@@ -155,8 +141,9 @@ export default {
       deep: true,
       immediate: true,
       handler (newVal) {
+        console.log(types.filter(item => item.name === newVal)[0].id)
         this.currentPage = 1
-        this.caseType = this.langCases.typeName[newVal] || this.langCases.typeName['房地产']
+        this.caseType = types.filter(item => item.name === newVal)[0].id
         this.selectActive = false
         this.getData()
       }
@@ -171,7 +158,7 @@ export default {
       window.scrollTo(0, 0)
       let params = {
         pageSize: this.pageSize,
-        sceneType: this.langCases.typeArr[this.caseType],
+        sceneType: this.caseType,
         sceneInterest: this.sortActive,
         pageNum: this.currentPage,
         sceneScheme: sceneSTYpe[this.selected]
@@ -213,5 +200,115 @@ export default {
 </script>
 
 <style lang="scss" scoped>
-@import './style.scss';
+.cases-header {
+  height: 290px;
+  width: 100%;
+  background: url(~@/assets/images/refactor/watchSpace/banner.png) no-repeat center center;
+  .container {
+    padding-top: 107px;
+    h1 {
+      font-size: 40px;
+      font-weight: normal;
+      margin-bottom: 26px;
+    }
+    li {
+      display: inline-block;
+      padding: 0 36px 0 27px;
+      border-left: 1px solid #909090;
+      cursor: pointer;
+      color: #909090;
+      font-weight: 600;
+      &:first-child {
+        padding-left: 0;
+        border-left: none;
+      }
+      &:hover, &.is-active {
+        color: #202020;
+      }
+    }
+  }
+}
+.body-header {
+  padding: 24px 0;
+  font-size: 16px;
+  line-height: 48px;
+  .sub-type-item {
+    display: inline-block;
+    margin-right: 34px;
+    color: #909090;
+    cursor: pointer;
+    &:hover, &.is-active {
+      color: #202020;
+    }
+  }
+  input {
+    background: #EBEBEB;
+    line-height: 48px;
+    border: none;
+    width: 256px;
+    padding-left: 20px;
+  }
+}
+.paging {
+  // border-left: #e5e5e5 1px solid;
+  height: 100%;
+  margin-bottom: 40px;
+
+  transition: all 0.4s ease;
+  & /deep/ .layout {
+    text-align: center;
+    margin-top: 10px;
+  }
+  & /deep/ .layout a:not(:last-child) {
+    margin: 10px 8px;
+    font-size: 16px;
+    display: inline-block;
+    font-weight: 500;
+    cursor: pointer;
+    user-select: none;
+    color: #999;
+    position: relative;
+    transition: color 0.3s;
+  }
+  & /deep/ .layout a:last-child {
+    position: relative;
+    top: -5px;
+    display: -ms-inline-flexbox;
+    display: inline-flex;
+    -ms-flex-align: center;
+    align-items: center;
+    height: 22px;
+    padding: 0 9.6px;
+    padding: 0 0.6rem;
+  }
+  & /deep/ .layout a:last-child::before,
+  & /deep/ .layout a:last-child::after {
+    content: "";
+    display: inline-block;
+    will-change: transform;
+    transition: transform 0.3s;
+  }
+
+  & /deep/ .layout a:not(:last-child).active::after,
+  & /deep/ .layout a:not(:last-child).active,
+  & /deep/ .layout a:not(:last-child):hover,
+  & /deep/ .layout a:not(:last-child):hover::after {
+    color: #111111;
+    transform: scaleX(1);
+  }
+
+  & /deep/ .layout a:not(:last-child)::after {
+    content: "";
+    height: 3px;
+    width: 140%;
+    background-color: #111;
+    display: block;
+    margin-left: -20%;
+    margin-top: 3px;
+    transform-origin: 50% 50%;
+    transform: scaleX(0);
+    will-change: transform;
+    transition: transform 0.3s;
+  }
+}
 </style>

pc/src/page/cases/style.scss

@@ -154,68 +154,7 @@
     transition: bounceIn 0.3s;
   }
 }
-.paging {
-  // border-left: #e5e5e5 1px solid;
-  height: 100%;
-  margin-bottom: 40px;
-  display: none;
-  transition: all 0.4s ease;
-  & /deep/ .layout {
-    text-align: center;
-    margin-top: 10px;
-  }
-  & /deep/ .layout a:not(:last-child) {
-    margin: 10px 8px;
-    font-size: 16px;
-    display: inline-block;
-    font-weight: 500;
-    cursor: pointer;
-    user-select: none;
-    color: #999;
-    position: relative;
-    transition: color 0.3s;
-  }
-  & /deep/ .layout a:last-child {
-    position: relative;
-    top: -5px;
-    display: -ms-inline-flexbox;
-    display: inline-flex;
-    -ms-flex-align: center;
-    align-items: center;
-    height: 22px;
-    padding: 0 9.6px;
-    padding: 0 0.6rem;
-  }
-  & /deep/ .layout a:last-child::before,
-  & /deep/ .layout a:last-child::after {
-    content: "";
-    display: inline-block;
-    will-change: transform;
-    transition: transform 0.3s;
-  }
-
-  & /deep/ .layout a:not(:last-child).active::after,
-  & /deep/ .layout a:not(:last-child).active,
-  & /deep/ .layout a:not(:last-child):hover,
-  & /deep/ .layout a:not(:last-child):hover::after {
-    color: #111111;
-    transform: scaleX(1);
-  }
 
-  & /deep/ .layout a:not(:last-child)::after {
-    content: "";
-    height: 3px;
-    width: 140%;
-    background-color: #111;
-    display: block;
-    margin-left: -20%;
-    margin-top: 3px;
-    transform-origin: 50% 50%;
-    transform: scaleX(0);
-    will-change: transform;
-    transition: transform 0.3s;
-  }
-}
 .pagingshow{
   display: block;
 }

pc/src/page/conduct/conductExhibition/index.vue

@@ -0,0 +1,104 @@
+<template>
+  <div class="conduct-display">
+    <div class="banner">
+      <div class="container"></div>
+    </div>
+    <div class="plate-w" ref="homeLayout">
+      <div class="plate item" v-for="(item,i) in sequenceArr" :key="i">
+        <div class="container">
+          <h2 class="common-title">{{item.name}}</h2>
+          <img :src="item.img" />
+        </div>
+      </div>
+    </div>
+    
+  </div>
+</template>
+
+<script>
+import { getPosition } from '@/util'
+import { mapState } from 'vuex'
+import sequence from '@/components/sequence'
+export default {
+  data () {
+    return {
+      sequenceArr: [
+        {
+          name: '在线逛展洽谈，名片即刻获取',
+          img: require('@/assets/images/refactor/conductExhibition/item-1.jpg'),
+          runAnimation: true
+        },
+        {
+          name: '沟通畅通无阻，资讯一览无遗',
+          img: require('@/assets/images/refactor/conductExhibition/item-2.png'),
+          runAnimation: true
+        },
+        {
+          name: '降低搭展成本，高效促进交易',
+          img: require('@/assets/images/refactor/conductExhibition/item-3.jpg'),
+          runAnimation: true
+        },
+        {
+          name: '数据流量统计，用户画像分析',
+          img: require('@/assets/images/refactor/conductExhibition/item-4.jpg'),
+          runAnimation: true
+        }
+      ]
+    }
+  },
+  components: {
+    sequence
+  },
+  mounted () {
+  },
+  destroyed () {
+  },
+}
+</script>
+<style lang="scss">
+.conduct-display {
+  .banner {
+    width: 100%;
+    height: 420px;
+    background: url(~@/assets/images/refactor/conductExhibition/banner.png) no-repeat center center;
+    line-height: 420px;
+    font-size: 40px;
+    margin-bottom: 0;
+  }
+  .item {
+    padding: 110px 0 0;
+    img {
+      
+    }
+  }
+  .boom {
+    height: 530px;
+  }
+  .common-title {
+    margin-top: 0;
+    margin-bottom: 50px;
+  }
+  .sub-list {
+    li {
+      display: inline-block;
+      vertical-align: middle;
+      text-align: center;
+      width: 412px;
+      margin-right: 20px;
+      padding-bottom: 70px;
+      img {
+        width: 100%;
+        height: 255px;
+      }
+      &:last-child {
+        margin-right: 0;
+      }
+    }
+  }
+  .plate-w {
+    margin-bottom: 110px;
+  }
+}
+
+
+</style>

pc/src/page/conduct/conductHouse/index.vue

@@ -0,0 +1,117 @@
+<template>
+  <div class="conduct-house">
+    <div class="banner">
+      <div class="container">看房 ‧ 海量复刻真房源</div>
+    </div>
+    <div class="plate-w" ref="homeLayout">
+      <div class="plate item" v-for="(item,i) in sequenceArr" :key="i">
+        <div class="container">
+          <h2 class="common-title">{{item.name}}</h2>
+          <img v-if="!Array.isArray(item.img)" :src="item.img" />
+          <h-row v-else :gutter="129" style="padding: 0 53px">
+            <h-col :span="24 / item.img.length" v-for="(img, index) in item.img" :key="index" :offset="53">
+              <img style="width: 100%" :src="img" alt="">
+            </h-col>
+          </h-row>
+        </div>
+      </div>
+    </div>
+    
+  </div>
+</template>
+
+<script>
+import { getPosition } from '@/util'
+import { mapState } from 'vuex'
+import sequence from '@/components/sequence'
+export default {
+  data () {
+    return {
+      sequenceArr: [
+        {
+          name: 'AI自动建模，高效复刻真实房源',
+          img: require('@/assets/images/online/house/item-1.jpg'),
+          runAnimation: true
+        },
+        {
+          name: '房源资讯全方位展示，提高租售决策效率',
+          img: require('@/assets/images/online/house/item-2.jpg'),
+          runAnimation: true
+        },
+        {
+          name: '地产资讯多维展示，提高租售决策效率',
+          img: [
+            require('@/assets/images/online/house/item-3_1.jpg'),
+            require('@/assets/images/online/house/item-3_2.jpg')
+          ],
+          runAnimation: true
+        },
+        {
+          name: '强大功能编辑后台，传递更多房源价值',
+          img: require('@/assets/images/online/house/item-3.jpg'),
+          runAnimation: true
+        },
+        {
+          name: '开放解决方案API，赋能行业应用',
+          img: require('@/assets/images/online/house/item-5.jpg'),
+          runAnimation: true
+        }
+      ],
+    }
+  },
+  components: {
+    sequence
+  },
+  mounted () {
+  },
+  destroyed () {
+  },
+}
+</script>
+<style lang="scss">
+.conduct-house {
+  .banner {
+    width: 100%;
+    height: 420px;
+    background: url(~@/assets/images/online/house/banner.jpg) no-repeat center center;
+    line-height: 420px;
+    font-size: 40px;
+    margin-bottom: 0;
+  }
+  .item {
+    padding: 110px 0 0;
+    img {
+      
+    }
+  }
+  .boom {
+    height: 530px;
+  }
+  .common-title {
+    margin-top: 0;
+    margin-bottom: 50px;
+  }
+  .sub-list {
+    li {
+      display: inline-block;
+      vertical-align: middle;
+      text-align: center;
+      width: 412px;
+      margin-right: 20px;
+      padding-bottom: 70px;
+      img {
+        width: 100%;
+        height: 255px;
+      }
+      &:last-child {
+        margin-right: 0;
+      }
+    }
+  }
+  .plate-w {
+    margin-bottom: 110px;
+  }
+}
+
+
+</style>

pc/src/page/conduct/conductSecury/index.vue

@@ -0,0 +1,99 @@
+<template>
+  <div class="conduct-display">
+    <div class="banner">
+      <div class="container">安防勘查</div>
+    </div>
+    <div class="plate-w" ref="homeLayout">
+      <div class="plate item" v-for="(item,i) in sequenceArr" :key="i">
+        <div class="container">
+          <h2 class="common-title">{{item.name}}</h2>
+          <img :src="item.img" />
+        </div>
+      </div>
+    </div>
+    
+  </div>
+</template>
+
+<script>
+import { getPosition } from '@/util'
+import { mapState } from 'vuex'
+import sequence from '@/components/sequence'
+export default {
+  data () {
+    return {
+      sequenceArr: [
+        {
+          name: '高效复刻灾害现场，记录全面三维档案',
+          img: require('@/assets/images/refactor/conductSecury/item-1.png'),
+          runAnimation: true
+        },
+        {
+          name: '可将现场说明直接添加至三维空间中，提高沟通质量与工作效率',
+          img: require('@/assets/images/refactor/conductSecury/item-2.png'),
+          runAnimation: true
+        },
+        {
+          name: '支持预先采集存档，减少理赔纠纷',
+          img: require('@/assets/images/refactor/conductSecury/item-3.png'),
+          runAnimation: true
+        }
+      ]
+    }
+  },
+  components: {
+    sequence
+  },
+  mounted () {
+  },
+  destroyed () {
+  },
+}
+</script>
+<style lang="scss">
+.conduct-display {
+  .banner {
+    width: 100%;
+    height: 420px;
+    background: url(~@/assets/images/refactor/conductSecury/banner.png) no-repeat center center;
+    line-height: 420px;
+    font-size: 40px;
+    margin-bottom: 0;
+  }
+  .item {
+    padding: 110px 0 0;
+    img {
+      
+    }
+  }
+  .boom {
+    height: 530px;
+  }
+  .common-title {
+    margin-top: 0;
+    margin-bottom: 50px;
+  }
+  .sub-list {
+    li {
+      display: inline-block;
+      vertical-align: middle;
+      text-align: center;
+      width: 412px;
+      margin-right: 20px;
+      padding-bottom: 70px;
+      img {
+        width: 100%;
+        height: 255px;
+      }
+      &:last-child {
+        margin-right: 0;
+      }
+    }
+  }
+  .plate-w {
+    margin-bottom: 110px;
+  }
+}
+
+
+</style>

pc/src/page/conduct/conductShop/index.vue

@@ -0,0 +1,104 @@
+<template>
+  <div class="conduct-shop">
+    <div class="banner">
+      <div class="container">四维看店 • 宅家中轻松买</div>
+    </div>
+    <div class="plate-w" ref="homeLayout">
+      <div class="plate item" v-for="(item,i) in sequenceArr" :key="i">
+        <div class="container">
+          <h2 class="common-title">{{item.name}}</h2>
+          <img :src="item.img" />
+        </div>
+      </div>
+    </div>
+    
+  </div>
+</template>
+
+<script>
+import { getPosition } from '@/util'
+import { mapState } from 'vuex'
+import sequence from '@/components/sequence'
+export default {
+  data () {
+    return {
+      sequenceArr: [
+        {
+          name: '3D数字化商圈沉浸式购物新体验',
+          img: require('@/assets/images/refactor/conductShop/item-1.png'),
+          runAnimation: true
+        },
+        {
+          name: '真实复刻空间手机一点就逛',
+          img: require('@/assets/images/refactor/conductShop/item-2.png'),
+          runAnimation: true
+        },
+        {
+          name: '汇聚线上客流拉动线下经济',
+          img: require('@/assets/images/refactor/conductShop/item-3.png'),
+          runAnimation: true
+        },
+        {
+          name: '私人专属客服 同屏带看实时沟通',
+          img: require('@/assets/images/refactor/conductShop/item-4.png'),
+          runAnimation: true
+        }
+      ]
+    }
+  },
+  components: {
+    sequence
+  },
+  mounted () {
+  },
+  destroyed () {
+  },
+}
+</script>
+<style lang="scss">
+.conduct-shop {
+  .banner {
+    width: 100%;
+    height: 420px;
+    background: url(~@/assets/images/refactor/conductShop/banner.png) no-repeat center center;
+    line-height: 420px;
+    font-size: 40px;
+    margin-bottom: 0;
+  }
+  .item {
+    padding: 110px 0 0;
+    img {
+      
+    }
+  }
+  .boom {
+    height: 530px;
+  }
+  .common-title {
+    margin-top: 0;
+    margin-bottom: 50px;
+  }
+  .sub-list {
+    li {
+      display: inline-block;
+      vertical-align: middle;
+      text-align: center;
+      width: 412px;
+      margin-right: 20px;
+      padding-bottom: 70px;
+      img {
+        width: 100%;
+        height: 255px;
+      }
+      &:last-child {
+        margin-right: 0;
+      }
+    }
+  }
+  .plate-w {
+    margin-bottom: 110px;
+  }
+}
+
+
+</style>

pc/src/page/conduct/conductSubject/index.vue

@@ -0,0 +1,127 @@
+<template>
+  <div class="conduct-subject">
+    <div class="banner">
+      <div class="container">文博·助力打造永不落幕的博物馆</div>
+    </div>
+    <div class="plate-w" ref="homeLayout">
+      <div class="plate item" v-for="(item,i) in sequenceArr" :key="i">
+        <div class="container">
+          <h2 class="common-title">{{item.name}}</h2>
+          <img :src="item.img" />
+        </div>
+      </div>
+      <div class="container item">
+        <h1 class="common-title">精选案例</h1>
+        <ul class="sub-list">
+          <li v-for="(item, index) in sub_arr" :key="index">
+            <img :src="item.img" alt="">
+            <p>{{ item.text }}</p>
+          </li>
+        </ul>
+      </div>
+    </div>
+    
+  </div>
+</template>
+
+<script>
+import { getPosition } from '@/util'
+import { mapState } from 'vuex'
+import sequence from '@/components/sequence'
+export default {
+  data () {
+    return {
+      sequenceArr: [
+        {
+          name: '珍贵陈展线上复刻，打破线下时空限制',
+          img: require('@/assets/images/online/subjects/item-1.png'),
+          runAnimation: true
+        },
+        {
+          name: '空间交互形式多样，承载丰富历史底蕴',
+          img: require('@/assets/images/online/subjects/item-2.png'),
+          runAnimation: true
+        },
+        {
+          name: '多人实时同屏互动，听专家讲述文化故事',
+          img: require('@/assets/images/online/subjects/item-3.png'),
+          runAnimation: true
+        },
+        {
+          name: '推动社科教育宣传，助力历史文化传播',
+          img: require('@/assets/images/online/subjects/item-4.png'),
+          runAnimation: true
+        }
+      ],
+      sub_arr: [
+        {
+          text: '德国国立陶瓷博物馆',
+          img: require('@/assets/images/online/subjects/sub_item-1.png')
+        },
+        {
+          text: '梁家河数字博物馆',
+          img: require('@/assets/images/online/subjects/sub_item-2.png')
+        },
+        {
+          text: '南昌汉代海昏侯国考古成果展',
+          img: require('@/assets/images/online/subjects/sub_item-3.png')
+        },
+      ]
+    }
+  },
+  components: {
+    sequence
+  },
+  mounted () {
+  },
+  destroyed () {
+  },
+}
+</script>
+<style lang="scss">
+.conduct-subject {
+  .banner {
+    width: 100%;
+    height: 420px;
+    background: url(~@/assets/images/online/subjects/banner.png) no-repeat center center;
+    line-height: 420px;
+    font-size: 40px;
+    margin-bottom: 0;
+  }
+  .item {
+    padding: 110px 0 0;
+    img {
+      
+    }
+  }
+  .boom {
+    height: 530px;
+  }
+  .common-title {
+    margin-top: 0;
+    margin-bottom: 50px;
+  }
+  .sub-list {
+    li {
+      display: inline-block;
+      vertical-align: middle;
+      text-align: center;
+      width: 412px;
+      margin-right: 20px;
+      padding-bottom: 70px;
+      img {
+        width: 100%;
+        height: 255px;
+      }
+      &:last-child {
+        margin-right: 0;
+      }
+    }
+  }
+  .plate-w {
+    margin-bottom: 110px;
+  }
+}
+
+
+</style>