Html
    Css
    Js

    
                        
@charset "utf-8";
	[v-cloak] {
	display:none
}
* {
	-webkit-tap-highlight-color:rgba(0,0,0,0);
	-webkit-touch-callout:text
}
body,h1,h2,h3,h4,h5,p,dl,dd,ul,ol,form,input,textarea,th,td,select {
	margin:0;
	padding:0
}
html,body,div,span,object,,h1,h2,h3,h4,h5,h6,p,blockquote,pre,abbr,address,cite,code,del,dfn,em,img,ins,kbd,q,samp,small,strong,sub,sup,var,b,i,dl,dt,dd,ol,ul,li,fieldset,form,label,legend,table,caption,tbody,tfoot,thead,tr,th,td,article,aside,canvas,details,figcaption,figure,footer,header,hgroup,menu,nav,section,summary,time,mark,audio,video {
	margin:0;
	padding:0;
	border:0;
	outline:0;
	background:rgba(0,0,0,0)
}
a {
	outline:none;
	-webkit-tap-highlight-color:rgba(0,0,0,0)
}
h1,h2,h3,h4,h5,h6,em,i {
	font-weight:100;
	font-style:normal
}
em {
	font-style:normal
}
ul,ol,li {
	list-style:none
}
a {
	text-decoration:none;
	outline:0
}
img {
	border:none;
	vertical-align:top
}
table {
	border-collapse:collapse
}
input,textarea {
	outline:none
}
textarea {
	resize:none;
	overflow:auto
}
body {
	font-size:14px;
	font-family:"PingFangSC",Arial,Helvetica,STHeiTi,sans-serif
}
input {
	-webkit-appearance:none;
	outline:none
}
html,body {
	width:100%;
	height:100%;
	min-height:100vh;
	background-color:#eee
}
.wrapper {
	position:relative;
	box-sizing:border-box;
	margin:0 auto;
	width:100%;
	overflow-y:scroll;
	overflow-x:hidden
}
.content {
	padding:.1rem .2rem .4rem .22rem;
	font-size:.16rem;
	line-height:.24rem
}
.content a.tit-wrap {
	font:inherit;
	color:#F2F2F9
}
.content .tit-wrap {
	display:flex;
	justify-content:space-between;
	align-items:center;
	padding-top:.12rem;
	margin-bottom:.18rem
}
.content .tit-wrap h2 {
	width:85%;
	font-size:.15rem;
	font-weight:600
}
.content .tit-wrap i {
	transition:transform .3s ease;
	-moz-transition:-moz-transform .3s ease;
	-webkit-transition:-webkit-transform .3s ease;
	-o-transition:-o-transform .3s ease
}
.content .tit-wrap .up {
	transform:rotate(180deg);
	-webkit-transform:rotate(180deg);
	-moz-transform:rotate(180deg);
	-o-transform:rotate(180deg)
}
.content .desc-wrap {
	padding-right:.02rem;
	margin-bottom:.08rem
}
.content .desc-wrap h3 {
	margin-left:-0.06rem;
	font-weight:600;
	margin-bottom:.08rem;
	font-size:.15rem;
	text-align:justify
}
.content .desc-wrap .font-title {
	font-weight:600;
	font-size:.15rem;
	text-align:justify
}
.content .desc-wrap span.font-title {
	display:inline-block;
	margin-bottom:.08rem
}
.content .desc-wrap .sub-desc {
	margin-bottom:.12rem;
	font-size:.14rem;
	line-height:.2rem;
	text-align:justify
}
.content .desc-wrap .sub-desc p {
	margin-bottom:.06rem;
	text-align:justify
}
.content .desc-wrap .sub-desc span {
	display:inline-block;
	line-height:.18rem;
	font-size:.13rem;
	text-align:justify
}
.content .desc-wrap .sub-content:nth-child(2) {
	margin-top:.1rem
}
.content .desc-wrap .sub-content .sub-bottom-content:last-child .sub-desc {
	margin-bottom:.04rem
}
/*
@media screen and (min-width:992px) and (max-height:579px) {
	.wrapper {
	height:558px;
	top:50%;
	transform:translateY(-50%);
}
}@media screen and (min-width:992px) {
	.wrapper {
	width:375px;
	height:667px;
	top:49%;
	transform:translateY(-50%);
}
::-webkit-scrollbar {
	display:block;
}
::-webkit-scrollbar-thumb {
	height:50px;
	outline-offset:-2px;
	outline:#fff solid 2px;
	border:2px solid #fff;
	background-color:#b2b3b4;
	border-radius:4px
}
::-webkit-scrollbar-thumb:hover {
	height:50px;
	background-color:rgb(172,208,236);
	border-radius:4px
}
::-webkit-scrollbar {
	width:8px;
	height:8px
}
::-webkit-scrollbar-track-piece {
	background-color:transparent;
	border-radius:0
}
::-webkit-scrollbar {
	display:block;
}
}@media screen and (max-width:993px) {
	::-webkit-scrollbar {
	display:none;
}
}*/

                        
↑上面代码改变,会自动显示代码结果 jQuery调用版本:1.11.3
 立即下载

点击箭头下拉展示内容

更新时间:2021-08-18 00:08:42

应用vue实现,列表项下拉箭头展示更多内容,核心代码 js:

this.$set(this.arrowup, index, !this.arrowup[index]);
0