Sfoglia il codice sorgente

增加首页图片

徐志豪 5 anni fa
parent
commit
4a2c8220ab
40 ha cambiato i file con 237 aggiunte e 532 eliminazioni
  1. 7 0
      pc/build/webpack.dev.conf.js
  2. 12 8
      pc/package-lock.json
  3. 2 2
      pc/src/App.vue
  4. BIN
      pc/src/assets/images/home/4case_01.png
  5. BIN
      pc/src/assets/images/home/4case_01@2x.png
  6. BIN
      pc/src/assets/images/home/4case_02.png
  7. BIN
      pc/src/assets/images/home/4case_02@2x.png
  8. BIN
      pc/src/assets/images/home/4case_03.png
  9. BIN
      pc/src/assets/images/home/4case_03@2x.png
  10. BIN
      pc/src/assets/images/home/4case_04.png
  11. BIN
      pc/src/assets/images/home/4case_04@2x.png
  12. BIN
      pc/src/assets/images/home/bottom-bg.png
  13. BIN
      pc/src/assets/images/home/bottom-bg@2x.png
  14. BIN
      pc/src/assets/images/home/china.png
  15. BIN
      pc/src/assets/images/home/china@2x.png
  16. BIN
      pc/src/assets/images/home/logo-cn.png
  17. BIN
      pc/src/assets/images/home/logo-cn@2x.png
  18. BIN
      pc/src/assets/images/home/news_01.png
  19. BIN
      pc/src/assets/images/home/news_01@2x.png
  20. BIN
      pc/src/assets/images/home/news_02.png
  21. BIN
      pc/src/assets/images/home/news_02@2x.png
  22. BIN
      pc/src/assets/images/home/news_03.png
  23. BIN
      pc/src/assets/images/home/news_03@2x.png
  24. BIN
      pc/src/assets/images/home/news_04.png
  25. BIN
      pc/src/assets/images/home/news_04@2x.png
  26. BIN
      pc/src/assets/images/home/solutions-house.png
  27. BIN
      pc/src/assets/images/home/solutions-house@2x.png
  28. BIN
      pc/src/assets/images/home/space_01.png
  29. BIN
      pc/src/assets/images/home/space_01@2x.png
  30. BIN
      pc/src/assets/images/home/space_02.png
  31. BIN
      pc/src/assets/images/home/space_02@2x.png
  32. BIN
      pc/src/assets/images/home/space_03.png
  33. BIN
      pc/src/assets/images/home/space_03@2x.png
  34. 6 0
      pc/src/assets/style/public.scss
  35. 58 48
      pc/src/page/home2/index.vue
  36. 100 222
      pc/src/page/home2/style.scss
  37. 24 56
      pc/src/page/layout/header/index.vue
  38. 22 192
      pc/src/page/layout/header/istyle.scss
  39. 4 3
      pc/src/store/language/home_cn.js
  40. 2 1
      pc/src/util/http.js

+ 7 - 0
pc/build/webpack.dev.conf.js

@@ -10,6 +10,7 @@ const HtmlWebpackPlugin = require('html-webpack-plugin')
 const FriendlyErrorsPlugin = require('friendly-errors-webpack-plugin')
 const portfinder = require('portfinder')
 
+// const HOST = '192.168.0.172'
 const HOST = '0.0.0.0'
 const PORT = process.env.PORT && Number(process.env.PORT)
 
