微调

src/components/FirstJob/components/promotion.vue

@@ -0,0 +1,113 @@
+<template>
+  <!-- 推广卡片 -->
+  <div class="promotion-page">
+    <div class="link" @mouseleave="handleModel">
+      <div class="item g_flex_row_between" 
+           v-for="(item,index) in list" :key="index" 
+           @mouseenter="handleEnter(item,index)" 
+           @mouseleave="handleLeave(item,index)"
+           :class="index == active ? 'item-active' : ''"
+      >
+        <div class="item-logo g_flex_none">
+          <img src="../../../../static/img/gyl.jpg" class="img" />
+        </div>
+        <div class="item-title g_flex_1 g_flex_column_center">
+          <div class="title-text">{{item.title}}</div>
+          <div class="title-subtext">{{ item.subtitle }}</div>
+        </div>
+        <div class="mock"></div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+  export default {
+    name: 'promotion',
+    data() {
+      return {
+        active:-1,
+        list:[
+          {
+            logo:'../../../../static/img/gyl.jpg',
+            title:'扫描二维码',
+            subtitle:'打开「伯才供应链」小程序'
+          },
+          {
+            logo:'../../../../static/img/gyl.jpg',
+            title:'扫描二维码',
+            subtitle:'添加专属客户经理企业微信'
+          }
+        ]
+      }
+    },
+    methods: {
+      handleEnter($item,$index){
+        if($index == 0){
+          this.active = 1
+        }else{
+          this.active = 0
+        }
+      },
+      handleLeave($item,$index){
+        if($index == 0){
+          this.active = 1
+        }else{
+          this.active = 0
+        }
+      },
+      handleModel(){
+        this.active = -1
+      }
+    }
+  }
+</script>
+
+<style lang="less">
+  .promotion-page{
+    .link{
+      .item{
+        border-radius: 8px;
+        box-shadow: rgba(0, 0, 0, 0.1) 0px 0px 0px;
+        // border: 1px solid #dcdcdc;
+        padding: 16px;
+        background-color: #fff;
+        margin-bottom: 12px;
+        transition: all 0.2s;
+        cursor: pointer;
+        position: relative;
+        .item-logo{
+          margin-right: 12px;
+          .img{
+            width: 90px;
+            height: 90px;
+          }
+        }
+        .item-title{
+          .title-text,.title-subtext{
+            color: #7f7f7f;
+            font-size: 14px;
+            line-height: 2;
+          }
+        }
+        .mock{
+          position: absolute;
+          left: 0;
+          top: 0;
+          width: 100%;
+          height: 122px;
+          backdrop-filter: blur(0px); 
+          border-radius: 8px;
+          transition: all 0.2s;
+        }
+      }
+      .item-active{
+        box-shadow: rgba(0, 0, 0, 0.1) 0px 4px 12px;
+        transform: scale(1.01);
+        .mock{
+          backdrop-filter: blur(3px); 
+        }
+      }
+    }
+  }
+</style>

src/components/FirstJob/joblist.vue

@@ -375,8 +375,8 @@
 				</a-breadcrumb-item>
 			</a-breadcrumb>-->
 			<!-- #### 主体部分 ##### -->
-			<div class="w" id="maincontent">
-				<div class="maincontentleft" style="padding-top: 8px">
+			<div class="w g_flex_row_between" id="maincontent">
+				<div class="maincontentleft g_flex_1" style="padding-top: 8px">
 					<div class="tabBar" @click="changeTab($event)">
 						<div class="tabSubset" :class="{ active: sortTag == 0 }"  data-type="0" style="font-size: 16px;">最新</div>
 						<!-- <div class="tabSubset" :class="{ active: signType == 1 }"  data-type="1">按距离</div> -->
@@ -883,6 +883,10 @@
 					</div>-->
 					<recommend />
 				</div>
+				<!-- 右侧 -->
+				<div class="rightCard g_flex_none">
+					<promotion />
+				</div>
 			</div>
 		</div>
 		<recordModal :show.sync="recordShow" :jobDetail="currentInfo"></recordModal>
@@ -917,6 +921,7 @@ import $ from "jquery";
 
 import { moneyToFixed, getSalaryClassifyValue, isNotEmptyCheck, disposeJobListData, setReturnFee,setJobInfoPosition } from "../../utils/commonUtil";
 import recommend from "@/components/FirstJob/components/recommend.vue";
+import promotion from "@/components/FirstJob/components/promotion.vue";
 import { nationlist } from "../../utils/datalist";
 import Clipboard from "clipboard";
 // 报名弹窗
@@ -934,6 +939,7 @@ export default {
 	components: {
 		recommend,
 		recordModal,
+		promotion
 		// recordbill,
 	},
 	// 组件参数 接收来自父组件的数据
@@ -2905,7 +2911,7 @@ export default {
 	margin-top: 10px;
 	background-color: #f0f0f0;
 	.maincontentleft {
-		width: 800px;
+		// width: 800px;
 		margin-right: 16px;
 		text-align: left;
 		position: relative;
@@ -3254,6 +3260,10 @@ export default {
 		//   }
 		// }
 	}
+	.rightCard{
+		width: 302px;
+		margin-top: 8px;
+	}
 	.maincontentright {
 		width: 240px;
 		position: relative;