From 1023d8af091cf3070b26317b216dbf17567ed969 Mon Sep 17 00:00:00 2001 From: 付延余 <f-yanyu@outlook.com> Date: 星期二, 12 四月 2022 10:02:08 +0800 Subject: [PATCH] 营销政策 --- src/pages/components/showIndexTitle.vue | 296 ++++++++++++++++++++++++++++++----------------------------- 1 files changed, 151 insertions(+), 145 deletions(-) diff --git a/src/pages/components/showIndexTitle.vue b/src/pages/components/showIndexTitle.vue index 7a47c89..538926a 100644 --- a/src/pages/components/showIndexTitle.vue +++ b/src/pages/components/showIndexTitle.vue @@ -1,159 +1,165 @@ <template> - <div class="showIndexTitle-wrap"> - <h1 class="title">鐭冲搴勪汉绀惧眬涓氬姟杩愯鏁版嵁鍒嗘瀽骞冲彴</h1> - <el-menu :default-active="$route.path" router mode="horizontal" class="el-menu-demo"> - <div class="showIndex-left"> - <el-menu-item index="/index"> - <div class="showIndex-block"> - <h1>棣栭〉</h1> - </div> - </el-menu-item> - <el-menu-item index="/jiuyeAndChuangye"> - <div class="showIndex-block"> - <h1>灏变笟鍒涗笟</h1> - </div> - </el-menu-item> - <el-menu-item index="/shehuiBaozhang"> - <div class="showIndex-block"> - <h1>绀句細淇濋殰</h1> - </div> - </el-menu-item> - <el-menu-item> - <div class="showIndex-block"> - <h1>浜轰簨浜烘墠</h1> - </div> - </el-menu-item> - <el-menu-item> - <div class="showIndex-block"> - <h1>鍔冲姩鍏崇郴</h1> - </div> - </el-menu-item> - <el-menu-item> - <div class="showIndex-block"> - <h1>鍏跺畠涓氬姟</h1> - </div> - </el-menu-item> - - </div> - <div class="showIndex-right"> - <el-menu-item> - <div class="showIndex-block"> - <h1>钀ュ晢鏀跨瓥</h1> - </div> - </el-menu-item> - <el-menu-item> - <div class="showIndex-block"> - <h1>閫氳褰�</h1> - </div> - </el-menu-item> - <el-menu-item> - <div class="showIndex-block"> - <h1>宸ヤ綔鍛ㄦ姤</h1> - </div> - </el-menu-item> - <el-menu-item> - <div class="showIndex-block"> - <h1>鏂囨。涓績</h1> - </div> - </el-menu-item> - <el-menu-item> - <div class="showIndex-block"> - <h1>閫�鍑虹櫥褰�</h1> - </div> - </el-menu-item> - </div> - </el-menu> - </div> + <div class="showIndexTitle-wrap"> + <h1 class="title">鐭冲搴勪汉绀惧眬涓氬姟杩愯鏁版嵁鍒嗘瀽骞冲彴</h1> + <el-menu + :default-active="$route.path" + router + mode="horizontal" + class="el-menu-demo" + > + <div class="showIndex-left"> + <el-menu-item index="/index"> + <div class="showIndex-block"> + <h1>棣栭〉</h1> + </div> + </el-menu-item> + <el-menu-item index="/jiuyeAndChuangye"> + <div class="showIndex-block"> + <h1>灏变笟鍒涗笟</h1> + </div> + </el-menu-item> + <el-menu-item index="/shehuiBaozhang"> + <div class="showIndex-block"> + <h1>绀句細淇濋殰</h1> + </div> + </el-menu-item> + <el-menu-item> + <div class="showIndex-block"> + <h1>浜轰簨浜烘墠</h1> + </div> + </el-menu-item> + <el-menu-item> + <div class="showIndex-block"> + <h1>鍔冲姩鍏崇郴</h1> + </div> + </el-menu-item> + <el-menu-item> + <div class="showIndex-block"> + <h1>鍏跺畠涓氬姟</h1> + </div> + </el-menu-item> + </div> + <div class="showIndex-right"> + <el-menu-item index="/businessPolicy"> + <div class="showIndex-block"> + <h1>钀ュ晢鏀跨瓥</h1> + </div> + </el-menu-item> + <el-menu-item> + <div class="showIndex-block"> + <h1>閫氳褰�</h1> + </div> + </el-menu-item> + <el-menu-item> + <div class="showIndex-block"> + <h1>宸ヤ綔鍛ㄦ姤</h1> + </div> + </el-menu-item> + <el-menu-item> + <div class="showIndex-block"> + <h1>鏂囨。涓績</h1> + </div> + </el-menu-item> + <el-menu-item index="/login"> + <div class="showIndex-block"> + <h1>閫�鍑虹櫥褰�</h1> + </div> + </el-menu-item> + </div> + </el-menu> + </div> </template> <script> - export default { - name: "showIndexTitle" - } +export default { + name: "showIndexTitle" +}; </script> <style lang="scss"> - .showIndexTitle-wrap{ - .el-menu-item:focus, .el-menu-item:hover{ - background-color:transparent; - } - /*.el-menu-item:focus{*/ - /* background:url("../../assets/images/menu-active.png") no-repeat center;*/ - /* background-size: 100% 100%;*/ - /* width: 12.8rem !* 128/10 *!;*/ - /* height: 5rem;*/ - /*}*/ - .el-menu-item.is-active{ - background:url("../../assets/images/menu-active.png") no-repeat center; - background-size: 100% 100%; - width: 12.8rem /* 128/10 */; - height: 5rem; - } - .el-menu-item{ - background:url("../../assets/images/menu-normal.png") no-repeat center; - background-size: 100% 100%; - width: 12.8rem /* 128/10 */; - height: 5rem; - margin-right: 1.2rem /* 12/10 */; - } - .el-menu.el-menu--horizontal{ - border-bottom: 0; - } +.showIndexTitle-wrap { + .el-menu-item:focus, + .el-menu-item:hover { + background-color: transparent; } - + /*.el-menu-item:focus{*/ + /* background:url("../../assets/images/menu-active.png") no-repeat center;*/ + /* background-size: 100% 100%;*/ + /* width: 12.8rem !* 128/10 *!;*/ + /* height: 5rem;*/ + /*}*/ + .el-menu-item.is-active { + background: url("../../assets/images/menu-active.png") no-repeat center; + background-size: 100% 100%; + width: 0.5rem /* 128/256 */; + height: 0.1953125rem /* 50/256 */; + } + .el-menu-item { + background: url("../../assets/images/menu-normal.png") no-repeat center; + background-size: 100% 100%; + width: 0.5rem /* 128/256 */; + height: 0.1953125rem /* 50/256 */; + margin-right: 0.046875rem /* 12/256 */; + } + .el-menu.el-menu--horizontal { + border-bottom: 0; + } +} </style> <style lang="scss" scoped> - .showIndexTitle-wrap{ - width: 100%; - height: 9rem /* 90/10 */; - background:url("../../assets/images/jiashicang-title-bj.png") no-repeat center; - background-size: 100% 100%; - .title{ - font-size: 3rem /* 30/10 */; - font-family: 'Source Han Sans CN'; - color: #fff; - text-align: center; - line-height: 7rem /* 70/10 */; - } - .showIndex-left{ - position: absolute; - left:1rem /* 10/10 */; - top: -5rem /* 10/10 */; - display: flex; - .showIndex-block{ - /*background:url("../../assets/images/menu-normal.png") no-repeat center;*/ - /*background-size: 100% 100%;*/ - /*width: 12.8rem !* 128/10 *!;*/ - /*height: 5rem;*/ - h1{ - color: #fff; - font-size: 2.4rem; - text-align: center; - line-height: 5rem; - } - } - } - .showIndex-right{ - position: absolute; - right:1rem /* 10/10 */; - top: -5rem /* 10/10 */; - display: flex; - .showIndex-block{ - /*background:url("../../assets/images/menu-normal.png") no-repeat center;*/ - /*background-size: 100% 100%;*/ - /*width: 12.8rem !* 128/10 *!;*/ - /*height: 5rem;*/ - /*cursor: pointer;*/ - h1{ - color: #fff; - font-size: 2.4rem; - text-align: center; - line-height: 5rem; - } - } - .menu-active{ - +.showIndexTitle-wrap { + width: 100%; + height: 0.3515625rem /* 90/256 */; + background: url("../../assets/images/jiashicang-title-bj.png") no-repeat + center; + background-size: 100% 100%; + .title { + font-size: 0.1171875rem /* 30/256 */; + //font-family: "Source Han Sans CN"; + color: #fff; + text-align: center; + line-height: 0.2734375rem /* 70/256 */; + } + .showIndex-left { + position: absolute; + left: 0.0390625rem /* 10/256 */; + top: -0.1953125rem /* -50/256 */; + display: flex; + z-index: 9; + .showIndex-block { + /*background:url("../../assets/images/menu-normal.png") no-repeat center;*/ + /*background-size: 100% 100%;*/ + /*width: 12.8rem !* 128/10 *!;*/ + /*height: 5rem;*/ + h1 { + color: #fff; + font-size: 0.09375rem /* 24/256 */; + text-align: center; + line-height: 0.1953125rem /* 50/256 */; } } } + .showIndex-right { + position: absolute; + right: 0.0390625rem /* 10/256 */; + top: -0.1953125rem /* -50/256 */; + display: flex; + z-index: 9; + .showIndex-block { + /*background:url("../../assets/images/menu-normal.png") no-repeat center;*/ + /*background-size: 100% 100%;*/ + /*width: 12.8rem !* 128/10 *!;*/ + /*height: 5rem;*/ + /*cursor: pointer;*/ + h1 { + color: #fff; + font-size: 0.09375rem /* 24/256 */; + text-align: center; + line-height: 0.1953125rem /* 50/256 */; + } + } + .menu-active { + } + } +} </style> -- Gitblit v1.9.1