@@ -42,6 +43,12 @@ const devWebpackConfig = merge(baseWebpackConfig, {
     quiet: true, // necessary for FriendlyErrorsPlugin
     watchOptions: {
       poll: config.dev.poll,
+    },
+    proxy: {
+      '/api': {
+        target: 'https://www.4dkankan.com',
+        changeOrigin: true,
+      }
     }
   },
   plugins: [

+ 12 - 8
pc/package-lock.json

@@ -6020,7 +6020,8 @@
         "ansi-regex": {
           "version": "2.1.1",
           "bundled": true,
-          "dev": true
+          "dev": true,
+          "optional": true
         },
         "aproba": {
           "version": "1.2.0",
@@ -6435,7 +6436,8 @@
         "safe-buffer": {
           "version": "5.1.2",
           "bundled": true,
-          "dev": true
+          "dev": true,
+          "optional": true
         },
         "safer-buffer": {
           "version": "2.1.2",
@@ -6491,6 +6493,7 @@
           "version": "3.0.1",
           "bundled": true,
           "dev": true,
+          "optional": true,
           "requires": {
             "ansi-regex": "^2.0.0"
           }
@@ -6534,12 +6537,14 @@
         "wrappy": {
           "version": "1.0.2",
           "bundled": true,
-          "dev": true
+          "dev": true,
+          "optional": true
         },
         "yallist": {
           "version": "3.0.3",
           "bundled": true,
-          "dev": true
+          "dev": true,
+          "optional": true
         }
       }
     },
@@ -8709,10 +8714,9 @@
       }
     },
     "js-base64": {
-      "version": "2.5.1",
-      "resolved": "http://registry.npm.taobao.org/js-base64/download/js-base64-2.5.1.tgz",
-      "integrity": "sha1-Hvo57yxfeYC7F4St5KivLeMpESE=",
-      "dev": true
+      "version": "2.6.2",
+      "resolved": "https://registry.npm.taobao.org/js-base64/download/js-base64-2.6.2.tgz?cache=0&sync_timestamp=1593072098529&other_urls=https%3A%2F%2Fregistry.npm.taobao.org%2Fjs-base64%2Fdownload%2Fjs-base64-2.6.2.tgz",
+      "integrity": "sha1-z5MBvFzHVokqmmyNcTgyLllE+w0="
     },
     "js-beautify": {
       "version": "1.10.2",

+ 2 - 2
pc/src/App.vue

@@ -1,5 +1,5 @@
 <template>
-  <div id="app" :style="{transform:scale!==1 && gre150? `scale(${scale})`:'none','paddingTop':deviceLogin?'0px':'68px'}">
+  <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>
@@ -151,7 +151,7 @@ export default {
 
 <style lang="scss" scoped>
 #app {
-  padding-top: 68px;
+  padding-top: 80px;
   overflow-x: hidden;
   width: 100%;
   transform-origin: left top;

BIN
pc/src/assets/images/home/4case_01.png


BIN
pc/src/assets/images/home/4case_01@2x.png


BIN
pc/src/assets/images/home/4case_02.png


BIN
pc/src/assets/images/home/4case_02@2x.png


BIN
pc/src/assets/images/home/4case_03.png


BIN
pc/src/assets/images/home/4case_03@2x.png


BIN
pc/src/assets/images/home/4case_04.png


BIN
pc/src/assets/images/home/4case_04@2x.png


BIN
pc/src/assets/images/home/bottom-bg.png


BIN
pc/src/assets/images/home/bottom-bg@2x.png


BIN
pc/src/assets/images/home/china.png


BIN
pc/src/assets/images/home/china@2x.png


BIN
pc/src/assets/images/home/logo-cn.png


BIN
pc/src/assets/images/home/logo-cn@2x.png


BIN
pc/src/assets/images/home/news_01.png


BIN
pc/src/assets/images/home/news_01@2x.png


BIN
pc/src/assets/images/home/news_02.png


BIN
pc/src/assets/images/home/news_02@2x.png


BIN
pc/src/assets/images/home/news_03.png


BIN
pc/src/assets/images/home/news_03@2x.png


BIN
pc/src/assets/images/home/news_04.png


BIN
pc/src/assets/images/home/news_04@2x.png


BIN
pc/src/assets/images/home/solutions-house.png


BIN
pc/src/assets/images/home/solutions-house@2x.png


BIN
pc/src/assets/images/home/space_01.png


BIN
pc/src/assets/images/home/space_01@2x.png


BIN
pc/src/assets/images/home/space_02.png


BIN
pc/src/assets/images/home/space_02@2x.png


BIN
pc/src/assets/images/home/space_03.png


BIN
pc/src/assets/images/home/space_03@2x.png


+ 6 - 0
pc/src/assets/style/public.scss

@@ -14,6 +14,12 @@ $theme-color:#1fe4dc;
   background-color: #fff;
 }
 
+.container {
+  width: 1276px;
+  min-width: 1276px;
+  margin: 0 auto;
+}
+
 .mask {
   position: fixed;
   left: 0;

+ 58 - 48
pc/src/page/home2/index.vue

@@ -3,36 +3,45 @@
     <div class="plate01">
       <div class="my-video">
         <video :src="language==='en'?`${$cdn}video/banner1.mp4`:`${$cdn}video/4dkkPRO_zh.mp4`" autoplay muted loop></video>
-      </div>
-    </div>
-    <div class="plate02">
-      <div class="logo"><img :src="`${$cdn}images/plate_icon.png`" ></div>
-      <div class="booking">
-        <div>
-          <div class="img-pro">
-            <img class="img-banner" :src="`${$cdn}images/banner_pro-white.png`" >
-            <!-- <img class="img-tag" :src="language==='en'?`${$cdn}images/booking-tag-en.png`:`${$cdn}images/booking-tag.png`" alt=""> -->
+        <div class="video-info">
+          <h1>四维看看Pro</h1>
+          <p>精准实景复刻 传递空间价值</p>
+          <div class="actions-w">
+            <router-link class="buy-btn" to="purchase">立即购买</router-link>
+            <router-link class="action-link" to="/about">了解更多</router-link>
+            <span class="watch-btn action-link">观看视频</span>
           </div>
-          <div class="info">
-            <img :src="language==='en'?`${$cdn}images/booking-txt-en.png`:`${$cdn}images/zaonianjia.png`" alt="">
-            <div class="btns" >
-              <div @click="gobuy" class="button"><vcenter><img :src="`${$cdn}images/product_icon_arrow.png`" alt=""></vcenter></div>
-              <a @click="gobuy" class="button purchase">{{langHome.booking.btn}}</a>
-            </div>
-            <!-- <div class="info-dec" :style="{position:language==='en'?'static':'relative'}">{{langHome.booking.sub}}</div> -->
+          <div class="distributor">
+            <router-link to="/" class="">成为经销商</router-link>
           </div>
         </div>
       </div>
-
-      <div ref="homeLayout" class="homeLayout">
-        <div class="plate" v-for="(item,i) in sequenceArr" :key="i">
-          <h2 class="b-title">{{item.name}}</h2>
-          <p class="b-label">{{item.sub}}</p>
-          <sequence :runAnimation="item.runAnimation" :img="`${$cdn}images/sequence/v${item.img}.jpg`" />
+    </div>
+    <div class="plate02 container">
+      <h1 class="common-title">行业解决方案</h1>
+      <ul class="programme-list">
+        <li class="programme-item" v-for="(item, index) in programme" :key="index">
+          {{ item }}
+        </li>
+      </ul>
+      <div class="solution-content">
+        <img class="" src="@/assets/images/home/solutions-house.png" alt="">
+        <div class="solution-intro">
+          <h4>房产营销</h4>
+          <p>海量复刻真房源</p>
+          <ul>
+            <li>AI自动建模,高效复刻真实房源</li>
+            <li>云带看/云讲房,全方位介绍房源信息</li>
+            <li>易上手操作,人人都能掌握拍摄流程</li>
+            <li>专业地产营销系统,高效管理租售信息</li>
+          </ul>
+          <a href="javascript:;" class="more">更多 ></a>
         </div>
       </div>
     </div>
-
+    <div class="plate03 container">
+      <h1 class="common-title">看看空间</h1>
+    </div>
     <div class="plate04">
       <img :src="`${$cdn}images/background_03.png`" alt="" class="hxbg hxbg-3">
       <div class="info">
@@ -110,7 +119,8 @@ export default {
       item2: this.$cdn + 'video/item2.mp4',
       innerH: window.innerHeight,
       devicePixelRatio: detectZoom(),
-      startNumCount: false
+      startNumCount: false,
+      programme: ['房产营销', '线上展会', '数字文博', 'VR购物', '安防勘查']
     }
   },
   methods: {
@@ -146,34 +156,34 @@ export default {
         this.$bus.$emit('showAside')
       }
     })
