A1300399510/GterForumWeB
2
1
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

a1300399510@qq.com 提交于 2023/03/31 -15:00:01

Browse Source
This commit is contained in:
XiaoMo
2023-03-31 15:00:10 +08:00
parent d18a17fcc9
commit f31d84a7e3
6 changed files with 252 additions and 6 deletions
Download Patch File Download Diff File Expand all files Collapse all files

246
src/views/detail/detailIndex.vue
View File

@@ -56,9 +56,53 @@
<!-- 分页 -->
<div class="paging flexcenter">
<el-pagination small background layout="prev, pager, next" :total="1000">
</el-pagination>
</div>
<el-pagination small background layout="prev, pager, next" :total="1000">
</el-pagination>
</div>
<!-- 底部 -->
<div class="discuss-bottom flexflex flexacenter">
<!-- 底部的轮播 -->
<div class="swiper" @touchstart="touchstartt()" @touchend="touchendd()" ref="swiper">
<div class="bottom-item flexacenter">
<div class="bottom-comment flexacenter" @click="setValue('popState', 'discussionSingle')">
<!-- <img class="bottom-comment-icom" mode="widthFix" src="{~offer/mobile/img/u1605.svg}" /> -->
<svg-icon icon-class="pen" class-name="bottom-comment"></svg-icon>
想问啥，大胆问
<div class="loginBtn" v-if="!islogin" @click.stop="setValue('isloginBtnState', true, 'boolean')">
</div>
</div>
</div>
</div>
<div class="bottom-item flex1 flexacenter">
<div class="bottom-operation-box flex1 flexacenter">
<div class="bottom-operation-item flex1 flexcolumn flexcenter" @click="tapLike">
<div class="praise_bubble" id="praise_bubble" @click.stop=""
:style="{ height: prepareLiskeState ? '' : '.5333rem' }"></div>
<div class="loginBtn" v-if="!islogin" @click.stop="setValue('isloginBtnState', true, 'boolean')">
</div>
<img class="bottom-operation-icom" :class="{ 'prepareLiskeAnimateState': prepareLiskeAnimateState }"
src="{~offer/mobile/img/u1152.png}" />
<div class="bottom-operation-text">{{ stat.like == 0 ? '' : stat.like }}赞</div>
</div>
<div class="bottom-operation-item flex1 flexcolumn flexcenter" @click="postcollect()">
<div class="loginBtn" v-if="!islogin" @click.stop="setValue('isloginBtnState', true, 'boolean')">
</div>
<img class="bottom-operation-icom" mode="widthFix"
:src="iscollect == 0 ? '{~offer/mobile/img/u1610.png}' : '{~offer/mobile/img/icon-star-o.png}'">
<div class="bottom-operation-text">收藏</div>
</div>
<div class="bottom-operation-item flex1 flexcolumn flexcenter" @click="transmit">
<img class="bottom-operation-icom bottom-transmit-icom" mode="widthFix"
src="{~offer/mobile/img/u1613.png}" />
<div class="bottom-operation-text">转发</div>
<button class="bottom-operation-button flexcolumn flexcenter" open-type="share"></button>
</div>
</div>
</div>
</div>
<detail-reply :two-comment-data="twoCommentData" :pop-state="popState"></detail-reply>
@@ -85,14 +129,32 @@ export default {
url: "https://bbs.gter.net/thread-2543548-1-1.html",
}
},
info: {
avatar: "https://oss.gter.net/avatar/97KwEWANd_4DHWiY6VbnSUFSCKroYWFjYQ~~/middle",
},
islogin: true,
prepareLiskeState: false,
prepareLiskeAnimateState: false,
stat: {},
iscollect: 0,
};
},
mounted() {
},
methods: {
tapLike() { },
// 点击转发
transmit(){
}
},
@@ -148,7 +210,6 @@ export default {
}
}
.detail-title-box {
padding: .72rem 0.2933rem 0;
color: #000;
@@ -279,5 +340,180 @@ export default {
}
}
.paging {
margin-top: .48rem;
::v-deep {
.el-pagination.is-background .el-pager li:not(.disabled).active {
background: rgba(98, 177, 255, 1);
border-radius: 50%;
}
.el-pagination .btn-next .el-icon,
.el-pagination .btn-prev .el-icon {
font-size: .4rem;
}
}
}
.discuss-bottom {
position: fixed;
bottom: 0;
left: 50%;
transform: translateX(-50%);
width: 100vw;
background-color: #fff;
padding: 0 0.4rem;
box-sizing: border-box;
z-index: 99;
border-top: 0.0133rem solid #dbdcdd;
padding-right: 0;
height: 2rem;
width: 10rem;
justify-content: space-between;
.swiper {
width: 4.6667rem;
height: 2rem;
position: relative;
overflow: auto;
-ms-overflow-style: none;
overflow: -moz-scrollbars-none;
&::-webkit-scrollbar {
width: 0 !important;
}
}
.bottom-item {
justify-content: space-between;
height: 100%;
.bottom-comment {
width: 4.6rem;
height: 0.8rem;
border-radius: 1rem;
padding: 0 0.28rem;
font-size: 0.32rem;
color: #aaaaaa;
background-color: #f2f2f2;
border: 0.0133rem solid #ebebeb;
box-sizing: border-box;
position: relative;
.bottom-comment-icom {
width: 0.4rem;
height: 0.4rem;
margin-right: 0.16rem;
}
}
.bottom-operation-box {
width: 3.8667rem;
justify-content: space-between;
}
.bottom-operation-icom {
width: 0.48rem;
height: 0.48rem;
margin-bottom: 0.1333rem;
}
.bottom-operation-item {
position: relative;
padding: 0 0.4rem;
}
.bottom-operation-button {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-color: transparent;
padding: 0;
margin: 0;
border: none;
outline: none;
&::after {
border: none;
}
}
.bottom-transmit-icom {
width: 0.4rem;
height: 0.4rem;
}
.bottom-operation-text {
font-size: 0.32rem;
color: #555555;
}
.bottom-information {
position: relative;
min-width: 4.6667rem;
max-width: 53.3333rem;
height: 0.8rem;
border-radius: 1rem;
background: linear-gradient(to right, #fff, #50e3c2, #50e3c2, #50e3c2);
}
.bottom-information-avatar {
width: 0.8rem;
height: 0.8rem;
border-radius: 50%;
}
.bottom-information-content {
color: #fff;
font-size: 0.2933rem;
display: flex;
align-items: center;
justify-content: space-around;
padding: 0 0.1333rem;
.vertical {
height: 0.2933rem;
background-color: #fff;
width: 0.0133rem;
}
}
.bottom-information-item:not(:last-of-type) {
justify-content: center;
}
}
.praise_bubble {
width: 50px;
height: 200px;
position: absolute;
bottom: 1.2rem;
background-color: transparent;
}
.praise_bubble .bubble {
position: absolute;
width: 40px;
height: 40px;
left: 0;
bottom: 0px;
background-repeat: no-repeat;
background-size: 100%;
transform-origin: bottom;
}
}
}
</style>