加入我们图片加入动效

config/index.js

@@ -21,7 +21,7 @@ module.exports = {
     },
 
     // Various Dev Server settings
-    host: '192.168.0.41', // can be overwritten by process.env.HOST
+    host: 'localhost', // 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/join-us/join-us.vue

@@ -13,7 +13,7 @@
               <div class="join-environment-img-item div-skew" @click="showEnvironmrntImage">
                 <img width="100%" height="100%" :src="companyImg1">
               </div>
-              <div class="join-environment-img-item" @click="showEnvironmrntImage">
+              <div class="join-environment-img-item " @click="showEnvironmrntImage">
                 <img width="100%" height="100%" :src="companyImg">
               </div>
             </div>
@@ -666,13 +666,21 @@ export default {
   position: absolute;
   right: 0;
   display: flex;
-  padding: 0.2em;
-  background: #fff;
+  /* background: #fff; */
   cursor: pointer;
+  overflow: hidden;
+  box-sizing: border-box;
+  border: 0.2em solid #fff;
 }
 
 .join-environment-img-item>img {
   width: 100%;
+  display: inline-block;
+  transition: all 0.3s linear;
+}
+.join-environment-img-item:hover>img{
+  transform: scale(1.1);
+  transition: all 0.3s linear;
 }
 
 .join-working-img-item {
@@ -680,10 +688,23 @@ export default {
   height: 9em;
   right: 0;
   display: flex;
-  padding: 0.2em;
-  background-color: #fff;
   box-shadow: 0 0 6px 1px rgba(0, 0, 0, 0.2);
   cursor: pointer;
+  border: 0.2em solid #fff;
+  box-sizing: border-box;
+  overflow: hidden;
+}
+
+.join-working-img-item>img{
+  height: 100%;
+  width: auto;
+  position: relative;
+  left: -5%;
+  transition: all 0.3s linear;
+}
+.join-working-img-item:hover>img{
+  transform: scale(1.1);
+  transition: all 0.3s linear;
 }
 
 .join-working_left {
@@ -693,14 +714,13 @@ export default {
 
 .div-skew {
   width: 9.25em;
-  padding: 0.2em;
-  background: #fff;
   transform: rotate(17deg);
   -moz-transform: rotate(17deg);
   -webkit-transform: rotate(17deg);
   -o-transform: rotate(17deg);
   -ms-transform: rotate(17deg);
   box-shadow: 0px 0px 10px #999;
+  border: 0.2em solid #fff;
 }
 
 .position-recruit {