提交 977376e3 authored 作者: 龙菲's avatar 龙菲

优化博物馆和文物详情文字高度;优化神秘贵州展厅加载速度

上级 00b51b8d
......@@ -7,24 +7,15 @@
-->
<template>
<span
class="image-item"
:style="{
width: width,
height: height,
}"
>
<span class="image-item" :style="{
width: width,
height: height,
}">
<span class="warp" @click="showImage">
<span class="el-icon-view" style="margin-right:10px"></span>
查看大图
</span>
<el-image
ref="Image"
class="image"
:src="imgSrc"
:preview-src-list="previewSrc"
fit="contain"
></el-image>
<el-image ref="Image" class="image" :src="imgSrc" :preview-src-list="previewSrc" fit="contain"></el-image>
</span>
</template>
......@@ -41,6 +32,10 @@ export default {
typeof: String,
default: '100px',
},
highImgSrc: {
typeof: String,
default: '',
}
},
data() {
return {
......@@ -48,7 +43,7 @@ export default {
baseurl: '',
};
},
mounted() {},
mounted() { },
watch: {},
computed: {
imgSrc() {
......@@ -59,10 +54,11 @@ export default {
}
},
previewSrc() {
let src = this.highImgSrc || this.src
if (typeof this.src == 'string') {
return [this.src];
return [src];
} else {
return this.src;
return src;
}
},
},
......@@ -83,13 +79,16 @@ export default {
position: relative;
display: inline-block;
cursor: pointer;
& + .image-item {
&+.image-item {
margin-left: 10px;
}
.image {
width: 100%;
height: 100%;
}
.warp {
position: absolute;
width: 100%;
......@@ -99,6 +98,7 @@ export default {
align-items: center;
color: #fff;
}
&:hover {
.warp {
z-index: 1;
......
......@@ -2,17 +2,10 @@
<div class="smgz">
<div class="face-img smgz-item">
<div class="back-img img wow animate__animated animate__fadeIn">
<img
src="@/assets/imgs/boutique/smgz/1_faceImage/bg.png"
id="@/assets/imgs/boutique/smgz/1_faceImage/bg.png"
alt=""
/>
<img src="@/assets/imgs/boutique/smgz-5/1_faceImage/bg.png" alt="" />
</div>
<div class="left-title img wow animate__animated animate__fadeInLeft">
<img
src="@/assets/imgs/boutique/smgz/1_faceImage/left-title.png"
alt=""
/>
<img src="@/assets/imgs/boutique/smgz/1_faceImage/left-title.png" alt="" />
</div>
<!-- <div
class="center-title img wow animate__animated animate__fadeInDown"
......@@ -23,21 +16,10 @@
alt=""
/>
</div> -->
<div
class="ms img wow animate__animated animate__fadeInRight"
data-wow-duration="2s"
>
<img
src="@/assets/imgs/boutique/smgz/1_faceImage/ms.png"
id="@/assets/imgs/boutique/smgz/1_faceImage/ms.png"
alt=""
/>
<div class="ms img wow animate__animated animate__fadeInRight" data-wow-duration="2s">
<img src="@/assets/imgs/boutique/smgz/1_faceImage/ms-low.png" alt="" />
</div>
<div
class="more img wow animate__animated animate__fadeInUp"
data-wow-duration="1s"
@click="handleClickMore"
>
<div class="more img wow animate__animated animate__fadeInUp" data-wow-duration="1s" @click="handleClickMore">
<img src="@/assets/imgs/boutique/smgz/1_faceImage/more.png" alt="" />
</div>
</div>
......@@ -45,21 +27,12 @@
<!-- <div class="bg img wow animate__animated animate__fadeIn">
<img src="@/assets/imgs/boutique/smgz/2_intro/bg.png" alt="" />
</div> -->
<div
class="cover img wow animate__animated animate__fadeInUp"
data-wow-duration="1s"
>
<img src="@/assets/imgs/boutique/smgz/2_intro/cover.png" alt="" />
<div class="cover img wow animate__animated animate__fadeInUp" data-wow-duration="1s">
<img src="@/assets/imgs/boutique/smgz-5/2_intro/cover.png" alt="" />
</div>
<div
class="cover2 img wow animate__animated animate__fadeInUp"
data-wow-duration="2s"
>
<img src="@/assets/imgs/boutique/smgz/2_intro/cover2.png" alt="" />
<div
class="title img wow animate__animated animate__fadeInUp"
data-wow-duration="4s"
>
<div class="cover2 img wow animate__animated animate__fadeInUp" data-wow-duration="2s">
<img src="@/assets/imgs/boutique/smgz-10/2_intro/cover2.png" alt="" />
<div class="title img wow animate__animated animate__fadeInUp" data-wow-duration="4s">
<img src="@/assets/imgs/boutique/smgz/2_intro/title.png" alt="" />
</div>
</div>
......@@ -90,25 +63,16 @@
</div>
<div class="hall smgz-item">
<div class="hall-content wow animate__animated animate__fadeIn">
<div
class="hall-content-title wow animate__animated animate__fadeInDown"
>
<div class="hall-content-title wow animate__animated animate__fadeInDown">
<!-- <img src="@/assets/imgs/boutique/smgz/3_hall/title.png" alt="" /> -->
— 展览单元 —
</div>
<div class="hall-content-intro">
<div
class="hall-content-buttons wow animate__animated animate__fadeInUp"
>
<div
:class="[
'button-item',
currentUnitPicIndex == index ? 'active' : '',
]"
v-for="(item, index) in units"
:key="index"
@click="handleChangeUnit(index)"
>
<div class="hall-content-buttons wow animate__animated animate__fadeInUp">
<div :class="[
'button-item',
currentUnitPicIndex == index ? 'active' : '',
]" v-for="(item, index) in units" :key="index" @click="handleChangeUnit(index)">
{{ item.name }}
</div>
</div>
......@@ -117,13 +81,12 @@
</div>
</div>
<div
class="hall-content-swiper wow animate__animated animate__fadeInUp"
>
<div class="hall-content-swiper wow animate__animated animate__fadeInUp">
<swiper :options="swiperOption" ref="unitSwiper">
<swiper-slide v-for="(item, index) in units" :key="index">
<div class="img-container" v-if="item.img">
<img :src="$getFullUrl(baseUrl + item.img)" />
<!-- <img :src="$getFullUrl(baseUrl + item.img)" /> -->
<ImageViewer :src="$getFullUrl(baseUrl + item.img)" :highImgSrc="$getFullUrl(baseUrl + item.hightImg)" width="100%" height="100%" />
</div>
</swiper-slide>
<div class="swiper-pagination" slot="pagination"></div>
......@@ -140,9 +103,7 @@
<div class="crs smgz-item">
<div class="crs-content">
<div
class="crs-content-title wow animate__animated animate__fadeInDown"
>
<div class="crs-content-title wow animate__animated animate__fadeInDown">
— 展览精品 —
<!-- <img src="@/assets/imgs/boutique/smgz/4_cr/title.png" alt="" /> -->
</div>
......@@ -165,12 +126,7 @@
<swiper :options="swiperOption2" ref="crSwiper">
<swiper-slide v-for="(v, i) in units" :key="i">
<div class="crs-content-imgs">
<div
class="item"
v-for="(item, index) in crPics[i]"
:key="index"
@click="handleToCr(item.crId)"
>
<div class="item" v-for="(item, index) in crPics[i]" :key="index" @click="handleToCr(item.crId)">
<div class="img-container">
<img :src="$getFullUrl(item.url)" alt="" />
</div>
......@@ -192,29 +148,22 @@
<div class="guide smgz-item">
<div class="guide-content">
<div
class="guide-content-title wow animate__animated animate__fadeInDown"
>
<div class="guide-content-title wow animate__animated animate__fadeInDown">
<!-- <img src="@/assets/imgs/boutique/smgz/5_guide/title.png" alt="" /> -->
— 展览导航 —
</div>
<div class="guide-content-imgs">
<div class="img-container wow animate__animated animate__fadeInLeft">
<img src="@/assets/imgs/boutique/smgz/5_guide/pic1.png" alt="" />
<!-- <img src="@/assets/imgs/boutique/smgz/5_guide/pic1.png" alt="" /> -->
<ImageViewer :src="require(`@/assets/imgs/boutique/smgz-5/5_guide/pic1.png`)" :highImgSrc="require(`@/assets/imgs/boutique/smgz/5_guide/pic1.png`)" width="100%" height="100%" />
</div>
<!-- <div class="img-container wow animate__animated animate__fadeInRight">
<img src="@/assets/imgs/boutique/smgz/5_guide/pic2.png" alt="" />
</div> -->
<div
class="guide-content-vr wow animate__animated animate__fadeInRight"
id="vr-auto"
>
<div
class="vr-container"
@click="handleChangeToVR"
v-if="!showVrIFrame"
>
<img src="@/assets/imgs/boutique/smgz/5_guide/vr.png" alt="" />
<div class="guide-content-vr wow animate__animated animate__fadeInRight" id="vr-auto">
<div class="vr-container" @click="handleChangeToVR" v-if="!showVrIFrame">
<img src="@/assets/imgs/boutique/smgz-5/5_guide/vr.png" alt="" />
<div class="modal">
<svg-icon icon-class="360"></svg-icon>
<div class="vr-text">
......@@ -224,24 +173,16 @@
</div>
</div>
<div class="vr-iframe vr-container" v-else>
<div
:class="['loading-modal', isVrFull ? 'vr-full' : '']"
v-loading="showVrIFrame && !vrIFrameLoaded"
element-loading-text="正在加载神秘贵州展厅..."
element-loading-spinner="el-icon-loading"
element-loading-background="rgba(0, 0, 0, 0.8)"
>
<iframe
src="http://gz.people.com.cn/GB/222162/382387/402166/index.html"
frameborder="0"
style="width: 100%; height: 100%"
id="vr_iframe"
></iframe>
<div :class="['loading-modal', isVrFull ? 'vr-full' : '']" v-loading="showVrIFrame && !vrIFrameLoaded"
element-loading-text="正在加载神秘贵州展厅..." element-loading-spinner="el-icon-loading"
element-loading-background="rgba(0, 0, 0, 0.8)">
<iframe src="http://gz.people.com.cn/GB/222162/382387/402166/index.html" frameborder="0"
style="width: 100%; height: 100%" id="vr_iframe"></iframe>
<div class="icons" v-if="vrIFrameLoaded">
<div class="icon-item" @click="handleClickFullScreen">
<svg-icon icon-class="fullscreen2"></svg-icon>
<span class="icon-text">{{
isVrFull ? "缩小" : "全屏"
isVrFull? "缩小": "全屏"
}}</span>
</div>
<div class="icon-item" @click="handleExitVR">
......@@ -255,9 +196,7 @@
</div>
</div>
<div
class="guide-content-3d-imgs wow animate__animated animate__fadeInUp"
>
<div class="guide-content-3d-imgs wow animate__animated animate__fadeInUp">
<img src="@/assets/imgs/boutique/smgz/5_guide/guide.png" alt="" />
</div>
</div>
......@@ -292,7 +231,7 @@
</div>
<div class="right wow animate__animated animate__fadeInRight">
<div class="img-container">
<img src="@/assets/imgs/boutique/smgz/6_vr/2.png" alt="" />
<img src="@/assets/imgs/boutique/smgz-5/6_vr/2.png" alt="" />
</div>
<div class="text">策划人讲解神秘贵州</div>
<div class="video-button" @click="handleClikeVideo('explain.mp4')">
......@@ -315,6 +254,7 @@ import "swiper/dist/css/swiper.css";
import MDialog from "@/components/MDialog";
import videoPlayer from "@/components/VideoPlayer";
import { crPics } from "../data";
import ImageViewer from '@/components/ImageViewer'
// import { SlideContainer, SlidePage } from 'vue-slidepage'
export default {
name: "SMGZ",
......@@ -323,6 +263,7 @@ export default {
swiperSlide,
MDialog,
videoPlayer,
ImageViewer
// SlideContainer,
// SlidePage
},
......@@ -334,28 +275,35 @@ export default {
{
index: 0,
name: "沉积巨著",
img: "3_unit/1-1.png",
img: "3_unit/1-1-low.png",
hightImg: '3_unit/1-1.png',
intro:
"贵州素有“沉积岩王国”的美誉,亿万年的沉积地层蕴含了近6亿年的生命密码。展览运用长达26m的模型,配以代表性岩石标本,直观地展示贵州近9亿年的地层,巧妙地向观众科普相关地学知识。",
},
{
index: 1,
name: "生命源头",
img: "3_unit/2-1.png",
img: "3_unit/2-1-low.png",
hightImg: '3_unit/2-1.png',
intro:
"以无脊椎动物演化为线索,展示贵州震旦纪、寒武纪的重要生物群,以及奥陶纪至二叠纪的代表性生物,向观众科普这一时期生命从起源到兴盛、繁荣到衰亡的历程。",
},
{
index: 2,
name: "龙的故乡",
img: "3_unit/3-1.png",
img: "3_unit/3-1-low.png",
hightImg: '3_unit/3-1.png',
intro:
"用盘县动物群、兴义动物群和关岭动物群的典型化石标本,讲述三叠纪时期海生爬行动物由兴盛到繁荣的景象,诠释了2亿年前欣欣向荣的贵州海洋世界。展出的118件展品中,有目前全球仅有的蔡胡氏典型鱼龙模式标本,数量稀少的中国始喙龟化石标本,罕见的疑似怀孕梁氏关岭鱼龙化石标本,以及大量的胡氏贵州龙和创孔海百合等古生物化石标本。",
},
{
index: 3,
name: "陆地寻踪",
img: "3_unit/4-1.png",
img: "3_unit/4-1-low.png",
hightImg: '3_unit/4-1.png',
intro:
"重点展示侏罗纪至第四纪时期陆地古生物的演化历程,用恐龙的模型、骨骼化石、足迹化石及第四纪哺乳动物化石标本,向观众科普相关知识,唤起人们尊重自然,保护环境,与自然和谐共生。",
},
......@@ -464,7 +412,7 @@ export default {
imgsArr.forEach((i) => {
// url中包含了data-url压缩图的才进行替换
if (i.id && i.id.indexOf("smgz-5")) {
var imgObj = new Image(); //新建一个图片对象
let lowImgSrc = i.id;
let highImgSrc = lowImgSrc.replace("smgz-5", "smgz"); //最终显示的大图
......@@ -580,19 +528,23 @@ export default {
<style lang="scss" scoped>
@function sWidth($width) {
@return $width * 1.2 + px;
@return $width * 1.2+px;
}
@function sHeight($height) {
@return $height * 0.8 + px;
@return $height * 0.8+px;
}
// 公共样式
.smgz-item {
position: relative;
width: 100%;
overflow: hidden;
}
.img {
position: absolute;
img {
width: 100%;
height: 100%;
......@@ -621,15 +573,18 @@ export default {
.face-img {
height: 100vh;
.back-img {
width: 100%;
height: 100%;
left: 0;
top: 0;
img {
object-fit: cover;
}
}
.left-title {
height: sHeight(676);
width: sHeight(400);
......@@ -637,17 +592,20 @@ export default {
bottom: sHeight(188);
z-index: 1;
}
.center-title {
top: sHeight(32);
z-index: 1;
width: 100%;
display: flex;
justify-content: center;
img {
height: sHeight(86);
width: auto;
}
}
.ms {
width: sWidth(800);
height: sHeight(800);
......@@ -656,6 +614,7 @@ export default {
right: 0;
bottom: 0;
}
.more {
bottom: 0;
cursor: pointer;
......@@ -664,6 +623,7 @@ export default {
justify-content: center;
animation: likes 4s linear infinite;
transform-origin: 50% 100%;
img {
height: sHeight(145);
width: auto;
......@@ -673,10 +633,11 @@ export default {
.intro {
height: sHeight(1610);
background-image: url("@/assets/imgs/boutique/smgz/2_intro/bg.png");
background-image: url("@/assets/imgs/boutique/smgz-5/2_intro/bg.png");
background-repeat: no-repeat;
background-size: 100% 100%;
overflow: visible;
// .bg {
// width: 100%;
// height: sHeight(1620);
......@@ -686,25 +647,30 @@ export default {
top: sHeight(20);
display: flex;
justify-content: center;
img {
width: 88%;
}
}
.cover2 {
top: sHeight(230);
width: 100%;
.title {
width: 100%;
display: flex;
justify-content: center;
position: absolute;
top: 280px;
img {
height: sHeight(145);
width: auto;
}
}
}
.text {
width: 100%;
position: absolute;
......@@ -712,14 +678,17 @@ export default {
color: #fff;
background-color: rgba(0, 23, 58, 0.75);
padding: 32px 56px;
.title {
font-size: 28px;
}
.main {
font-size: 18px;
font-weight: normal;
}
}
// .text {
// width: 100%;
// display: flex;
......@@ -779,7 +748,7 @@ export default {
height: 100%;
position: absolute;
// top: -100px;
background-image: url("@/assets/imgs/boutique/smgz/3_hall/bg.png");
background-image: url("@/assets/imgs/boutique/smgz-5/3_hall/bg.png");
background-repeat: no-repeat;
background-size: 100% 100%;
display: flex;
......@@ -787,18 +756,22 @@ export default {
align-items: center;
width: 100%;
padding-top: 200px;
.hall-content-title {
margin-bottom: 70px;
font-size: 42px;
color: #fff;
letter-spacing: 2px;
}
.hall-content-intro {
display: flex;
flex-direction: column;
align-items: center;
.hall-content-buttons {
display: flex;
.button-item {
margin: 0 70px;
height: sHeight(112);
......@@ -813,6 +786,7 @@ export default {
cursor: pointer;
border: 2px solid transparent;
}
.button-item:hover,
.active {
background: #141c3c;
......@@ -820,6 +794,7 @@ export default {
box-shadow: 0px 12px 30px 0px #051730;
}
}
.unit-intro {
width: 70%;
font-size: 22px;
......@@ -834,13 +809,16 @@ export default {
.hall-content-swiper {
width: 80%;
margin-top: 88px;
.swiper-container {
height: sHeight(500);
}
.swiper-slide {
display: flex;
justify-content: center;
}
.img-container {
width: 80%;
height: 100%;
......@@ -848,11 +826,11 @@ export default {
box-shadow: 0px 12px 30px 0px #051730;
border-radius: 4px;
background: #3b4982;
img {
width: 100%;
height: 100%;
object-fit: contain;
}
// img {
// width: 100%;
// height: 100%;
// object-fit: contain;
// }
}
}
}
......@@ -860,24 +838,27 @@ export default {
.crs {
height: 1000px;
.crs-content {
width: 100%;
height: 100%;
position: absolute;
// top: -100px;
background-image: url("@/assets/imgs/boutique/smgz/4_cr/bg.png");
background-image: url("@/assets/imgs/boutique/smgz-5/4_cr/bg.png");
background-repeat: no-repeat;
background-size: 100% 100%;
padding-top: 155px;
display: flex;
flex-direction: column;
align-items: center;
.crs-content-title {
margin-bottom: 70px;
font-size: 42px;
color: #00173a;
letter-spacing: 2px;
}
// .crs-content-buttons {
// display: flex;
// .button-item {
......@@ -904,14 +885,18 @@ export default {
.crs-content-swiper {
width: 80%;
margin-top: 50px;
.swiper-container {
height: sHeight(600);
.swiper-slide {
display: flex;
justify-content: center;
.crs-content-imgs {
// margin-top: 88px;
display: flex;
// justify-content: center;
.item {
.img-container {
......@@ -921,11 +906,13 @@ export default {
background-color: #fff;
overflow: hidden;
cursor: pointer;
&:hover {
img {
scale: 1.1;
}
}
img {
width: 100%;
height: 100%;
......@@ -933,6 +920,7 @@ export default {
transition: all ease 0.3s;
}
}
.cr-name {
margin-top: 20px;
font-size: 26px;
......@@ -962,28 +950,32 @@ export default {
.guide {
height: 1900px;
.guide-content {
width: 100%;
height: 100%;
position: absolute;
// top: -100px;
background-image: url("@/assets/imgs/boutique/smgz/5_guide/bg.png");
background-image: url("@/assets/imgs/boutique/smgz-5/5_guide/bg.png");
background-repeat: no-repeat;
background-size: 100% 100%;
padding-top: 152px;
display: flex;
flex-direction: column;
align-items: center;
.guide-content-title {
margin-bottom: 70px;
font-size: 42px;
color: #fff;
letter-spacing: 2px;
}
.guide-content-imgs {
display: flex;
justify-content: center;
align-items: center;
.img-container {
width: 800px;
height: 596px;
......@@ -999,6 +991,7 @@ export default {
height: 600px;
display: flex;
padding: 20px 0 0 40px;
.vr-container {
width: 800px;
height: 520px;
......@@ -1006,16 +999,19 @@ export default {
cursor: pointer;
overflow: hidden;
box-shadow: 0px 18px 23px 8px rgb(0 0 0 / 30%);
&:hover {
img {
transform: scale(1.1);
}
}
img {
width: 100%;
height: 520px;
transition: all ease 0.5s;
}
.modal {
position: absolute;
left: 0;
......@@ -1028,18 +1024,22 @@ export default {
flex-direction: column;
align-items: center;
color: #fff;
&:hover {
.vr-text {
opacity: 1;
}
}
.svg-icon {
font-size: 150px;
}
.vr-text {
font-weight: 400;
opacity: 0;
transition: all ease 0.3s;
.svg-icon {
font-size: 32px;
}
......@@ -1052,11 +1052,13 @@ export default {
bottom: 0;
color: #fff;
margin-right: 8px;
.icon-item {
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
.svg-icon {
border: 1px solid rgb(88 75 70/ 80%);
border-radius: 50%;
......@@ -1064,6 +1066,7 @@ export default {
background: rgb(37 37 37 / 40%);
font-size: 18px;
}
.icon-text {
font-size: 12px;
font-weight: 400;
......@@ -1075,6 +1078,7 @@ export default {
width: 100%;
height: 100%;
transition: all ease 0.5s;
::v-deep .el-loading-spinner {
i {
color: #fff;
......@@ -1094,6 +1098,7 @@ export default {
height: calc(100vh - 100px);
z-index: 9999;
}
.vr-full-modal {
width: 100vw;
height: 100vh;
......@@ -1105,10 +1110,12 @@ export default {
}
}
}
.guide-content-3d-imgs {
margin-bottom: 70px;
width: 90%;
height: 1000px;
img {
width: 100%;
height: 100%;
......@@ -1120,18 +1127,20 @@ export default {
.vr {
height: 900px;
.vr-content {
width: 100%;
height: 100%;
position: absolute;
// top: -100px;
background-image: url("@/assets/imgs/boutique/smgz/6_vr/bg.png");
background-image: url("@/assets/imgs/boutique/smgz-5/6_vr/bg.png");
background-repeat: no-repeat;
background-size: 100% 100%;
padding-top: 172px;
display: flex;
align-items: center;
justify-content: space-around;
.text {
font-size: 20px;
font-family: PingFang SC;
......@@ -1139,6 +1148,7 @@ export default {
color: #141c3c;
line-height: 65px;
}
.video-button {
color: #fff;
font-size: 22px;
......@@ -1152,11 +1162,14 @@ export default {
letter-spacing: 2px;
cursor: pointer;
}
.left,
.right {
width: 20%;
.img-container {
width: 100%;
img {
width: 100%;
// height: 100%;
......@@ -1166,9 +1179,11 @@ export default {
.center {
position: relative;
.img-container {
animation: changeright 4s linear infinite;
}
.text-content {
width: 100%;
height: 100%;
......@@ -1180,6 +1195,7 @@ export default {
flex-direction: column;
align-items: center;
justify-content: center;
.center-text {
font-size: 40px;
font-weight: 500;
......@@ -1187,9 +1203,11 @@ export default {
line-height: 50px;
}
}
.button {
margin-top: 30px;
cursor: pointer;
.outter {
width: 90px;
height: 90px;
......@@ -1200,6 +1218,7 @@ export default {
border: 2px dashed#3B4982;
animation: likes 2.5s ease-in infinite;
transition: all ease-in 0.5s;
.inner {
width: 50px;
height: 50px;
......@@ -1216,6 +1235,7 @@ export default {
}
}
}
.smgz-video {
width: 70%;
height: 800px;
......@@ -1230,15 +1250,19 @@ export default {
0% {
transform: scale(1);
}
25% {
transform: scale(0.9);
}
50% {
transform: scale(0.85);
}
75% {
transform: scale(0.9);
}
100% {
transform: scale(1);
}
......
......@@ -232,7 +232,7 @@ $node-w: 700px;
.inner-left {
// padding-left: 120px;
width: 50%;
height: calc(100vh - 100px);
min-height: calc(100vh - 100px);
position: relative;
.info-container-left {
......
Markdown 格式
0%
您添加了 0 到此讨论。请谨慎行事。
请先完成此评论的编辑!
注册 或者 后发表评论