'专家团体

components/home/footer.vue

@@ -58,9 +58,9 @@
 								<div class="officle">
 									<p>逻辑狗</p>
 									<p>中德智慧教育</p>
-									<div class="qr">
-										<img src="~/assets/images/index/account_01.png" alt="" srcset="">
-									</div>
+								</div>
+								<div class="qr">
+									<img src="~/assets/images/index/account_01.png" alt="" srcset="">
 								</div>
 							</li>
 							<li class="second">
@@ -68,9 +68,9 @@
 								<div class="officle">
 									<p>逻辑狗</p>
 									<p>logico</p>
-									<div class="qr">
-										<img src="~/assets/images/index/account_02.png" alt="" srcset="">
-									</div>
+								</div>
+								<div class="qr">
+									<img src="~/assets/images/index/account_02.png" alt="" srcset="">
 								</div>
 							</li>
 							<li class="three">
@@ -78,9 +78,9 @@
 								<div class="officle">
 									<p>逻辑狗</p>
 									<p>妈咪社团</p>
-									<div class="qr">
-										<img src="~/assets/images/index/account_03.png" alt="" srcset="">
-									</div>
+								</div>
+								<div class="qr">
+									<img src="~/assets/images/index/account_03.png" alt="" srcset="">
 								</div>
 							</li>
 						</ul>
@@ -199,6 +199,7 @@
 					display: flex;
 					li {
 						// margin-right: 82px;
+						position: relative;
 						&:last-child {
 							margin-right: 0px;
 						}
@@ -213,27 +214,30 @@
 							font-size:12px;
 							line-height:17px;
 						}
+						&:hover {
+							.qr {
+								display: block;
+							}
+						}
 					}
 					.officle {
 						margin-top: 27px;
 						position: relative;
 					}
 				}