-    this.sizeHandle = () => {
-      let ny = getPosition(this.$refs.numcount).y + this.$refs.numcount.offsetHeight
-      let sy = getPosition(this.$refs.slide).y + this.$refs.slide.offsetHeight
-      let height = getPosition(this.$refs.homeLayout).y
+    // this.sizeHandle = () => {
+    //   let ny = getPosition(this.$refs.numcount).y + this.$refs.numcount.offsetHeight
+    //   let sy = getPosition(this.$refs.slide).y + this.$refs.slide.offsetHeight
+    //   let height = getPosition(this.$refs.homeLayout).y
 
-      let items = Array.from(this.$refs.homeLayout.querySelectorAll('.plate'))
-      if (window.innerHeight + (window.scrollY || window.pageYOffset) > ny) {
-        this.startNumCount = true
-      }
+    //   let items = Array.from(this.$refs.homeLayout.querySelectorAll('.plate'))
+    //   if (window.innerHeight + (window.scrollY || window.pageYOffset) > ny) {
+    //     this.startNumCount = true
+    //   }
 
-      if (window.innerHeight + (window.scrollY || window.pageYOffset) + 400 > sy) {
-        this.slideActive = true
-      }
+    //   if (window.innerHeight + (window.scrollY || window.pageYOffset) + 400 > sy) {
+    //     this.slideActive = true
+    //   }
 
-      if (this.startNumCount && this.slideActive) {
-        window.removeEventListener('scroll', this.sizeHandle)
-      }
+    //   if (this.startNumCount && this.slideActive) {
+    //     window.removeEventListener('scroll', this.sizeHandle)
+    //   }
 
-      items.forEach((item, index) => {
-        let addHeight = item.offsetParent && (item.offsetParent.nodeName).toLowerCase() === 'body' ? (item.offsetTop + height) : (item.offsetTop + item.offsetParent.offsetTop + height)
-        if (addHeight <= window.innerHeight + (window.scrollY || window.pageYOffset) + 1200) {
-          this.sequenceArr[index]['runAnimation'] = false
-        } else {
-          this.sequenceArr[index]['runAnimation'] = true
-        }
-      })
-    }
-    window.addEventListener('scroll', this.sizeHandle)
+    //   items.forEach((item, index) => {
+    //     let addHeight = item.offsetParent && (item.offsetParent.nodeName).toLowerCase() === 'body' ? (item.offsetTop + height) : (item.offsetTop + item.offsetParent.offsetTop + height)
+    //     if (addHeight <= window.innerHeight + (window.scrollY || window.pageYOffset) + 1200) {
+    //       this.sequenceArr[index]['runAnimation'] = false
+    //     } else {
+    //       this.sequenceArr[index]['runAnimation'] = true
+    //     }
+    //   })
+    // }
+    // window.addEventListener('scroll', this.sizeHandle)
   },
   destroyed () {
     window.removeEventListener('scroll', this.sizeHandle)

+ 100 - 222
pc/src/page/home2/style.scss

@@ -2,6 +2,24 @@
   margin-bottom: 21px;
 }
 
