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

src/icons/svg/pen.svg

@@ -0,0 +1,11 @@
+<?xml version="1.0" encoding="utf-8"?>
+<svg version="1.1" xmlns:xlink="http://www.w3.org/1999/xlink" width="20px" height="20px" xmlns="http://www.w3.org/2000/svg">
+  <defs>
+    <filter x="-50.00%" y="-50.00%" width="200.00%" height="200.00%" filterUnits="objectBoundingBox" id="filter16">
+      <feColorMatrix type="matrix" values="0.4 0 0 0 0.3  0 0.4 0 0 0.3  0 0 0.4 0 0.3  0 0 0 1 0  " in="SourceGraphic" />
+    </filter>
+  </defs>
+  <g transform="matrix(1 0 0 1 -634 -5513 )">
+    <image preserveAspectRatio="none" style="overflow:visible" width="20" height="20" xlink:href="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADAAAAAwCAYAAABXAvmHAAAAAXNSR0IArs4c6QAAAERlWElmTU0AKgAAAAgAAYdpAAQAAAABAAAAGgAAAAAAA6ABAAMAAAABAAEAAKACAAQAAAABAAAAMKADAAQAAAABAAAAMAAAAADbN2wMAAAECklEQVRoBe1YS2tTQRTOowmND1wYEl26Cc2jWVhXBUvEqlDqMq2KCzdaf4ArcSEIWlB3LkTpqq0IAQVRd2pUbFwY+kif2bRQKDTGhViTJsbE76QzdW7M497k5uaCGbg9Z+bOPef7zpyZnozB0G7tCPzfETC2mr7f73fk8/mbhUJhw+Px3AmFQr+VYGopAQb+DQD7GOiQ3W6/EA6Hc3JJmOVOVHteGfDkwptKpdxYiedra2t5OT5NciapPcfn8zmRNu9gl0c+I/gIJpPJ8WAwKCu4siYJxhtWKfLId0obLzP2E3LAaDTGIM+wMR9IyFoJTQmUSRsCPzg/Px9OJBIRp9P5QyAhK500I1ANPIu6gUg4HI4t9E+zsZokNCEgB3y9JJpOQAn4ekg0lQCdNtiwdNrwDbtlMpkGYrHYBw6WSyLa19e3vbi4WKAxlk5ZqCfZHEqnDMY/sn5RNO0YJfDw8BaPhzksgp+bm5MAoHder/c8jtX15eXlMTaXiwgUIsGbgytcdnBFTakUPI7Qcfg341nnOGAjAP0VHisbm83lcreYvitULyXK5HwKaTS4sLBAqSRpADmEgUk8FMgxHKdXIPOwcRwr8hr6PjzUZrPZbH88Hk/udP/+VZWA1uCJhmoEWgFeNQKtAq8KgVaCb5hAq8E3REAP4OsmoBfwdRHQE3jFBPQGXhEBPYInAlR/1GxdXV0HUa+8x0ReVf5EfwD/+mlM0iqVByjYTmAilQd72QczqG36V1ZWvkkMKOzIKubMZvNt2OVVJUqbwlmA/6ckrgYehF/Cxh6Grwge1WdD4MmWnHLaBOfDzDEJdI1XA4GAhDzA+/HuCZ4OvH8MgpehFwsz9F9A5+CpMDulBnjYrE0AwOjq4wBNFtoQbg0mRRJYlRSAbkI+wA+WEcwtYN/IrioF24rUmsVcd3f3CEA9ZFZXIY8IHibcbvelcteBlPMg1JS0EfzXXgGA7+UfANAN6Nd4H/Li0tKSZCXoHUUec8W0mVEzbQT/tQlgskgggty+jzGRxDDSaYKnU5m0KW7Ycj9GRCD16lVTyOVy2a1WawLGad4mwB/ijrA1iMRd3od8itV6xCLPf0mpdtoIfiRq1VPIYrFQ9DnJKfFLkLmH/nVh7BzA05WhZuDJt+QoFMBwdTd9MEA3BMXW09NjSafTRxHxNEBvYpBuIKhxsk2P/I47BQQAdj9OllF82JvJZI7hfsfGjZRIzcCTXx6xEgwGA0UZQL/jRSWgkm9AMI6BZ52dnaPRaJS+06RVTCGkiKtKlNMA/AXvI7j++ISNHpmenv6qCeISJxUJ2Gy21e3t7Thy3IVnA99NEVjURZ+xuRHk6K8SW/rrUhrhP+1h/SFrI2pHoB2BdgT0EoE/XD0Yrfi3Ps4AAAAASUVORK5CYII=" x="634px" y="5513px" filter="url(#filter16)" />
+  </g>
+</svg>

src/views/detail/detailIndex.vue

@@ -56,9 +56,53 @@
 
         <!-- 分页 -->
         <div class="paging flexcenter">
-			<el-pagination small background layout="prev, pager, next" :total="1000">
+            <el-pagination small background layout="prev, pager, next" :total="1000">
-			</el-pagination>
+            </el-pagination>
-		</div>
+        </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>

src/views/search/searchResult/SearchResult.vue

@@ -259,6 +259,5 @@ export default {
 		}
 	}
 
-
 }
 </style>