-				.wx {
-					width: 57px;
-					height: 46px;
-					&:hover + .officle {
-						.qr {
-							display: block;
-						}
-					}
-				}
+				// .wx {
+				// 	width: 57px;
+				// 	height: 46px;
+				// 	&:hover + .qr {
+				// 		display: block;
+				// 	}
+				// }
 				.qr {
 					display: none;
 					position: absolute;
 					left: 50%;
-					bottom: -20px;
-					transform: translate(-50%, 100%);
+					top: 0;
+					transform: translateX(-50%);
 					img {
 						width: 148px;
 						height: 144px;

nuxt.config.js

@@ -58,7 +58,10 @@ export default {
   */
   plugins: [
     { src: '@/plugins/element-ui', ssr: false },
-    { src: "@/plugins/vue-swiper", ssr: false }
+    { src: "@/plugins/vue-swiper", ssr: false },
+    {
+      src: '@/plugins/filter.js'
+    }
   ],
   /*
   ** Auto import components

package.json

@@ -22,6 +22,7 @@
     "file-loader": "^6.0.0",
     "fs": "^0.0.1-security",
     "jquery": "^3.5.1",
+    "moment": "^2.29.1",
     "nuxt": "^2.14.0",
     "nuxt-robots-module": "^1.5.1",
     "nuxt-seo-module": "^1.0.0",

pages/about/brand.vue

@@ -65,25 +65,25 @@
           :key="item.id"
         >
           <div class="top">
-            <img class="people-img" :src="item.imgUrl" alt="" @mouseenter="currentElement(item)">
-            <img
+            <img class="people-img" :src="item.imgUrl" alt="">
+            <!-- <img
               class="overlay-img"
               @mouseleave="currentMouserEnter = false"
               :style="{display:  currentMouserEnter && currentMouserId === item.id ? 'block' : 'none'}"
               src="http://res.training.luojigou.vip/FstkGdSgJ91jUeZFYT35-ZOdxXT2?imageView2/0/q/50|imageslim"
               alt=""
-            >
+            > -->
             <div class="people-intro">
               <div class="name">{{item.name}}</div>
               <div class="position">{{item.position}}</div>
             </div>
             <div
               class="intro"
-              :style="{display:  currentMouserEnter && currentMouserId === item.id ? 'block' : 'none'}"
             >
               <div class="intro-label">简历介绍</div>
               <div class="resume">{{item.resume}}</div>
             </div>
+            <div class="mask"></div>
           </div>
           <div class="bottom"></div>
         </div>
@@ -162,29 +162,29 @@ const kernelData = Object.freeze([
 const cultrueData = Object.freeze([
   {
     id: 0,
-    imgUrl:
-      "http://res.training.luojigou.vip/Fj0eXd5OYcJRX6z_yBEFbF0OW1Oy?imageView2/0/q/50|imageslim",
+    // imgUrl: "http://res.training.luojigou.vip/Fj0eXd5OYcJRX6z_yBEFbF0OW1Oy?imageView2/0/q/50|imageslim",
+    imgUrl: require("~/assets/images/about/cultrue_01@2x.png"),
     label: "宗旨",
     text: "关注儿童成长</br>服务中国母亲",
   },
   {
     id: 1,
-    imgUrl:
-      "http://res.training.luojigou.vip/FrhQqD5x8r45P0_Dod_21toOFgle?imageView2/0/q/50|imageslim",
+    // imgUrl: "http://res.training.luojigou.vip/FrhQqD5x8r45P0_Dod_21toOFgle?imageView2/0/q/50|imageslim",
+    imgUrl: require("~/assets/images/about/cultrue_02@2x.png"),
     label: "文化",
     text: "缔造愿景，追求卓越</br>共生共荣，体现价值",
   },
   {
     id: 2,
-    imgUrl:
-      "http://res.training.luojigou.vip/FuBgZGe-F3km2mVM4wByusZFFfAw?imageView2/0/q/50|imageslim",
+    // imgUrl: "http://res.training.luojigou.vip/FuBgZGe-F3km2mVM4wByusZFFfAw?imageView2/0/q/50|imageslim",
+    imgUrl: require("~/assets/images/about/cultrue_03@2x.png"),
     label: "愿景",
     text: "让中国的孩子幸福成长",
   },
   {
     id: 3,
-    imgUrl:
-      "http://res.training.luojigou.vip/FqOmEqUyO9YBjT65wqfSRr4gKFHD?imageView2/0/q/50|imageslim",
+    // imgUrl: "http://res.training.luojigou.vip/FqOmEqUyO9YBjT65wqfSRr4gKFHD?imageView2/0/q/50|imageslim",
+    imgUrl: require("~/assets/images/about/cultrue_04@2x.png"),
     label: "价值观",
     text:
       "客户第一</br>团队合力第二</br>专业专注</br>诚信公正</br>拥抱变化</br>激情快乐 ",
@@ -193,30 +193,30 @@ const cultrueData = Object.freeze([
 const ideaData = Object.freeze([
   {
     id: 0,
-    imgUrl:
-      "http://res.training.luojigou.vip/FgJw7WqbyCVkQJCgCBd07qipb_PI?imageView2/0/q/50|imageslim",
-    numUrl:
-      "http://res.training.luojigou.vip/FgX-hI1Y2fjoIvturT1uYaeVjnfB?imageView2/0/q/50|imageslim",
+    // imgUrl: "http://res.training.luojigou.vip/FgJw7WqbyCVkQJCgCBd07qipb_PI?imageView2/0/q/50|imageslim",
+    // numUrl: "http://res.training.luojigou.vip/FgX-hI1Y2fjoIvturT1uYaeVjnfB?imageView2/0/q/50|imageslim",
+    imgUrl: require("~/assets/images/about/idea_01@2x.png"),
+    numUrl: require("~/assets/images/about/num_01@2x.png"),
     label: "专业技术",
     resume:
       "我们拥有行业专业技术实力与自身 工程开发团队，为您的商业变现及 产品需求保驾护航。",
   },
   {
     id: 1,
-    imgUrl:
-      "http://res.training.luojigou.vip/Fl4S2hBlBWsTvfwdvYHaE3RKpLyO?imageView2/0/q/50|imageslim",
-    numUrl:
-      "http://res.training.luojigou.vip/Fk5hTknpr4deZWFtcfmRJSHNV3_K?imageView2/0/q/50|imageslim",
+    // imgUrl: "http://res.training.luojigou.vip/Fl4S2hBlBWsTvfwdvYHaE3RKpLyO?imageView2/0/q/50|imageslim",
+    // numUrl: "http://res.training.luojigou.vip/Fk5hTknpr4deZWFtcfmRJSHNV3_K?imageView2/0/q/50|imageslim",
+    imgUrl: require("~/assets/images/about/idea_02@2x.png"),
+    numUrl: require("~/assets/images/about/num_02@2x.png"),
     label: "贴心服务",
     resume:
       "我们始终坚持优质的服务理念，无 论任何时候您遇到困难，我们都会 及时提供精准有效的解决方案。",
   },
   {
     id: 2,
-    imgUrl:
-      "http://res.training.luojigou.vip/FkRWFwiFQu4XL1BPA96jHbmK1X1D?imageView2/0/q/50|imageslim",
-    numUrl:
-      "http://res.training.luojigou.vip/FiBasqi9NpLdJ_U9jr-95yxgvL1C?imageView2/0/q/50|imageslim",
+    // imgUrl: "http://res.training.luojigou.vip/FkRWFwiFQu4XL1BPA96jHbmK1X1D?imageView2/0/q/50|imageslim",
+    // numUrl: "http://res.training.luojigou.vip/FiBasqi9NpLdJ_U9jr-95yxgvL1C?imageView2/0/q/50|imageslim",
+    imgUrl: require("~/assets/images/about/idea_03@2x.png"),
+    numUrl: require("~/assets/images/about/num_03@2x.png"),
     label: "创业伙伴",
     resume:
       "我们把每一位客户都当作创业伙伴，期 盼在未来成长的道路上一路相伴，携手 前行。",
@@ -527,7 +527,7 @@ export default {
       cultrueData,
       ideaData,
       eventData,
-      currentEventImgId: "",
+      currentEventImgId: "2019",
     };
   },
   methods: {
@@ -717,16 +717,35 @@ export default {
       // left: 50%;
       // transform: translateX(-50%);
       margin-top: 178px;
-      display: grid;
-      grid-template-columns: auto auto auto;
-      grid-template-rows: auto auto auto;
+      display: flex;
+      flex-wrap: wrap;
+      // justify-content: space-between;
+      align-items: center;
       .kernel-box-item {
+        position: relative;
         margin-right: 40px;
         margin-bottom: 51px;
+        &:hover {
+          .mask {
+            display: block;
+            background: rgba(0, 0, 0, 0.44);
+            transition: all .5s;
+            -webkit-transition: all .5s;
+          }
+          .top {
+            .intro {
+              display: block;
+            }
+          }
+        }
+        &:nth-child(3n) {
+          margin-right: 0;
+        }
         .top {
           width: 373px;
           height: 466px;
           position: relative;
+          z-index: 66;
           .people-img {
             width: 373px;
             height: 466px;
@@ -744,6 +763,7 @@ export default {
             position: absolute;
             bottom: 12px;
             left: 37px;
+            z-index: 66;
             .name {
               font-size: 45px;
               font-family: PingFangSC-Semibold, sans-serif;
@@ -760,7 +780,9 @@ export default {
             }
           }
           .intro {
+            display: none;
             position: absolute;
+            z-index: 66;
             bottom: 160px;
             left: 37px;
             font-family: PingFangSC-Regular, sans-serif;
@@ -772,6 +794,11 @@ export default {
             }
             .resume {
               width: 280px;
+              font-size: 14px;
+              font-family: PingFangSC-Regular, sans-serif;
+              font-weight: 400;
+              color: #FFFFFF;
+              line-height: 28px;
             }
           }
         }
@@ -780,6 +807,17 @@ export default {
           height: 8px;
           background-color: #83abf9;
         }
+        .mask {
+          display: none;
+          position: absolute;
+          border-radius: 10px;
+          top: 0;
+          bottom: 0;
+          left: 0;
+          right: 0;
+          transition: all .5s;
+          -webkit-transition: all .5s;
+        }
       }
     }
   }

pages/about/team.vue

@@ -13,7 +13,7 @@
       <div :class="['expert-item']" v-for="(item, index) in expertList" :key="index">
           <img :src="item.imgUrl" alt="">
           <div class="line"></div>
-          <div class="mask">
+          <!-- <div class="mask">
             <div class="intro">简历介绍</div>
             <div class="content">
               <p v-for="(ele, index) in item.content" :key="index">
@@ -22,7 +22,18 @@
             </div>
             <div class="name">{{item.name}}</div>
             <div class="info">{{item.info}}</div>
+          </div> -->
+          <div class="content">
+            <div class="intro">简历介绍</div>
+            <div class="desc" v-for="(ele, index) in item.content" :key="index">
+              {{ ele }}
+            </div>
+          </div>
+          <div class="user-info">
+            <div class="name">{{item.name}}</div>
+            <div class="info">{{item.info}}</div>
           </div>
+          <div class="mask"></div>
         </div>
       </div>
     </div>
@@ -289,23 +300,79 @@ export default {
     margin-bottom: 26px;
     margin-right: 40px;
     border-radius: 10px 10px 0px 0px;
+    &:hover {
+      .mask {
+        display: block;
+        background: rgba(0, 0, 0, 0.44);
+        transition: all .5s;
+        -webkit-transition: all .5s;
+      }
+      .content {
+        display: block;
+      }
+    }
+    &:nth-child(3n) {
+      margin-right: 0;
+    }
     img {
       width: 373px;
       height: 542px;
       object-fit: cover;
       border-radius: 12px 12px 0px 0px;
     }
-    &:nth-child(3n) {
-      margin-right: 0;
+    .user-info {
+      position: absolute;
+      bottom: 20px;
+      z-index: 66;
+      color: #FFFFFF;
+      .name {
+        z-index: 66;
+        font-size: 36px;
+        font-family: PingFangSC-Semibold, sans-serif;
+        font-weight: 600;
+        line-height: 50px;
+        margin-top: 62px;
+        letter-spacing:1px;
+        padding: 0 16px;
+      }
+      .info {
+        z-index: 3;
+        font-size:20px;
+        font-family:PingFangSC-Regular, sans-serif;
+        font-weight:400;
+        padding: 0 16px;
+        margin-top: 6px;
+      }
     }
-    &:hover {
-      .mask {
-        display: block;
-        background:rgba(0,0,0,0.5);
-        transition: all .5s;
-        -webkit-transition: all .5s;
+    .content {
+      position: absolute;
+      top: 166px;
+      display: none;
+      font-size: 14px;
+      font-family: PingFangSC-Regular, sans-serif;
+      font-weight: 400;
+      padding: 0 46px;
+      line-height:28px;
+      min-height: 180px;
+      color: #ffffff;
+      z-index: 66;
+      .intro {
+        font-size: 16px;
+        font-family: PingFangSC-Regular, sans-serif;
+        font-weight: 500;
+        color: #FFFFFF;
+        line-height: 22px;
+        margin-bottom: 5px;
+      }
+      .desc {
+        font-size: 14px;
+        font-family: PingFangSC-Regular, sans-serif;
+        font-weight: 400;
+        color: #FFFFFF;
+        line-height: 28px;
       }
     }
+    
     .line {
       width: 100%;
       position: absolute;
@@ -324,40 +391,6 @@ export default {
       right: 0;
       transition: all .5s;
       -webkit-transition: all .5s;
-      color: #ffffff;
-      .intro {  
-        font-size:16px;
-        font-family:PingFangSC-Regular, sans-serif;
-        font-weight:400;
-        padding: 0 46px;
-        margin-top: 162px;
-      }
-      .content {
-        font-size: 14px;
-        font-family: PingFangSC-Regular, sans-serif;
-        font-weight: 400;
-        padding: 0 46px;
-        line-height:28px;
-        min-height: 180px;
-      }
-      .name {
-        font-size: 36px;
-        font-family: PingFangSC-Semibold, sans-serif;
-        font-weight: 600;
-        color: #FFFFFF;
-        line-height: 50px;
-        margin-top: 62px;
-        letter-spacing:1px;
-        padding: 0 16px;
-      }
-      .info {
-        z-index: 3;
-        font-size:20px;
-        font-family:PingFangSC-Regular, sans-serif;
-        font-weight:400;
-        padding: 0 16px;
-        margin-top: 6px;
-      }
     }
   }
 }

pages/index.vue

@@ -55,7 +55,7 @@
               <li class="con-item three">
                 <div class="con-box">
                   <div class="con">
-                    <div class="font52 num">
+                    <div class="num">
                       <countTo :startVal='0' :endVal='98.6' :decimals='1' :duration='5000'></countTo>
                       <span class="unit">%</span>
                     </div>
@@ -1661,6 +1661,7 @@ ul.cate-nav {
   .tab-box {
     display: flex;
     justify-content: space-between;
+    align-items: center;
     margin: 0 auto;
     .tabs-item {
       a {
@@ -1736,6 +1737,7 @@ ul.cate-nav {
     top: 118px;
     .con-box {
       .con {
+        text-align: center;
         .num {
           color: $theme_color_fu;
           text-shadow: 0px 1px 3px #BED3FE;
@@ -1759,6 +1761,7 @@ ul.cate-nav {
           font-weight: 500;
           color: #515564;
           line-height: 28px;
+          text-align: center;
 
         }
       }
@@ -1822,7 +1825,16 @@ ul.cate-nav {
   background-repeat: no-repeat, no-repeat;
   background-position: 0px 158px, 260px 550px;
   background-color: #f7fbff;
+  .founder_img {
+    img {
+      vertical-align: middle;
+      width: 337px;
+      height: 390px;
+      object-fit: cover;
+    }
+  }
   .name {
+    margin-top: 10px;
     display: flex;
     align-items: center;
     justify-content: center;
@@ -1854,7 +1866,6 @@ ul.cate-nav {
       background: #FFFFFF;
       box-shadow: 0px 2px 17px 0px #D0E7FD;
       border-radius: 30px 12px 86px 12px;
-
       margin-left: 30px;
       padding: 40px 30px 30px 53px;
       .founder-item {

plugins/filter.js

@@ -0,0 +1,24 @@
+ // 全局引入 （main.js)
+ 
+ import Vue from 'vue'
+ import moment from 'moment'
+ import { cutStrByFullLength, getStrFullLength } from '@/utils/utils'
+
+//  全局过滤器 时间戳 
+Vue.filter('dateformat', function (dataStr, pattern = 'YYYY-MM-DD') {
+  if (dataStr) {
+    return moment(dataStr).format(pattern)
+  } else {
+    return dataStr
+  }
+})
+
+//  全局过滤器 过滤文字 
+Vue.filter('ellipsis', function (str, maxLength) {
+  if (str) {
+    const fullLength = getStrFullLength(str);
+    return cutStrByFullLength(str, maxLength)+(fullLength > maxLength ? '...' : '');
+  } else {
+    return str
+  }
+})

utils/utils.js

@@ -0,0 +1,35 @@
+/**
+ * 获取字符串长度，英文字符 长度1，中文字符长度2
+ * @param {*} str
+ */
+export const getStrFullLength = (str = '') =>
+  str.split('').reduce((pre, cur) => {
+    const charCode = cur.charCodeAt(0)
+    if (charCode >= 0 && charCode <= 128) {
+      return pre + 1
+    }
+    return pre + 2
+  }, 0)
+
+
+/**
+ * 截取字符串，根据 maxLength 截取后返回
+ * @param {*} str
+ * @param {*} maxLength
+ */
+export const cutStrByFullLength = (str = '', maxLength) => {
+  let showLength = 0
+  return str.split('').reduce((pre, cur) => {
+    const charCode = cur.charCodeAt(0)
+    if (charCode >= 0 && charCode <= 128) {
+      showLength += 1
+    } else {
+      showLength += 2
+    }
+    if (showLength <= maxLength) {
+      return pre + cur
+    }
+    return pre
+  }, '')
+}
+

yarn.lock

@@ -5832,6 +5832,11 @@ mkdirp@^1.0.4:
   resolved "https://registry.npm.taobao.org/mkdirp/download/mkdirp-1.0.4.tgz#3eb5ed62622756d79a5f0e2a221dfebad75c2f7e"
   integrity sha1-PrXtYmInVteaXw4qIh3+utdcL34=
 
+moment@^2.29.1:
+  version "2.29.1"
+  resolved "https://registry.npm.taobao.org/moment/download/moment-2.29.1.tgz?cache=0&sync_timestamp=1601983423917&other_urls=https%3A%2F%2Fregistry.npm.taobao.org%2Fmoment%2Fdownload%2Fmoment-2.29.1.tgz#b2be769fa31940be9eeea6469c075e35006fa3d3"
+  integrity sha1-sr52n6MZQL6e7qZGnAdeNQBvo9M=
+
 move-concurrently@^1.0.1:
   version "1.0.1"
   resolved "https://registry.npm.taobao.org/move-concurrently/download/move-concurrently-1.0.1.tgz#be2c005fda32e0b29af1f05d7c4b33214c701f92"