+.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;
+    
+  }
+}
 .btns .button {
   height: 50px;
   padding-top: 0;
@@ -42,12 +60,63 @@
   .my-video{
     width: 100%;
     overflow: hidden;
+    position: relative;
     video {
       width: 100%;
       position: relative;
       // height: 684px;
       // object-fit: fill;
     }
+    .video-info {
+      position: absolute;
+      top: 33%;
+      left: 50%;
+      margin-left: -506px;
+      color: #fff;
+      line-height: 1;
+      h1 {
+        font-size: 42px;
+      }
+      p {
+        font-size: 24px;
+        margin: 20px 0 35px;
+      }
+      .buy-btn {
+        background: #1FE4DC;
+        height: 40px;
+        line-height: 40px;
+        color: #202020;
+        font-size: 16px;
+        text-align: center;
+        display: inline-block;
+        padding: 0 37px;
+        font-weight: 600;
+      }
+      .action-link {
+        font-size: 16px;
+        color: #fff;
+        margin-left: 25px;
+        position: relative;
+        &::after {
+          content: '';
+          display: block;
+          height: 1px;
+          width: 66px;
+          background: #fff;
+          position: absolute;
+          bottom: -1px;
+          left: 0;
+        }
+      }
+      .distributor {
+        color: #fff;
+        font-size: 16px;
+        margin-top: 26px;
+        a {
+          color: #fff;
+        }
+      }
+    }
   }
   
   
@@ -149,215 +218,51 @@
 
 .plate02 {
   position: relative;
-  top: -5px;
-  .logo {
-    position: absolute;
-    top: 0;
-    left: 50%;
-    transform: translateX(-50%) translateY(-50%);
-    width: 150px;
-    height: 150px;
-    background-color: #f7f7f8;
-    border-radius: 50%;
-    text-align: center;
-    z-index: 2;
-    > img {
-      margin-top: 30px;
-      animation: linear-jump 1s infinite ease-out alternate;
-    }
-  }
-  .booking{
-    background: url(https://4dscene.4dage.com/new4dkk/images/booking-bg.png) #f7f7f8 no-repeat center;
-    background-size: cover;
-    &>div{
-      max-width: 940px;
-      margin: 0 auto;
-      padding: 108px 0;
-      .img-pro{
-        position: relative;
-        width: 150px;
-        margin-right: 156px;
-        display: inline-block;
-        .img-banner{
-          width: 100%;
-        }
-        .img-tag{
-          position: absolute;
-          top: 0;
-          right: -120px;
-        }
-      }
-      
-      .info{
-        vertical-align: top;
-        display: inline-block;
-        margin-top: 40px;
-        max-width: 550px;
-        h2{
-          font-size: 36px;
-          margin-bottom: 0;
-          font-weight: bold;
-        }
-        h3{
-          font-size: 36px;
-          font-weight: 300;
-        }
-        p{
-          margin: 76px 0 20px;
-          font-size: 48px;
-          line-height: 1;
-          font-weight: 100;
-        }
-        .purchase{
-          width: 273px;
-          text-align:center;
-        }
-        .btns{
-          font-size: 0px;
-          margin-top: 50px;
-        }
-        .info-dec{
-          margin-top: 10px;
-          position: relative;
-          left: -10px;
-        }
-      }
-    }
+  .common-title {
+    margin-bottom: 67px;
   }
-
-  .hxjs {
-    z-index: 2;
-    position: relative;
-    padding-top: 95px;
-    text-align: center;
-    color: #151515;
-    .b-title{
-      margin-bottom: 21px;
-    }
-    p {
-      width: 1285px;
-      margin: 0 auto;
-    }
-
-    div {
-      width: 610px;
-      display: flex;
-      margin: 65px auto;
-      justify-content: space-between;
-
-      figure {
-        flex: none;
-        
-        figcaption {
-          text-align: center;
-        }
+  .programme-list {
+    display: flex;
+    font-size: 16px;
+    color: #909090;
+    margin-bottom: 24px;
+    > li {
+      padding-right: 30px;
+      border-right: 2px solid #909090;
+      margin-right: 30px;
+      &.active {
+        color: #202020;
       }
     }
   }
-
-  .item {
-    position: relative;
-    z-index: 2;
+  .solution-content {
     display: flex;
-    justify-content: space-between;
-    padding: 96px 0;
-    .media {
-      flex: 3;
-      video,
-      img {
-         width: 100%;
-      }
-      &.iframe {
-        position: relative;
-        >div {
-          padding-top: 75%;
-        }
-        .video{
-          position: relative;
-          left: 2px;
-        }
-        iframe {
-          position: absolute;
-          top: 0;
-          left: 0;
-          width: 100%;
-          height: 100%;
-        }
-      }
+    background: #F7F7F7;
+    .solution-intro {
+      flex: 1;
+      padding: 43px 0 0 45px;
     }
-
-    .content {
-      align-self: center;
-      color: #151515;
-      flex: 2;
-
-      .b-title {
-        max-width: 460px;
-      }
-
-      p {
-        font-weight: 100;
-        font-size: 18px;
-        max-width: 550px;
-      }
+    h4 {
+      font-size: 24px;
     }
-  }
-
-  .item-1 {
-    padding-top: 40px;
-    padding-bottom: 10px;
-    margin: 0 15%;
-    .content {
-      margin-left: 5%;
+    p {
+      margin: 26px 0;
     }
-  }
-
-  .item-2 {
-    margin:0 15%;
-    padding-bottom: 10px;
-    flex-direction: row-reverse;
-    .content{
-      margin-right: 6%;
+    ul {
+      padding-left: 20px;
     }
-    
-  }
-
-  .kjzs-img{
-    position: absolute;
-    width: 100vw;
-    height: 700px;
-    bottom: 20px;
-  }
-  .item-3 {
-    margin-right: 15%;
-    padding-bottom: 0;
-    
-    .content {
-      margin-left: 5%;
+    li {
+      line-height:38px;
+      list-style: initial;
     }
   }
+}
 
-  .hxbg-layout {
-    position: relative;
-  }
-
-  .hxbg {
-    position: absolute;
-    width: 100vw;
-    left: 0;
-    z-index: 1; 
-  }
-
-  .hxbg-1 {
-    bottom: 10px;
-  }
-
-  .hxbg-2 {
-    bottom: 0;
-    top: inherit;
+.plate03 {
+  .common-title {
+    margin-bottom: 76px;
   }
 }
-
 .plate04 {
   width: 100%;
   overflow: hidden;
@@ -632,33 +537,6 @@
       }
     }
     .plate02 {
-      .item{
-        .content{
-          h2{
-            max-width:530px;
-          }
-        }
-      }
-      .item-1{
-        margin: 0 11%;
-      }
-      .item-2{
-        margin-left: 10%;
-        .content{
-          margin-right: 7%;
-          h2{
-            max-width: 485px;
-          }
-        }
-      }
-      .item-3{
-        margin-right:8%;
-        .content{
-          h2{
-            max-width: 600px;
-          }
-        }
-      }
     }
   }
 }

+ 24 - 56
pc/src/page/layout/header/index.vue

@@ -1,65 +1,33 @@
 <template>
   <div class="header-layout">
-    <div class="logo-layout">
-      <router-link :to="{name: 'home'}" class="logo">
-        <vcenter>
-          <img :src="language === 'en'?`${$cdn}images/logo-en.png`:`${$cdn}images/logo.png`" alt>
-        </vcenter>
-      </router-link>
-    </div>
-    <div class="menu">
-      <div class="lang" :style="{maxWidth:isWide?'300px':'150px'}">
-        <vcenter>
-          <a :class="{active: language === 'en'}" @click="$store.commit('change_language', 'en')">En</a>
-          <a :class="{active: language === '中'}" @click="$store.commit('change_language', '中')">中</a>
-        </vcenter>
+    <div class="container">
+      <div class="logo-layout">
+        <router-link :to="{name: 'home'}" class="logo">
+          <vcenter>
+            <img :src="language === 'en' ? `@/assets/images/home/logo-cn.png` : require('@/assets/images/home/logo-cn.png')" alt>
+          </vcenter>
+        </router-link>
       </div>
-      <div
-        class="list"
-        ref="list"
-        @mouseleave="hoverCp !== 'isearch' && hoverCp !== 'ilogin' && hideCp()"
-      >
-        <a
-          v-for="nav in langHeader.navs"
-          :key="nav.text"
-          @mouseenter="hoverCp !== 'isearch' && hoverCp !== 'ilogin' && showCp(nav.cp, 135)"
-          @click="clickHandle(nav)"
-          :class="{active: hoverCp === nav.cp}"
-        >{{nav.text}}</a>
-
-        <div class="child-layout" :style="{maxHeight: height + 'px'}" ref="navLayout">
-          <i class="silp" :style="{left: split + 'px',height:hoverCp === 'isearch'?'auto':'100%'}"></i>
-          <slot :cp="hoverCp"/>
+      <div class="menu">
+        <div
+          class="list"
+          ref="list"
+        >
+          <a
+            v-for="nav in langHeader.navs"
+            :key="nav.text"
+            :class="{active: hoverCp === nav.cp}"
+          >{{nav.text}}</a>
         </div>
       </div>
-    </div>
-    <div class="ctrl">
-      <a class="search" ref='isearchref' @click="searchHandle" :class="{active: hoverCp === 'isearch'}">
-        <vcenter>
-          <i class="iconfont icon-sousuo open"></i>
-          <i class="iconfont icon-cuowu hide"></i>
-        </vcenter>
-      </a>
-      <a class="user" v-if="!isLogin" @click="loginHandle">
-        <vcenter>
-          <i class="iconfont icon-geren"></i>
-          <span>{{langHeader.login}}</span>
-        </vcenter>
-      </a>
-      <a class="user cart" :style="{width:language==='en'?'273px':'192px'}" v-else>
-        <div class="cart-user" @click="$router.push({name:deviceLogin?'scene':'information'})">
-          <div class="user-img" :style="{background:info.head?`url(${info.head}) 50% 50%/cover no-repeat`:`#e6e6e6 50% 50%/cover no-repeat`}"></div>
-          <ul class="user-hover">
-            <li class="item" @click="$router.push({name:deviceLogin?'scene':'information'})">{{langHeader.myaccount}}</li>
-            <li class="item" @click.stop="handleLogout">{{langHeader.logout}}</li>
-          </ul>
+      <div class="ctrl">
+        <div class="shop-btn">在线商城</div>
+        <div class="language-w">
+          <span class="country"></span>
+          <span class="language">简体中文</span>
         </div>
-        <div class="cart-icon" @click="loginHandle('cart')">
-          <i class="iconfont icon-cart"></i>
-          <sup v-if="language!=='en'">{{count>99?'99+':count}}</sup>
-          <span>{{langHeader.cart}}</span>
-        </div>
-      </a>
+        <div class="user">1</div>
+      </div>
     </div>
   </div>
 </template>

+ 22 - 192
pc/src/page/layout/header/istyle.scss

@@ -1,12 +1,15 @@
 .header-layout {
   $mc: .5s cubic-bezier(.77, 0, .175, 1);
   $ts: all $mc;
-  $split: #7f7f7f;
-  background-color: #101010;
+  background-color: #fff;
   display: flex;
   color: #fff;
   justify-content: space-between;
-
+  color: #202020;
+  height: 80px;
+  .container {
+    display: flex;
+  }
   .child-layout {
     position: absolute;
     top: 100%;
@@ -26,9 +29,9 @@
   }
 
   .logo-layout {
-    flex: 0 1 300px;
     text-align: center;
-
+    text-align: left;
+    margin-right: 52px;
     .logo {
       position: relative;
       width: 150px;
@@ -67,46 +70,18 @@
     }
 
     .list {
-      border-left: 1px solid $split;
-      padding: 0 34px;
       display: flex;
-      min-width: 480px;
-      max-width: 750px;
       justify-content: space-between;
-      flex: 4;
-      height: 71px;
+      height: 100%;
       a {
         display: inline-block;
-        padding: 25px 20px 25px 0;
+        padding: 30px 47px 25px 0;
         font-size: 16px;
         text-decoration: none;
         font-weight: bold;
         position: relative;
         flex: 0 0 auto;
         transition: color $mc;
-        
-        &:last-of-type,&:nth-last-child(3){
-          &::before,
-          &::after {
-            display: none;
-          }
-        }
-        &::before,
-        &::after {
-          content: '';
-          border: 9px solid transparent;
-          border-top-color: #fff;
-          border-left-width: 5px;
-          border-right-width: 5px;
-          position: absolute;
-          margin-top: 4px;
-          right: 0;
-          top: 50%;
-          transition: $ts;
-          z-index: 1;
-          transform-origin: center 20%;
-          transform: translateY(-50%);
-        }
 
         &::before {
           z-index: 2;
@@ -134,171 +109,26 @@
     flex: 0 0 auto;
     display: flex;
     align-items: center;
-    a {
-      display: inline-block;
-      text-decoration: none;
-      padding: 0 14px;
-      height: 100%;
-      i,
-      span {
-        display: inline-block;
-        vertical-align: middle;
-      }
-
-      i {
-        font-size: 24px;
-      }
-
-      span {
-        font-size: 16px;
-        margin-left: 4px;
-        font-weight: bold;
-      }
-      .avatar{
-        width: 68px;
-        height: 68px;
-      }
-
-      &.user {
-        background-color: #fff;
-        color: #101010;
-        width: 120px;
-        text-align: center;
-        box-sizing: border-box;
-      }
-
-      &.cart{
-        width: 192px;
-        height: 100%;
-        background-color: #101010;
-        color: #fff;
-        padding: 0;
-        display: flex;
-        align-items: center;
-        cursor: auto;
-        .cart-user{
-          display: inline-block;
-          background: #fff;
-          color: #101010;
-          width: 72px;
-          height: 100%;
-          font-size: 0;
-          position: relative;
-          .user-img{
-            width: 100%;
-            height: 100%;
-            display: inline-block;
-            cursor: pointer;
-          }
-          .user-hover{
-            position: absolute;
-            display: none;
-            top: 100%;
-            left: 50%;
-            transform: translateX(-50%);
-            padding: 8px 0;
-            background-color: #fff;
-            border-radius: 4px;
-            box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
-            .item{
-              height: 40px;
-              line-height: 40px;
-              padding: 0 18px;
-              text-align: center;
-              white-space: nowrap;
-              font-size: 14px;
-              cursor: pointer;
-              &:hover{
-                background: #F2F2F2;
-              }
-            }
-          }
-          &:hover{
-            .user-hover{
-              display: block;
-            }
-          }
-        }
-        
-        .cart-icon{
-          padding: 0 14px;
-          display: inline-block;
-          cursor: pointer;
-          position: relative;
-          sup{
-            min-width: 14px;
-            min-height: 14px;
-            font-size: 12px;
-            border-radius: 50%;
-            line-height: 14px;
-            padding: 0 2px;
-            top: -8px;
-            left: 30px;
-            display: inline-block;
-            position: absolute;
-            background-color: #ff0000;
-          }
-        }
-        .canuse{
-          color: #ccc;
-          // cursor: url(https://4dscene.4dage.com/new4dkk/images/forbid.png),auto;
-        }
-      }
-      
+    font-size: 16px;
+    .shop-btn {
+      width: 140px;
+      height: 40px;
+      line-height: 40px;
+      background-color: #1FE4DC;
+      text-align: center;
+      font-weight: 600;
+      margin-right: 25px;
     }
-
-    .search {
-      position: relative;
-
-      .hide,
-      .open {
-        transition: $ts
-      }
-
-      .open {
-        opacity: 1;
-        transform: scale(1);
-      }
-
-      .hide {
-        opacity: 0;
-        transform: scale(0);
-        position: absolute;
-        left: 50%;
-        top: 50%;
-        transform: translateX(-50%) translateY(-50%);
-        font-size: 16px;
-      }
-
-      &.active {
-        .open {
-          opacity: 0;
-          transform: scale(0);
-        }
-
-        .hide {
-          opacity: 1;
-          transform: scale(1) translateX(-50%) translateY(-50%);
-        }
-      }
+    .language {
+      margin-right: 18px;
+      color: #8F8F8F;
     }
-   
   }
 
 }
 
 @media screen and (max-width: 1600px){
-  .header-layout{
-    .logo-layout{
-      flex: 0 1 380px;
-    }
-  }
 }
 
 @media screen and (max-width: 1450px){
-  .header-layout{
-    .logo-layout{
-      flex: 0 1 240px;
-    }
-  }
 }

+ 4 - 3
pc/src/store/language/home_cn.js

@@ -123,10 +123,11 @@ export default {
   },
   headers: {
     navs: [
-      {text: '产品购买', cp: 'purchase'},
-      {text: '行业应用', cp: 'case_overview'},
-      {text: '服务支持', cp: 'service_overview'},
+      {text: '核心技术', cp: 'purchase'},
+      {text: '行业解决方案', cp: 'case_overview'},
+      {text: '看看空间', cp: 'service_overview'},
       {text: '核心技术', cp: 'location'},
+      {text: '服务支持', cp: 'location'},
       {text: '关于我们', cp: 'about'}
     ],
     login: '登录',

+ 2 - 1
pc/src/util/http.js

@@ -6,7 +6,8 @@ import Vue from 'vue'
 let vue = new Vue()
 // import qs from 'qs'
 const exceptUrls = ['/sso/user/logout', '/sso/user/sendUserInfo', '/user/order/queryOrderStatus', '/user/checkToken']
-axios.defaults.baseURL = process.env.NODE_ENV === 'development' ? 'https://test.4dkankan.com/api' : '/api'
+// axios.defaults.baseURL = process.env.NODE_ENV === 'development' ? 'https://test.4dkankan.com/api' : '/api'
+axios.defaults.baseURL = process.env.NODE_ENV === 'development' ? '/api' : '/api'
 
 // axios.defaults.baseURL = process.env.NODE_ENV === 'development' ? 'http://192.168.0.207:8087/api' : '/api'
 // 请求超时时限