|
|
@@ -25,7 +25,7 @@
|
|
|
<div class="botBtn">
|
|
|
<div
|
|
|
@click="cutPage(item.id)"
|
|
|
- class="btnRow"
|
|
|
+ :class="`btnRow ${tubiaoShow ? '' : 'btnRowHide'}`"
|
|
|
v-for="item in btnData"
|
|
|
:key="item.id"
|
|
|
>
|
|
|
@@ -51,6 +51,12 @@
|
|
|
</div>
|
|
|
</transition>
|
|
|
</div>
|
|
|
+ <div class="btnRow btnRow2" @click="tubiaoShow = !tubiaoShow">
|
|
|
+ <div>
|
|
|
+ <i class="el-icon-d-arrow-right" v-show="tubiaoShow"></i>
|
|
|
+ <i class="el-icon-d-arrow-left" v-show="!tubiaoShow"></i>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
</div>
|
|
|
<!-- 简介组件 -->
|
|
|
<StairIntro v-if="btnDataAc === 1" @close="btnDataAc = null" />
|
|
|
@@ -72,8 +78,11 @@ export default {
|
|
|
data() {
|
|
|
//这里存放数据
|
|
|
return {
|
|
|
+ // 图标的展开收起
|
|
|
+ tubiaoShow: true,
|
|
|
+
|
|
|
// 测试url
|
|
|
- // textUrl: "http://192.168.20.48:8081", //本地
|
|
|
+ // textUrl: "http://project.4dage.com:8016/SWKK", //本地
|
|
|
textUrl: "/SWKK", //打包
|
|
|
|
|
|
lookNum: 0,
|
|
|
@@ -181,7 +190,7 @@ export default {
|
|
|
activated() {}, //如果页面有keep-alive缓存功能，这个函数会触发
|
|
|
};
|
|
|
</script>
|
|
|
-<style lang='less' scoped>
|
|
|
+<style lang="less" scoped>
|
|
|
.stair {
|
|
|
position: relative;
|
|
|
max-width: 500px;
|
|
|
@@ -236,7 +245,7 @@ export default {
|
|
|
left: 14px;
|
|
|
}
|
|
|
.botBtn {
|
|
|
- padding: 0 10px;
|
|
|
+ padding: 0 40px 0 10px;
|
|
|
display: flex;
|
|
|
position: absolute;
|
|
|
width: 100%;
|
|
|
@@ -248,6 +257,8 @@ export default {
|
|
|
text-align: center;
|
|
|
width: 52px;
|
|
|
height: 51px;
|
|
|
+ opacity: 1;
|
|
|
+ transition: all 0.5s;
|
|
|
& > img {
|
|
|
width: 52px;
|
|
|
height: 51px;
|
|
|
@@ -261,6 +272,29 @@ export default {
|
|
|
font-size: 14px;
|
|
|
}
|
|
|
}
|
|
|
+
|
|
|
+ .btnRow2 {
|
|
|
+ position: absolute;
|
|
|
+ right: 0;
|
|
|
+ top: 0;
|
|
|
+ z-index: 9999;
|
|
|
+
|
|
|
+ & > div {
|
|
|
+ width: 100%;
|
|
|
+ height: 100%;
|
|
|
+ display: flex;
|
|
|
+ justify-content: center;
|
|
|
+ align-items: center;
|
|
|
+ color: #d6cece;
|
|
|
+ font-size: 30px;
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ .btnRowHide {
|
|
|
+ opacity: 0;
|
|
|
+ pointer-events: none;
|
|
|
+ }
|
|
|
+
|
|
|
.likeAddAnimate-enter-active,
|
|
|
.likeAddAnimate-leave-active {
|
|
|
transition: all 2s ease;
|
|
|
@@ -296,4 +330,4 @@ export default {
|
|
|
}
|
|
|
}
|
|
|
}
|
|
|
-</style>
|
|
|
+</style>
|
