From 9408dd50ec82e369eb8f6b60954e798ccc441980 Mon Sep 17 00:00:00 2001 From: 付延余 <f-yanyu@outlook.com> Date: 星期一, 11 四月 2022 18:05:25 +0800 Subject: [PATCH] 营销政策 --- src/pages/show/businessPolicy/BusinessPolicy.vue | 435 ++++++++++++++++++++++++++++++++++++++++++++++------- 1 files changed, 373 insertions(+), 62 deletions(-) diff --git a/src/pages/show/businessPolicy/BusinessPolicy.vue b/src/pages/show/businessPolicy/BusinessPolicy.vue index 8cde1c3..e97c7a9 100644 --- a/src/pages/show/businessPolicy/BusinessPolicy.vue +++ b/src/pages/show/businessPolicy/BusinessPolicy.vue @@ -12,15 +12,51 @@ <div class="text">绱鍑哄彴鏀跨瓥鏁伴噺</div> <div class="numText"><span>280</span>鏉�</div> </div> - <div class="upCentent_item"></div> - <div class="upCentent_item"></div> - <div class="upCentent_item"></div> - <div class="upCentent_item"></div> + <div class="upCentent_item"> + <div class="icon"> + <img + src="../../../assets/images/businessPolicy/icon2@2x.png" + alt="" + /> + </div> + <div class="text">鎯犲強浼佷笟鏁伴噺</div> + <div class="numText"><span>70</span>涓囨埛</div> + </div> + <div class="upCentent_item"> + <div class="icon"> + <img + src="../../../assets/images/businessPolicy/icon3@2x.png" + alt="" + /> + </div> + <div class="text">鎯犲強涓汉鏁伴噺</div> + <div class="numText"><span>25.9</span>涓囦汉</div> + </div> + <div class="upCentent_item"> + <div class="icon"> + <img + src="../../../assets/images/businessPolicy/icon4@2x.png" + alt="" + /> + </div> + <div class="text">鍑忓厤閲戦</div> + <div class="numText"><span>1563</span>涓囧厓</div> + </div> + <div class="upCentent_item"> + <div class="icon"> + <img + src="../../../assets/images/businessPolicy/icon5@2x.png" + alt="" + /> + </div> + <div class="text">鏂伴椈鎶ラ亾鏁伴噺</div> + <div class="numText"><span>36500</span>鏉�</div> + </div> </div> - <!-- 涓昏〃鏍煎尯 --> + <!-- 琛ㄦ牸鍖� --> <div class="downCentent"> <div class="downCentent_item"> - <div class="downCentent_title"> + <div class="centent_title"> <span>鏀跨瓥鍐呭</span ><img src="../../../assets/images/businessPolicy/title_end@2x.png" @@ -32,11 +68,12 @@ stripe :data="tableData" style="width: 100%" - max-height="1006px" + :max-height="tableHeight" :header-row-style="tableHeaderRow" :row-class-name="tableRowClassName" + @row-click="tableRowClick" > - <el-table-column prop="keshi" label="绉戝" min-width="10"> + <el-table-column prop="keshi" label="绉戝" min-width="10" fixed> </el-table-column> <el-table-column prop="zhengchemingcheng" @@ -62,32 +99,72 @@ </div> </div> <div class="downCentent_item"> + <div class="centent_title"> + <span>鐩稿叧鎶ラ亾</span + ><img + src="../../../assets/images/businessPolicy/title_end@2x.png" + alt="" + /> + </div> <div class="BusinessPolicyTable"> <el-table stripe - :data="tableData" + :data="tableData2" style="width: 100%" - max-height="1006px" + :max-height="tableHeight" :header-row-style="tableHeaderRow" :row-class-name="tableRowClassName" > - <el-table-column prop="keshi" label="绉戝" min-width="10"> - </el-table-column> <el-table-column - prop="zhengchemingcheng" - label="鏀跨瓥鍚嶇О" - min-width="30" + prop="tableTitle" + label="鏍囬" + min-width="70" + align="right" > </el-table-column> + <el-table-column prop="laiyuan" label="鏉ユ簮" min-width="15"> + </el-table-column> <el-table-column - prop="shengxiaoDate" - label="鐢熸晥鏃ユ湡鑼冨洿" - min-width="30" + prop="dianjiliang" + label="绱鐐瑰嚮閲�" + min-width="15" > </el-table-column> </el-table> </div> </div> + </div> + <!-- 寮瑰嚭瀵硅瘽妗� --> + <div class="BusinessPolicyDialog"> + <el-dialog + :visible.sync="tableDialogVisible" + width="86%" + title="鎴戞槸鏍囬" + min-height=" 112rem" + > + <div class="dislogCloseIcon" @click="tableDialogVisible = false"></div> + <h1>澶变笟淇濋櫓绋冲矖杩旇繕鏀跨瓥</h1> + <div class="fuTitle"> + <span>鍑哄彴閮ㄩ棬锛氫汉绀惧眬</span><span>鍑哄彴鏃堕棿锛�2021/3/1</span + ><span>鎯犲強浼佷笟锛�100瀹�</span><span>鍑忓厤閲戦锛�377涓囧厓</span> + </div> + <div class="dialogText"> + <el-divider></el-divider> + <span> + 閫氳繃鍔犲ぇ鎵舵寔鍔涘害鍜岀簿鍑嗚惤瀹炲洶闅句紒涓氱ǔ宀楄繑杩樻斂绛栵紝鍏呭垎鍙戞尌澶变笟淇濋櫓鈥滈闃插け涓氣�濆姛鑳斤紝鍔犲ぇ澶变笟淇濋櫓鎻翠紒绋冲矖鍔涘害锛屾敮鎸佷紒涓氱ǔ瀹氬氨涓氬矖浣嶅拰鍋ュ悍鍙戝睍銆�<br /> + 鍔犲ぇ鎵舵寔鍔涘害锛屾墿澶ф斂绛栧彈鐩婇潰銆傛斁瀹界敵棰嗘潯浠讹紝涓皬寰紒涓氳鍛樼巼涓嶉珮浜�2019骞村害鍏ㄥ浗鍩庨晣璋冩煡澶变笟鐜囨帶鍒剁洰鏍�5.5%锛屽弬淇濊亴宸�30浜�(鍚紝浠ヤ笂骞村害鏈堝潎鍙備繚浜烘暟涓哄噯)浠ヤ笅鐨勫弬淇濅紒涓氳鍛樹汉鏁颁笉瓒呰繃鍙備繚鑱屽伐鎬绘暟20%鐨勶紝鍙互鐢宠浼佷笟绋冲矖杩旇繕銆傛彁楂樿繑杩樻爣鍑嗭紝瀵逛笉瑁佸憳鎴栧皯瑁佸憳鐨勪腑灏忓井浼佷笟锛岀ǔ宀楄繑杩樻爣鍑嗕粠浼佷笟鍙婂叾鑱屽伐涓婂勾搴︾即绾冲け涓氫繚闄╄垂鐨�50%鎻愰珮鍒�100%銆�<br /> + 鍔犲己鍥伴毦甯壎锛岀簿鍑嗚惤瀹炲洶闅句紒涓氱ǔ宀楄繑杩樻斂绛栥�傜‘瀹氫簡鍥伴毦浼佷笟绋冲矖杩旇繕鏍囧噯锛�100浜�(鍚�)鑷�500浜�(鍚�)浼佷笟锛岃繑杩樻爣鍑嗘寜1涓湀鐨勪笂骞村害鍏ㄥ競鏈堜汉鍧囧け涓氫繚闄╅噾鍜屾湀鍧囧弬淇濊亴宸ヤ汉鏁扮‘瀹氾紱501浜鸿嚦1000浜�(鍚�)浼佷笟锛岃繑杩樻爣鍑嗘寜2涓湀鐨勪笂骞村害鍏ㄥ競鏈堜汉鍧囧け涓氫繚闄╅噾鍜屾湀鍧囧弬淇濊亴宸ヤ汉鏁扮‘瀹氾紱1001浜轰互涓婁紒涓氾紝鎸�3涓湀鐨勪笂骞村害鍏ㄥ競鏈堜汉鍧囧け涓氫繚闄╅噾鍜屾湀鍧囧弬淇濊亴宸ヤ汉鏁扮‘瀹氾紱瀵瑰彈鐤儏褰卞搷杈冨ぇ鐨勯楗�侀厭搴椼�佹梾娓搞�侀浂鍞�佸啺闆瓑琛屼笟浼佷笟锛屽湪鐩稿簲琛ヨ创鏍囧噯鍩虹涓婂鍔犱竴涓湀銆�<br /> + 鐢宠绋冲矖琛ヨ创浼佷笟搴斿悓鏃跺叿澶囦互涓嬫潯浠讹細<br /> + 鐢熶骇缁忚惀娲诲姩绗﹀悎鍥藉鍙婃墍鍦ㄥ湴浜т笟缁撴瀯璋冩暣鍜岀幆淇濇斂绛栵紱<br /> + 涓婂勾搴︽湭瑁佸憳鎴栬鍛樼巼涓嶈秴杩囧叏鐪佸煄闀囩櫥璁板け涓氱巼鎺у埗鐩爣4.5%锛�<br /> + 涓婂勾搴﹁冻棰濈即绾冲け涓氫繚闄╄垂婊�12涓湀涓旀棤鍘嗗彶娆犵即锛�<br /> + 2019骞村害缁忚惀鎯呭喌浜忔崯锛屾垨鍙楃柅鎯呭奖鍝�2020骞翠互鏉ヨ惀涓氭敹鍏ュ悓姣斾笅闄嶅箙搴﹀湪50%(鍚�)浠ヤ笂锛�<br /> + 浼佷笟鍙傚姞澶变笟淇濋櫓鑱屽伐浜烘暟涓嶄綆浜�100浜猴紱<br /> + 涓庝紒涓氬伐浼氱粍缁囧崗鍟嗗埗瀹氱ǔ瀹氬氨涓氬矖浣嶆帾鏂斤紝骞舵壙璇�1骞村唴涓嶈鍛樻垨鑰呰鍛樼巼浣庝簬鍏ㄧ渷鍩庨晣鐧昏澶变笟鐜囨帶鍒剁洰鏍�4.5%銆�<br /> + 涓ラ噸澶变俊浼佷笟銆佽鍒楀叆鐮翠骇娓呯畻鎴栨敞閿�鍚嶅崟鐨勨�滃兊灏镐紒涓氣�濄�佺敵璇风ǔ宀楄繑杩樻椂澶变笟淇濋櫓鍙備繚浜烘暟姣斾笂骞村害骞冲潎鍙備繚浜烘暟鍑忓皯瓒呰繃50%鐨勪紒涓氫笉鍒楀叆杩旇繕鑼冨洿銆�</span + > + </div> + </el-dialog> </div> </div> </template> @@ -97,6 +174,7 @@ return { tableData: [ { + id: 1, keshi: "澶变笟澶�", zhengchemingcheng: "澶变笟淇濋櫓绋冲矖杩旇繕鏀跨瓥", shengxiaoDate: "2021/3鈥�2022/12", @@ -236,8 +314,156 @@ huijiqiyeNum: "100瀹�", money: "277涓囧厓" } - ] + ], + tableData2: [ + { + tableTitle: + "澶у姏浼樺寲钀ュ晢鐜涓ㄥ競浜虹ぞ灞�锛氭湇鍔℃彁閫熸彁鑳� 璁╃櫨濮撲韩鍙楁敼闈╃孩鍒�", + laiyuan: "鐭冲搴勬柊闂�", + dianjiliang: "15690" + }, + { + tableTitle: + "澶у姏浼樺寲钀ュ晢鐜涓ㄥ競浜虹ぞ灞�锛氭湇鍔℃彁閫熸彁鑳� 璁╃櫨濮撲韩鍙楁敼闈╃孩鍒�", + laiyuan: "鐭冲搴勬柊闂�", + dianjiliang: "15690" + }, + { + tableTitle: + "澶у姏浼樺寲钀ュ晢鐜涓ㄥ競浜虹ぞ灞�锛氭湇鍔℃彁閫熸彁鑳� 璁╃櫨濮撲韩鍙楁敼闈╃孩鍒�", + laiyuan: "鐭冲搴勬柊闂�", + dianjiliang: "15690" + }, + { + tableTitle: + "澶у姏浼樺寲钀ュ晢鐜涓ㄥ競浜虹ぞ灞�锛氭湇鍔℃彁閫熸彁鑳� 璁╃櫨濮撲韩鍙楁敼闈╃孩鍒�", + laiyuan: "鐭冲搴勬柊闂�", + dianjiliang: "15690" + }, + { + tableTitle: + "澶у姏浼樺寲钀ュ晢鐜涓ㄥ競浜虹ぞ灞�锛氭湇鍔℃彁閫熸彁鑳� 璁╃櫨濮撲韩鍙楁敼闈╃孩鍒�", + laiyuan: "鐭冲搴勬柊闂�", + dianjiliang: "15690" + }, + { + tableTitle: + "澶у姏浼樺寲钀ュ晢鐜涓ㄥ競浜虹ぞ灞�锛氭湇鍔℃彁閫熸彁鑳� 璁╃櫨濮撲韩鍙楁敼闈╃孩鍒�", + laiyuan: "鐭冲搴勬柊闂�", + dianjiliang: "15690" + }, + { + tableTitle: + "澶у姏浼樺寲钀ュ晢鐜涓ㄥ競浜虹ぞ灞�锛氭湇鍔℃彁閫熸彁鑳� 璁╃櫨濮撲韩鍙楁敼闈╃孩鍒�", + laiyuan: "鐭冲搴勬柊闂�", + dianjiliang: "15690" + }, + { + tableTitle: + "澶у姏浼樺寲钀ュ晢鐜涓ㄥ競浜虹ぞ灞�锛氭湇鍔℃彁閫熸彁鑳� 璁╃櫨濮撲韩鍙楁敼闈╃孩鍒�", + laiyuan: "鐭冲搴勬柊闂�", + dianjiliang: "15690" + }, + { + tableTitle: + "澶у姏浼樺寲钀ュ晢鐜涓ㄥ競浜虹ぞ灞�锛氭湇鍔℃彁閫熸彁鑳� 璁╃櫨濮撲韩鍙楁敼闈╃孩鍒�", + laiyuan: "鐭冲搴勬柊闂�", + dianjiliang: "15690" + }, + { + tableTitle: + "澶у姏浼樺寲钀ュ晢鐜涓ㄥ競浜虹ぞ灞�锛氭湇鍔℃彁閫熸彁鑳� 璁╃櫨濮撲韩鍙楁敼闈╃孩鍒�", + laiyuan: "鐭冲搴勬柊闂�", + dianjiliang: "15690" + }, + { + tableTitle: + "澶у姏浼樺寲钀ュ晢鐜涓ㄥ競浜虹ぞ灞�锛氭湇鍔℃彁閫熸彁鑳� 璁╃櫨濮撲韩鍙楁敼闈╃孩鍒�", + laiyuan: "鐭冲搴勬柊闂�", + dianjiliang: "15690" + }, + { + tableTitle: + "澶у姏浼樺寲钀ュ晢鐜涓ㄥ競浜虹ぞ灞�锛氭湇鍔℃彁閫熸彁鑳� 璁╃櫨濮撲韩鍙楁敼闈╃孩鍒�", + laiyuan: "鐭冲搴勬柊闂�", + dianjiliang: "15690" + }, + { + tableTitle: + "澶у姏浼樺寲钀ュ晢鐜涓ㄥ競浜虹ぞ灞�锛氭湇鍔℃彁閫熸彁鑳� 璁╃櫨濮撲韩鍙楁敼闈╃孩鍒�", + laiyuan: "鐭冲搴勬柊闂�", + dianjiliang: "15690" + }, + { + tableTitle: + "澶у姏浼樺寲钀ュ晢鐜涓ㄥ競浜虹ぞ灞�锛氭湇鍔℃彁閫熸彁鑳� 璁╃櫨濮撲韩鍙楁敼闈╃孩鍒�", + laiyuan: "鐭冲搴勬柊闂�", + dianjiliang: "15690" + }, + { + tableTitle: + "澶у姏浼樺寲钀ュ晢鐜涓ㄥ競浜虹ぞ灞�锛氭湇鍔℃彁閫熸彁鑳� 璁╃櫨濮撲韩鍙楁敼闈╃孩鍒�", + laiyuan: "鐭冲搴勬柊闂�", + dianjiliang: "15690" + }, + { + tableTitle: + "澶у姏浼樺寲钀ュ晢鐜涓ㄥ競浜虹ぞ灞�锛氭湇鍔℃彁閫熸彁鑳� 璁╃櫨濮撲韩鍙楁敼闈╃孩鍒�", + laiyuan: "鐭冲搴勬柊闂�", + dianjiliang: "15690" + }, + { + tableTitle: + "澶у姏浼樺寲钀ュ晢鐜涓ㄥ競浜虹ぞ灞�锛氭湇鍔℃彁閫熸彁鑳� 璁╃櫨濮撲韩鍙楁敼闈╃孩鍒�", + laiyuan: "鐭冲搴勬柊闂�", + dianjiliang: "15690" + }, + { + tableTitle: + "澶у姏浼樺寲钀ュ晢鐜涓ㄥ競浜虹ぞ灞�锛氭湇鍔℃彁閫熸彁鑳� 璁╃櫨濮撲韩鍙楁敼闈╃孩鍒�", + laiyuan: "鐭冲搴勬柊闂�", + dianjiliang: "15690" + } + ], + tableDialogVisible: false, + tableHeight: window.innerHeight * 0.62 }; + }, + mounted() { + const that = this; + window.onresize = () => { + let height = window.innerHeight * 0.62; + that.tableHieght = height; + console.log(height); + }; + + // this.$nextTick(() => { + // this.tableHeight = window.innerHeight * 0.62; + // console.log(this.tableHeight); + // }); + // + // window.onresize = () => + // (() => { + // window.screenWidth = document.body.clientWidth; + // that.screenWidth = window.screenWidth; + // })(); + }, + watch: { + tableHeight(val) { + // 涓轰簡閬垮厤棰戠箒瑙﹀彂resize鍑芥暟瀵艰嚧椤甸潰鍗¢】锛屼娇鐢ㄥ畾鏃跺櫒 + if (!this.timer) { + // 涓�鏃︾洃鍚埌鐨則ableHeight鍊兼敼鍙橈紝灏卞皢鍏堕噸鏂拌祴缁檇ata閲岀殑tableHeight + this.tableHeight = val; + this.timer = true; + const that = this; + setTimeout(function() { + // that.sjcount(that.screenWidth); //绐楀彛澶у皬鍙樺寲鍚庢墽琛岀殑鏂规硶 + that.reload(); //绐楀彛澶у皬鍙樺寲鍚庢墽琛岀殑鏂规硶 + console.log(tableHeight); + that.timer = false; + }, 10); + } + } }, methods: { tableHeaderRow({ rowIndex }) { @@ -248,18 +474,38 @@ return "warning-row"; } return ""; + }, + tableRowClick(row) { + this.tableDialogVisible = true; + console.log(row); + console.log(row.__ob__.dep.id); + console.log(row.id); + }, + reload() { + this.isAlive = false; + this.$nextTick(function() { + this.isAlive = true; + }); } } }; </script> <style lang="scss"> @import "../../../assets/css/base"; -.BusinessPolicyTable { - width: 115.4rem; - position: absolute; - top: 7.2rem; - left: 3.3rem; +// 琛ㄦ牸 +.BusinessPolicyTable { + width: 4.5078rem; + position: absolute; + top: 0.2813rem; + left: 0.1289rem; + .el-table { + background: transparent; + } + // 鍘绘帀褰撳墠琛岄珮浜儗鏅鑹� + .el-table--enable-row-hover .el-table__body tr:hover > td.el-table__cell { + background: none; + } // 鐘舵�侀鑹� .el-table .warning-row { background-color: rgba(81, 210, 255, 0.1); @@ -275,9 +521,9 @@ .el-table th.el-table__cell { background: transparent; } - .el-table--striped - .el-table__body - tr.el-table__row--striped + .el-table--striped, + .el-table__body, + tr.el-table__row--striped, td.el-table__cell { background: transparent; } @@ -297,99 +543,164 @@ } .el-table .cell { font-weight: 300; - font-size: 2.6rem; + font-size: 0.1016rem; //font-family: Source Han Sans CN, Source Han Sans CN-Light; text-align: center; color: #ffffff; - line-height: 2.6rem; + line-height: 0.1016rem; } } -// } + +// dialog瀵硅瘽妗� +.BusinessPolicyDialog { + .el-dialog__wrapper { + background: rgba(0, 0, 0, 0.9); + } + .el-dialog { + background: url(../../../assets/images/businessPolicy/dialog@2x.png) + no-repeat center; + background-size: 100% 100%; + height: 4.375rem; + } + // 娓呴櫎榛樿鍏抽棴鏍峰紡 + .el-icon-close:before { + content: ""; + } + .el-dialog__header { + padding: 0; + width: 0; + height: 0; + } + .el-dialog__body { + text-align: center; + color: #eeeeee; + h1 { + margin-top: 0.4375rem; + font-size: 0.1563rem; + } + span { + font-size: 0.1094rem; + } + } + .el-divider { + margin: 0; + background-color: #eeeeee; + } +} </style> <style lang="scss" scoped> #businessPolicy { } .upCentent { - height: 23rem; - width: 248rem; - margin: 3rem 4rem 0 4rem; + height: 0.8984rem; + width: 9.6875rem; + margin: 0.1172rem 0.1563rem 0 0.1563rem; display: flex; .upCentent_item { - width: 46.4rem; - height: 23rem; + width: 1.8125rem; + height: 0.8984rem; background: url(../../../assets/images/businessPolicy/bg_1@2x.png) no-repeat center; background-size: 100% 100%; flex: 1; - margin-right: 4rem; + margin-right: 0.1563rem; text-align: center; &:nth-child(5) { margin-right: 0; } .icon img { - width: 8rem; - height: 8rem; - margin-top: 3.1rem; + width: 0.3125rem; + height: 0.3125rem; + margin-top: 0.1211rem; } .text { - height: 2.4rem; - font-size: 2.4rem; + height: 0.0938rem; + font-size: 0.0938rem; //font-family: Source Han Sans CN, Source Han Sans CN-Light; font-weight: 300; text-align: center; color: #ffffff; - line-height: 2.4rem; + line-height: 0.0938rem; } .numText { - font-size: 2rem; - margin-top: 2.5rem; + font-size: 0.0781rem; + margin-top: 0.0977rem; color: #ffffff; span { - font-size: 4.8rem; + font-size: 0.1875rem; //font-family: Source Han Sans CN, Source Han Sans CN-Light; font-weight: 300; color: #51d2ff; - line-height: 2.4rem; - margin-right: 1.2rem; + line-height: 0.0938rem; + margin-right: 0.0469rem; } } } } .downCentent { - width: 248rem; - height: 114.6rem; - margin: 3.6rem 4rem 6.2rem 4rem; + width: 9.6875rem; + height: 4.4766rem; + margin: 0.1406rem 0.1563rem 0.2422rem 40px; display: flex; .downCentent_item { - width: 122rem; - height: 114.6rem; + width: 4.7656rem; + height: 4.4766rem; background: url(../../../assets/images/businessPolicy/bg_big@2x.png) no-repeat center; background-size: 100% 100%; flex: 1; - margin-right: 4rem; - padding: 0 3.3rem 0 3.3rem; + margin-right: 0.1563rem; + padding: 0 0.1289rem 0 0.1289rem; position: relative; &:nth-child(2) { margin-right: 0; } - .downCentent_title { + .centent_title { position: absolute; - top: 0.8rem; - font-size: 3.2rem; + top: 0.0313rem; + font-size: 0.125rem; //font-family: Source Han Sans CN, Source Han Sans CN-Regular; font-weight: 400; // text-align: left; color: #51d2ff; - line-height: 2.6rem; + line-height: 0.1016rem; span { - margin-left: 3.7rem; - margin-right: 2rem; + margin-left: 0.1445rem; + margin-right: 0.0781rem; } } } } -.el-table { - background: transparent; + +.BusinessPolicyDialog { + .dislogCloseIcon { + display: inline-block; + width: 0.1875rem; + height: 0.1875rem; + background: url(../../../assets/images/businessPolicy/dialogClose@2x.png) + no-repeat center; + // background: 100% 100%; + // background-color: red; + margin: 0; + position: relative; + top: 0.2734rem; + left: 45%; + } + .fuTitle { + margin-top: 0.2344rem; + span { + margin-right: 0.3125rem; + } + } + .dialogText { + width: 7.5rem; + height: 2.3438rem; + margin: 0 auto; + margin-top: 0.2305rem; + text-align: start; + white-space: pre-wrap; + line-height: 0.1875rem; + overflow: scroll; + } } </style> -- Gitblit v1.9.1