http to https

config/index.js

@@ -13,7 +13,7 @@ module.exports = {
     proxyTable: {},
 
     // Various Dev Server settings
-    host: '192.168.0.103', // can be overwritten by process.env.HOST
+    host: '192.168.0.197', // can be overwritten by process.env.HOST
     port: 8080, // can be overwritten by process.env.PORT, if port is in use, a free one will be determined
     autoOpenBrowser: false,
     errorOverlay: true,

src/components/introduce/style.css

@@ -2,12 +2,14 @@
   margin: 50px;
 }
 .i-title{
+  max-width: 50vw;
+  margin-left: 17px;
   font-size: 28px;
   font-weight: bold;
   line-height: 1.5;
 }
 .i-ul{
-  width: 500px;
+  width: 600px;
   padding-left: 20px;
 }
 .i-ul li{
@@ -16,7 +18,8 @@
 .li-title{
   font-weight: bold;
   font-size: 14px;
-  line-height: 3;
+  line-height: 2;
+  margin-bottom: 20px;
 }
 
 .li-detail{
@@ -26,7 +29,7 @@
 
 @media screen and (max-width: 1400px) {
   .i-title{
-    font-size: 24px
+    font-size: 24px;
   }
   .i-ul{
     width: 400px;

src/components/rotateimg/index.vue

@@ -1,17 +1,17 @@
 <template>
   <div class="r-img">
     <div class="r-normal" @click="clickHandle">
-      <img :src="imgs[0].img" alt>
+      <img :src="cover[0]" alt>
     </div>
     <div class="rotate">
-      <img :src="imgs[1].img" alt>
+      <img :src="cover[1]" alt>
     </div>
   </div>
 </template>
 
 <script>
 export default {
-  props: ['imgs'],
+  props: ['imgs', 'cover'],
   methods: {
     clickHandle () {
       this.$emit('clickHandle')
@@ -26,14 +26,16 @@ export default {
 }
 
 .r-img div {
-  width: 20vw;
-  height: 15vw;
+  width: 17vw;
+  height: 18vw;
   position: absolute;
   top: 0;
   z-index: 99;
   border: 8px #fff solid;
   box-sizing: border-box;
   overflow: hidden;
+  box-shadow: 1px 1px 10px rgba(0, 0, 0, 0.5);
+
 }
 
 .r-img div img {
@@ -41,17 +43,26 @@ export default {
   width: 100%;
   height: 100%;
 }
-.r-img div:hover img {
+/* .r-img div:hover img {
   transform: scale(1.1);
   transition: transform 0.3s ease;
+} */
+.r-img .r-normal{
+  transform: rotate(0);
+  transition: transform 0.3s ease;
+  transform-origin:right top;
+  cursor: pointer;
 }
 
+.r-img .r-normal:hover{
+  transform: rotate(-5deg);
+}
 .r-img .rotate {
   transform: rotate(17deg);
   z-index: 0;
 }
 
-@media screen and (max-width: 770px) {
+@media screen and (max-width: 1400px) {
   .r-img div {
     top: 18vw;
   }

src/pages/join/index.vue

@@ -5,28 +5,24 @@
       <ctitle :title="'Join Us'"></ctitle>
       <div class="join-l" style="padding-bottom:0" :class="{'one':!isMobile}">
         <template v-if="isMobile">
-          <mRotateimg :imgs="content.text[0].imgs" @clickHandle="screens = content.text[0].imgs"/>
+          <mRotateimg :cover="content.text[0].cover" :imgs="content.text[0].imgs" @clickHandle="screens = content.text[0].imgs"/>
           <mIntroduce class="mjoin1-l" :content="content.text[0]"/>
         </template>
         <template v-else>
-          <rotateimg class="jl-left" :imgs="content.text[0].imgs" @clickHandle="screens = content.text[0].imgs"/>
+          <rotateimg :cover="content.text[0].cover" class="jl-left" :imgs="content.text[0].imgs" @clickHandle="screens = content.text[0].imgs"/>
           <introduce class="jl-right" :content="content.text[0]"/>
         </template>
       </div>
       <div class="join-r" :class="{'mjoin-r':isMobile,'two':!isMobile}">
         <template v-if="isMobile">
-          <div class="mt-con">
-            <div class="mt-body">
-              <img @click="screens = content.text[1].imgs" :src="content.text[1].imgs[0].img" alt>
-            </div>
-          </div>
+          <mRotateimg :cover="content.text[1].cover" :imgs="content.text[1].imgs" @clickHandle="screens = content.text[1].imgs"/>
           <mIntroduce class="mt-intro" :content="content.text[1]"/>
         </template>
         <template v-else>
           <introduce class="jr-left" :content="content.text[1]"/>
           <div class="jr-right">
             <div class="imgcon">
-              <img @click="screens = content.text[1].imgs" :src="content.text[1].imgs[0].img" alt>
+              <rotateimg :cover="content.text[1].cover" :imgs="content.text[1].imgs" @clickHandle="screens = content.text[1].imgs"/>
             </div>
           </div>
         </template>
@@ -34,11 +30,11 @@
       </div>
       <div class="join-l three" :class="{'mjoin-l':isMobile}">
         <template v-if="isMobile">
-          <mRotateimg :imgs="content.text[2].imgs" @clickHandle="screens = content.text[2].imgs"/>
+          <mRotateimg :cover="content.text[2].cover" :imgs="content.text[2].imgs" @clickHandle="screens = content.text[2].imgs"/>
           <mIntroduce class="mth-bg" :content="content.text[2]"/>
         </template>
         <template v-else>
-          <rotateimg class="jl-left" :imgs="content.text[2].imgs" @clickHandle="screens = content.text[2].imgs"/>
+          <rotateimg :cover="content.text[2].cover" class="jl-left" :imgs="content.text[2].imgs" @clickHandle="screens = content.text[2].imgs"/>
           <introduce class="jl-right" :content="content.text[2]"/>
         </template>
       </div>

src/pages/join/style.css

@@ -32,7 +32,7 @@
 .join-r .jr-right{
   width: 40%;
   position: absolute;
-  right: 10%;
+  right: 4%;
   top: 50%;
   transform: translateY(-50%);
   padding: 180px 0;
@@ -41,10 +41,7 @@
 .join-r .jr-right .imgcon{
   width: 20vw;
   height: 15vw;
-  border: 8px #fff solid;
   box-sizing: border-box;
-  overflow: hidden;
- 
 }
 
 .join-r .jr-right .imgcon img{
@@ -89,19 +86,19 @@
   margin: 0 auto;
 }
 
-@media screen and (max-width: 1400px) {
+@media screen and (max-width: 1500px) {
   .join-l,.join-r{
     padding: 100px 0;
   }
   .join-r .jr-left{
     padding-left: 10%;
   }
-}
-
-@media screen and (max-width: 1400px) {
   .join-r .jr-right{
     right: 0;
   }
+  .join-r .jr-right>>>.r-img div{
+    top:0;
+  }
 }
 
 

src/util/text/cn.js

@@ -252,7 +252,7 @@ const cn = {
   },
   meeting: {
     c1: {
-      video: `http://4dkk.4dage.com/video/cgaii/CMCAI_1st.mp4`,
+      video: `https://4dkk.4dage.com/video/cgaii/CMCAI_1st.mp4`,
       background: require('@/assets/images/bg_3_1.jpg'),
       mBackground: require('@/assets/images/CMCAI-2016.png'),
       mL: require('@/assets/images/01_left.png'),
@@ -265,7 +265,7 @@ const cn = {
       detail: 'CGAIC 2016, which is themed “Virtuality, Intelligence and Innovation”, invited more than 300 top talents at home and abroad in the field of smart manufacturing and digital museum, and hosted a feast of thought clashes. China-Germany Artificial Intelligence Institute was founded as the fruit of the Conference.'
     },
     c2: {
-      video: `http://4dkk.4dage.com/video/cgaii/CMCAI_2nd.mp4`,
+      video: `https://4dkk.4dage.com/video/cgaii/CMCAI_2nd.mp4`,
       background: require('@/assets/images/bg_3_2.jpg'),
       mBackground: require('@/assets/images/CMCAI-2017.png'),
       mL: require('@/assets/images/02_left.png'),
@@ -278,7 +278,7 @@ const cn = {
       detail: 'With more than 500 participants, CGAIC 2017 received outstanding scholars as keynote speakers and organized AI workshops and roadshows for Chinese and German AI enterprises. The conference has witnessed China’s transformation from a manufacturing power to a leading role in smart manufacturing.'
     },
     c3: {
-      video: `http://4dkk.4dage.com/video/cgaii/CMCAI_3st.mp4`,
+      video: `https://4dkk.4dage.com/video/cgaii/CMCAI_3st.mp4`,
       background: require('@/assets/images/bg_3_3.jpg'),
       mBackground: require('@/assets/images/CMCAI-2018.png'),
       mL: require('@/assets/images/03_left.png'),
@@ -323,21 +323,21 @@ const cn = {
   pJoin: {
     text: [
       {
-        imgs: [{
-          img: `${$cdn}/images/join-us/img_join_platform01.jpg`
-        }, {
-          img: `${$cdn}/images/join-us/img_join_platform02.jpg`
-        }, {
-          img: `${$cdn}/images/join-us/img_join_platform03.jpg`
-        }, {
-          img: `${$cdn}/images/join-us/img_join_platform04.jpg`
-        }, {
-          img: `${$cdn}/images/join-us/img_join_platform05.jpg`
-        }, {
-          img: `${$cdn}/images/join-us/img_join_platform06.jpg`
-        }, {
-          img: `${$cdn}/images/join-us/img_join_platform07.jpg`
-        }],
+        cover: [
+          `${$cdn}/images/join-us/zdhz1.jpg`,
+          `${$cdn}/images/join-us/zdhz2.jpg`
+        ],
+        imgs: [
+          {
+            img: `${$cdn}/images/join-us/a1.jpg`
+          },
+          {
+            img: `${$cdn}/images/join-us/a2.jpg`
+          },
+          {
+            img: `${$cdn}/images/join-us/a3.jpg`
+          }
+        ],
         title: 'Highland of AI Technology<br/>Model of Sino-German cooperation',
         sub: [{
           title: 'Technology exchange platform',
@@ -351,21 +351,48 @@ const cn = {
         } ]
       },
       {
-        imgs: [{
-          img: `${$cdn}/images/join-us/img_join_future01.jpg`
-        }, {
-          img: `${$cdn}/images/join-us/img_join_future02.jpg`
-        }, {
-          img: `${$cdn}/images/join-us/img_join_future03.jpg`
-        }, {
-          img: `${$cdn}/images/join-us/img_join_future04.jpg`
-        }, {
-          img: `${$cdn}/images/join-us/img_join_future05.jpg`
-        }, {
-          img: `${$cdn}/images/join-us/img_join_future06.jpg`
-        }, {
-          img: `${$cdn}/images/join-us/img_join_future07.jpg`
-        }],
+        cover: [
+          `${$cdn}/images/join-us/rcpy1.jpg`,
+          `${$cdn}/images/join-us/rcpy2.jpg`
+        ],
+        imgs: [
+          {
+            img: `${$cdn}/images/join-us/b1.jpg`
+          },
+          {
+            img: `${$cdn}/images/join-us/b2.jpg`
+          },
+          {
+            img: `${$cdn}/images/join-us/b3.jpg`
+          },
+          {
+            img: `${$cdn}/images/join-us/b4.jpg`
+          },
+          {
+            img: `${$cdn}/images/join-us/b5.jpg`
+          },
+          {
+            img: `${$cdn}/images/join-us/b6.jpg`
+          },
+          {
+            img: `${$cdn}/images/join-us/b7.jpg`
+          },
+          {
+            img: `${$cdn}/images/join-us/b8.jpg`
+          },
+          {
+            img: `${$cdn}/images/join-us/b9.jpg`
+          },
+          {
+            img: `${$cdn}/images/join-us/b10.jpg`
+          },
+          {
+            img: `${$cdn}/images/join-us/b11.jpg`
+          },
+          {
+            img: `${$cdn}/images/join-us/b12.jpg`
+          }
+        ],
         title: 'Era of Digital Economy<br/>Big Data for the Future Life',
         sub: [{
           title: 'R&D and manufacturer center of China-Germany high-end hardware and software integration',
@@ -379,21 +406,33 @@ const cn = {
         } ]
       },
       {
-        imgs: [{
-          img: `${$cdn}/images/join-us/img_join_welfare01.jpg`
-        }, {
-          img: `${$cdn}/images/join-us/img_join_welfare02.jpg`
-        }, {
-          img: `${$cdn}/images/join-us/img_join_welfare03.jpg`
-        }, {
-          img: `${$cdn}/images/join-us/img_join_welfare04.jpg`
-        }, {
-          img: `${$cdn}/images/join-us/img_join_welfare05.jpg`
-        }, {
-          img: `${$cdn}/images/join-us/img_join_welfare06.jpg`
-        }, {
-          img: `${$cdn}/images/join-us/img_join_welfare07.jpg`
-        }],
+        cover: [
+          `${$cdn}/images/join-us/tdfl1.jpg`,
+          `${$cdn}/images/join-us/tdfl2.jpg`
+        ],
+        imgs: [
+          {
+            img: `${$cdn}/images/join-us/c1.jpg`
+          },
+          {
+            img: `${$cdn}/images/join-us/c2.jpg`
+          },
+          {
+            img: `${$cdn}/images/join-us/c3.jpg`
+          },
+          {
+            img: `${$cdn}/images/join-us/c4.jpg`
+          },
+          {
+            img: `${$cdn}/images/join-us/c5.jpg`
+          },
+          {
+            img: `${$cdn}/images/join-us/c6.jpg`
+          },
+          {
+            img: `${$cdn}/images/join-us/c7.jpg`
+          }
+        ],
         title: 'Work together with beautiful minds <br/>Everyday surprise',
         sub: [{
           title: 'Limitless tea,coffee,snacks,fruits available;'