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

修复bug

上级 77abc38c
......@@ -19,6 +19,6 @@ body {
</style>
<style>
/* 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>
......@@ -153,9 +153,9 @@ export default {
}
.img {
flex-shrink: 0;
width: 36px;
height: 36px;
// height: 100%;
// width: 36px;
// height: 36px;
height: 100%;
object-fit: contain;
}
......@@ -163,17 +163,18 @@ export default {
// display: none;
opacity: 0;
position: absolute;
top: -10px;
top: -6px;
left: -20px;
border-radius: 4px;
padding:4px;
width: max-content;
background-color: #333;
background-color: rgba(51, 51, 51, 0.6);
word-break: normal;
font-size: 14px;
color: #fff;
z-index: 99;
transition: opacity .3s;
pointer-events: none;
}
.yun_img {
width: 58px;
......
......@@ -5,13 +5,22 @@
</div>
<div class="right_app_wrapper">
<div class="right_app" :class="['active_'+(current+1)]">
<el-scrollbar ref="scroll" style="height: 50px;">
<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 class="scroll_bar">
<el-scrollbar ref="scrollContainer" :vertical="false" style="height: 50px;" class=""
@wheel.native.prevent="handleScroll">
<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>
</el-scrollbar>
<div v-if="list.length > 12" @click="toLeft" class="scroll-to-left">
<span class="iconfont icon-right"></span>
</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 v-for="(item,index) in fourList" :key="index"
class="tab_item" :class="{'active':current==index,'disable':!item.name}"
......@@ -77,6 +86,9 @@ export default {
}
},
computed: {
scrollWrapper() {
return this.$refs.scrollContainer.$refs.wrap
},
fourList() {
if(!this.groupList) return [];
// let hasSoft = this.groupList.filter(v => v.softList && v.softList.length > 0);
......@@ -96,6 +108,30 @@ export default {
},
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() {
// el-scrollbar 容器
const el = this.$refs['scroll'].wrap;
......@@ -131,6 +167,7 @@ export default {
.second_container {
display: flex;
align-items: center;
justify-content: center;
}
.left_main {
box-sizing: border-box;
......@@ -168,9 +205,10 @@ export default {
display: flex;
align-items: center;
// justify-content: center;
flex: 1;
// flex: 1;
}
.right_app {
position: relative;
display: flex;
flex-direction: column;
justify-content: center;
......@@ -180,8 +218,43 @@ export default {
// background-size: 100%;
background-position: center;
background-repeat: no-repeat;
width: 710px;
// border: 1px solid red;
// width: 820px;
max-width: 1100px;
// 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 {
// background-image: url(~@/assets/U_1.png);
// background-image: url(~@/assets/bgc/2.png);
......@@ -205,7 +278,7 @@ export default {
align-items: center;
height: 30px;
// padding: 0 90px 0 80px;
padding: 0 50px;
// padding: 0 50px;
text-align: center;
background-image: url(~@/assets/bgc/1.png);
background-repeat: no-repeat;
......@@ -284,7 +357,8 @@ export default {
align-items: center;
justify-content: center;
flex-shrink: 0;
width: calc(100% / 8);
// width: calc(100% / 8);
width: 88px;
}
.second_app_img {
padding: 4px;
......
......@@ -306,10 +306,10 @@ export default {
}
}
.manage_main {
padding: 36px 0 0 48px;
padding: 36px 0 36px 48px;
background-color: #C6D3EA;
.manage_main_content {
padding-bottom: 36px;
// padding-bottom: 36px;
padding-right: 48px;
}
.el-scrollbar__wrap {
......
Markdown 格式
0% 或
您添加了 0 人 到此讨论。请谨慎行事。
请先完成此评论的编辑!
请 注册 或者 后发表评论