提交 c6b0a549 authored 作者: caicai's avatar caicai

修复bug

上级 77abc38c
...@@ -19,6 +19,6 @@ body { ...@@ -19,6 +19,6 @@ body {
</style> </style>
<style> <style>
/* CDN 服务仅供平台体验和调试使用,平台不承诺服务的稳定性,企业客户需下载字体包自行发布使用并做好备份。 */ /* CDN 服务仅供平台体验和调试使用,平台不承诺服务的稳定性,企业客户需下载字体包自行发布使用并做好备份。 */
@import url('https://at.alicdn.com/t/c/font_4010399_0wmcyi78r3v.css'); @import url('https://at.alicdn.com/t/c/font_4010399_5s1gb1mpn7t.css');
</style> </style>
...@@ -153,9 +153,9 @@ export default { ...@@ -153,9 +153,9 @@ export default {
} }
.img { .img {
flex-shrink: 0; flex-shrink: 0;
width: 36px; // width: 36px;
height: 36px; // height: 36px;
// height: 100%; height: 100%;
object-fit: contain; object-fit: contain;
} }
...@@ -163,17 +163,18 @@ export default { ...@@ -163,17 +163,18 @@ export default {
// display: none; // display: none;
opacity: 0; opacity: 0;
position: absolute; position: absolute;
top: -10px; top: -6px;
left: -20px; left: -20px;
border-radius: 4px; border-radius: 4px;
padding:4px; padding:4px;
width: max-content; width: max-content;
background-color: #333; background-color: rgba(51, 51, 51, 0.6);
word-break: normal; word-break: normal;
font-size: 14px; font-size: 14px;
color: #fff; color: #fff;
z-index: 99; z-index: 99;
transition: opacity .3s; transition: opacity .3s;
pointer-events: none;
} }
.yun_img { .yun_img {
width: 58px; width: 58px;
......
...@@ -5,13 +5,22 @@ ...@@ -5,13 +5,22 @@
</div> </div>
<div class="right_app_wrapper"> <div class="right_app_wrapper">
<div class="right_app" :class="['active_'+(current+1)]"> <div class="right_app" :class="['active_'+(current+1)]">
<el-scrollbar ref="scroll" style="height: 50px;"> <div class="scroll_bar">
<div class="second_app_list"> <el-scrollbar ref="scrollContainer" :vertical="false" style="height: 50px;" class=""
<div v-for="(item,index) in list" :key="index" class="second_app_item" @click="tapApp(item)"> @wheel.native.prevent="handleScroll">
<img :src="item.icon" alt="" v-if="item.icon && item.icon.indexOf('.png') == -1" class="second_app_img"> <div class="second_app_list">
<div v-for="(item,index) in list" :key="index" class="second_app_item" @click="tapApp(item)">
<img :src="item.icon" alt="" v-if="item.icon && item.icon.indexOf('.png') == -1" class="second_app_img">
</div>
</div> </div>
</el-scrollbar>
<div v-if="list.length > 12" @click="toLeft" class="scroll-to-left">
<span class="iconfont icon-right"></span>
</div> </div>
</el-scrollbar> <div v-if="list.length > 12" @click="toRight" class="scroll-to-right">
<span class="iconfont icon-right"></span>
</div>
</div>
<div class="tab_group"> <div class="tab_group">
<div v-for="(item,index) in fourList" :key="index" <div v-for="(item,index) in fourList" :key="index"
class="tab_item" :class="{'active':current==index,'disable':!item.name}" class="tab_item" :class="{'active':current==index,'disable':!item.name}"
...@@ -77,6 +86,9 @@ export default { ...@@ -77,6 +86,9 @@ export default {
} }
}, },
computed: { computed: {
scrollWrapper() {
return this.$refs.scrollContainer.$refs.wrap
},
fourList() { fourList() {
if(!this.groupList) return []; if(!this.groupList) return [];
// let hasSoft = this.groupList.filter(v => v.softList && v.softList.length > 0); // let hasSoft = this.groupList.filter(v => v.softList && v.softList.length > 0);
...@@ -96,6 +108,30 @@ export default { ...@@ -96,6 +108,30 @@ export default {
}, },
methods: { methods: {
handleScroll(e) {
console.log('handleScroll',e)
const eventDelta = e.wheelDelta || -e.deltaY * 40;
const $scrollWrapper = this.scrollWrapper;
$scrollWrapper.scrollLeft = $scrollWrapper.scrollLeft + eventDelta / 4;
},
toLeft() {
// el-scrollbar 容器
const el = this.$refs['scrollContainer'].wrap;
console.dir(el)
const beginTime = Date.now();
const beginValue = el.scrollLeft;
el.scrollLeft = beginValue - 110;
},
toRight() {
// el-scrollbar 容器
const el = this.$refs['scrollContainer'].wrap;
console.dir(el)
const beginTime = Date.now();
const beginValue = el.scrollLeft;
el.scrollLeft = beginValue + 110;
},
toTop() { toTop() {
// el-scrollbar 容器 // el-scrollbar 容器
const el = this.$refs['scroll'].wrap; const el = this.$refs['scroll'].wrap;
...@@ -131,6 +167,7 @@ export default { ...@@ -131,6 +167,7 @@ export default {
.second_container { .second_container {
display: flex; display: flex;
align-items: center; align-items: center;
justify-content: center;
} }
.left_main { .left_main {
box-sizing: border-box; box-sizing: border-box;
...@@ -168,9 +205,10 @@ export default { ...@@ -168,9 +205,10 @@ export default {
display: flex; display: flex;
align-items: center; align-items: center;
// justify-content: center; // justify-content: center;
flex: 1; // flex: 1;
} }
.right_app { .right_app {
position: relative;
display: flex; display: flex;
flex-direction: column; flex-direction: column;
justify-content: center; justify-content: center;
...@@ -180,8 +218,43 @@ export default { ...@@ -180,8 +218,43 @@ export default {
// background-size: 100%; // background-size: 100%;
background-position: center; background-position: center;
background-repeat: no-repeat; background-repeat: no-repeat;
width: 710px; // border: 1px solid red;
// width: 820px;
max-width: 1100px;
// background-image: url(~@/assets/bgc/3.png); // background-image: url(~@/assets/bgc/3.png);
.scroll_bar {
height: 44px;
}
.scroll_bar:hover {
.scroll-to-left,
.scroll-to-right {
display: flex;
}
}
.scroll-to-left,
.scroll-to-right {
display: none;
position: absolute;
top: 3px;
border-radius: 2px;
width: 24px;
height: 42px;
background-color: rgba(0, 0, 0, 0.4);
// display: flex;
align-items: center;
justify-content: center;
cursor: pointer;
}
.scroll-to-right {
right: -12px;
}
.scroll-to-left {
left: -12px;
span {
transform-origin: center;
transform: rotate(-180deg);
}
}
&.active_1 { &.active_1 {
// background-image: url(~@/assets/U_1.png); // background-image: url(~@/assets/U_1.png);
// background-image: url(~@/assets/bgc/2.png); // background-image: url(~@/assets/bgc/2.png);
...@@ -205,7 +278,7 @@ export default { ...@@ -205,7 +278,7 @@ export default {
align-items: center; align-items: center;
height: 30px; height: 30px;
// padding: 0 90px 0 80px; // padding: 0 90px 0 80px;
padding: 0 50px; // padding: 0 50px;
text-align: center; text-align: center;
background-image: url(~@/assets/bgc/1.png); background-image: url(~@/assets/bgc/1.png);
background-repeat: no-repeat; background-repeat: no-repeat;
...@@ -284,7 +357,8 @@ export default { ...@@ -284,7 +357,8 @@ export default {
align-items: center; align-items: center;
justify-content: center; justify-content: center;
flex-shrink: 0; flex-shrink: 0;
width: calc(100% / 8); // width: calc(100% / 8);
width: 88px;
} }
.second_app_img { .second_app_img {
padding: 4px; padding: 4px;
......
...@@ -306,10 +306,10 @@ export default { ...@@ -306,10 +306,10 @@ export default {
} }
} }
.manage_main { .manage_main {
padding: 36px 0 0 48px; padding: 36px 0 36px 48px;
background-color: #C6D3EA; background-color: #C6D3EA;
.manage_main_content { .manage_main_content {
padding-bottom: 36px; // padding-bottom: 36px;
padding-right: 48px; padding-right: 48px;
} }
.el-scrollbar__wrap { .el-scrollbar__wrap {
......
Markdown 格式
0% 或
您添加了 0 人 到此讨论。请谨慎行事。
请先完成此评论的编辑!
请 注册 或者 后发表评论