style: mp模块stylelint
This commit is contained in:
parent
b45b85984c
commit
4925a66cc5
@ -46,7 +46,7 @@
|
|||||||
v-if="scope.row.qrCodeUrl"
|
v-if="scope.row.qrCodeUrl"
|
||||||
:src="scope.row.qrCodeUrl"
|
:src="scope.row.qrCodeUrl"
|
||||||
alt="二维码"
|
alt="二维码"
|
||||||
style="height: 100px; display: inline-block"
|
style="display: inline-block; height: 100px"
|
||||||
/>
|
/>
|
||||||
<el-button
|
<el-button
|
||||||
link
|
link
|
||||||
|
@ -227,29 +227,6 @@ onMounted(async () => {
|
|||||||
})
|
})
|
||||||
</script>
|
</script>
|
||||||
<style lang="scss" scoped>
|
<style lang="scss" scoped>
|
||||||
/*瀑布流样式*/
|
|
||||||
.waterfall {
|
|
||||||
width: 100%;
|
|
||||||
column-gap: 10px;
|
|
||||||
column-count: 5;
|
|
||||||
margin: 0 auto;
|
|
||||||
}
|
|
||||||
|
|
||||||
.waterfall-item {
|
|
||||||
padding: 10px;
|
|
||||||
margin-bottom: 10px;
|
|
||||||
break-inside: avoid;
|
|
||||||
border: 1px solid #eaeaea;
|
|
||||||
}
|
|
||||||
|
|
||||||
.material-img {
|
|
||||||
width: 100%;
|
|
||||||
}
|
|
||||||
|
|
||||||
p {
|
|
||||||
line-height: 30px;
|
|
||||||
}
|
|
||||||
|
|
||||||
@media (min-width: 992px) and (max-width: 1300px) {
|
@media (min-width: 992px) and (max-width: 1300px) {
|
||||||
.waterfall {
|
.waterfall {
|
||||||
column-count: 3;
|
column-count: 3;
|
||||||
@ -276,5 +253,25 @@ p {
|
|||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
/*瀑布流样式*/
|
.waterfall {
|
||||||
|
width: 100%;
|
||||||
|
column-gap: 10px;
|
||||||
|
column-count: 5;
|
||||||
|
margin: 0 auto;
|
||||||
|
}
|
||||||
|
|
||||||
|
.waterfall-item {
|
||||||
|
padding: 10px;
|
||||||
|
margin-bottom: 10px;
|
||||||
|
break-inside: avoid;
|
||||||
|
border: 1px solid #eaeaea;
|
||||||
|
}
|
||||||
|
|
||||||
|
.material-img {
|
||||||
|
width: 100%;
|
||||||
|
}
|
||||||
|
|
||||||
|
p {
|
||||||
|
line-height: 30px;
|
||||||
|
}
|
||||||
</style>
|
</style>
|
||||||
|
@ -1,25 +1,27 @@
|
|||||||
.avue-card{
|
.avue-card {
|
||||||
&__item{
|
&__item {
|
||||||
margin-bottom: 16px;
|
margin-bottom: 16px;
|
||||||
border: 1px solid #e8e8e8;
|
border: 1px solid #e8e8e8;
|
||||||
background-color: #fff;
|
background-color: #fff;
|
||||||
box-sizing: border-box;
|
box-sizing: border-box;
|
||||||
color: rgba(0,0,0,.65);
|
color: rgba(0, 0, 0, 0.65);
|
||||||
font-size: 14px;
|
font-size: 14px;
|
||||||
font-variant: tabular-nums;
|
font-variant: tabular-nums;
|
||||||
line-height: 1.5;
|
line-height: 1.5;
|
||||||
list-style: none;
|
list-style: none;
|
||||||
font-feature-settings: "tnum";
|
font-feature-settings: 'tnum';
|
||||||
cursor: pointer;
|
cursor: pointer;
|
||||||
height:200px;
|
height: 200px;
|
||||||
&:hover{
|
|
||||||
border-color: rgba(0,0,0,.09);
|
&:hover {
|
||||||
box-shadow: 0 2px 8px rgba(0,0,0,.09);
|
border-color: rgba(0, 0, 0, 0.09);
|
||||||
|
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.09);
|
||||||
}
|
}
|
||||||
&--add{
|
|
||||||
border:1px dashed #000;
|
&--add {
|
||||||
|
border: 1px dashed #000;
|
||||||
width: 100%;
|
width: 100%;
|
||||||
color: rgba(0,0,0,.45);
|
color: rgba(0, 0, 0, 0.45);
|
||||||
background-color: #fff;
|
background-color: #fff;
|
||||||
border-color: #d9d9d9;
|
border-color: #d9d9d9;
|
||||||
border-radius: 2px;
|
border-radius: 2px;
|
||||||
@ -27,74 +29,87 @@
|
|||||||
align-items: center;
|
align-items: center;
|
||||||
justify-content: center;
|
justify-content: center;
|
||||||
font-size: 16px;
|
font-size: 16px;
|
||||||
i{
|
|
||||||
|
i {
|
||||||
margin-right: 10px;
|
margin-right: 10px;
|
||||||
}
|
}
|
||||||
&:hover{
|
|
||||||
|
&:hover {
|
||||||
color: #40a9ff;
|
color: #40a9ff;
|
||||||
background-color: #fff;
|
background-color: #fff;
|
||||||
border-color: #40a9ff;
|
border-color: #40a9ff;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
&__body{
|
|
||||||
|
&__body {
|
||||||
display: flex;
|
display: flex;
|
||||||
padding: 24px;
|
padding: 24px;
|
||||||
}
|
}
|
||||||
&__detail{
|
|
||||||
flex:1
|
&__detail {
|
||||||
|
flex: 1;
|
||||||
}
|
}
|
||||||
&__avatar{
|
|
||||||
|
&__avatar {
|
||||||
width: 48px;
|
width: 48px;
|
||||||
height: 48px;
|
height: 48px;
|
||||||
border-radius: 48px;
|
border-radius: 48px;
|
||||||
overflow: hidden;
|
overflow: hidden;
|
||||||
margin-right: 12px;
|
margin-right: 12px;
|
||||||
img{
|
|
||||||
|
img {
|
||||||
width: 100%;
|
width: 100%;
|
||||||
height: 100%;
|
height: 100%;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
&__title{
|
|
||||||
color: rgba(0,0,0,.85);
|
&__title {
|
||||||
|
color: rgba(0, 0, 0, 0.85);
|
||||||
margin-bottom: 12px;
|
margin-bottom: 12px;
|
||||||
font-size: 16px;
|
font-size: 16px;
|
||||||
&:hover{
|
|
||||||
color:#1890ff;
|
&:hover {
|
||||||
|
color: #1890ff;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
&__info{
|
|
||||||
color: rgba(0,0,0,.45);
|
&__info {
|
||||||
|
color: rgba(0, 0, 0, 0.45);
|
||||||
display: -webkit-box;
|
display: -webkit-box;
|
||||||
-webkit-box-orient: vertical;
|
-webkit-box-orient: vertical;
|
||||||
-webkit-line-clamp: 3;
|
-webkit-line-clamp: 3;
|
||||||
overflow: hidden;
|
overflow: hidden;
|
||||||
height: 64px;
|
height: 64px;
|
||||||
}
|
}
|
||||||
&__menu{
|
|
||||||
|
&__menu {
|
||||||
display: flex;
|
display: flex;
|
||||||
justify-content:space-around;
|
justify-content: space-around;
|
||||||
height: 50px;
|
height: 50px;
|
||||||
background: #f7f9fa;
|
background: #f7f9fa;
|
||||||
color: rgba(0,0,0,.45);
|
color: rgba(0, 0, 0, 0.45);
|
||||||
text-align: center;
|
text-align: center;
|
||||||
line-height: 50px;
|
line-height: 50px;
|
||||||
&:hover{
|
|
||||||
color:#1890ff;
|
&:hover {
|
||||||
|
color: #1890ff;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
/** joolun 额外加的 */
|
/** joolun 额外加的 */
|
||||||
.avue-comment__main {
|
.avue-comment__main {
|
||||||
flex: unset!important;
|
flex: unset !important;
|
||||||
border-radius: 5px!important;
|
border-radius: 5px !important;
|
||||||
margin: 0 8px!important;
|
margin: 0 8px !important;
|
||||||
}
|
}
|
||||||
|
|
||||||
.avue-comment__header {
|
.avue-comment__header {
|
||||||
border-top-left-radius: 5px;
|
border-top-left-radius: 5px;
|
||||||
border-top-right-radius: 5px;
|
border-top-right-radius: 5px;
|
||||||
}
|
}
|
||||||
|
|
||||||
.avue-comment__body {
|
.avue-comment__body {
|
||||||
border-bottom-right-radius: 5px;
|
border-bottom-right-radius: 5px;
|
||||||
border-bottom-left-radius: 5px;
|
border-bottom-left-radius: 5px;
|
||||||
|
@ -1,27 +1,33 @@
|
|||||||
/* 来自 https://github.com/nmxiaowei/avue/blob/master/styles/src/element-ui/comment.scss */
|
/* 来自 https://github.com/nmxiaowei/avue/blob/master/styles/src/element-ui/comment.scss */
|
||||||
.avue-comment{
|
.avue-comment {
|
||||||
margin-bottom: 30px;
|
margin-bottom: 30px;
|
||||||
display: flex;
|
display: flex;
|
||||||
align-items: flex-start;
|
align-items: flex-start;
|
||||||
&--reverse{
|
|
||||||
flex-direction:row-reverse;
|
&--reverse {
|
||||||
.avue-comment__main{
|
flex-direction: row-reverse;
|
||||||
&:before,&:after{
|
|
||||||
|
.avue-comment__main {
|
||||||
|
&:before,
|
||||||
|
&:after {
|
||||||
left: auto;
|
left: auto;
|
||||||
right: -8px;
|
right: -8px;
|
||||||
border-width: 8px 0 8px 8px;
|
border-width: 8px 0 8px 8px;
|
||||||
}
|
}
|
||||||
&:before{
|
|
||||||
|
&:before {
|
||||||
border-left-color: #dedede;
|
border-left-color: #dedede;
|
||||||
}
|
}
|
||||||
&:after{
|
|
||||||
|
&:after {
|
||||||
border-left-color: #f8f8f8;
|
border-left-color: #f8f8f8;
|
||||||
margin-right: 1px;
|
margin-right: 1px;
|
||||||
margin-left: auto;
|
margin-left: auto;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
&__avatar{
|
|
||||||
|
&__avatar {
|
||||||
width: 48px;
|
width: 48px;
|
||||||
height: 48px;
|
height: 48px;
|
||||||
border-radius: 50%;
|
border-radius: 50%;
|
||||||
@ -29,7 +35,8 @@
|
|||||||
box-sizing: border-box;
|
box-sizing: border-box;
|
||||||
vertical-align: middle;
|
vertical-align: middle;
|
||||||
}
|
}
|
||||||
&__header{
|
|
||||||
|
&__header {
|
||||||
padding: 5px 15px;
|
padding: 5px 15px;
|
||||||
background: #f8f8f8;
|
background: #f8f8f8;
|
||||||
border-bottom: 1px solid #eee;
|
border-bottom: 1px solid #eee;
|
||||||
@ -37,18 +44,22 @@
|
|||||||
align-items: center;
|
align-items: center;
|
||||||
justify-content: space-between;
|
justify-content: space-between;
|
||||||
}
|
}
|
||||||
&__author{
|
|
||||||
|
&__author {
|
||||||
font-weight: 700;
|
font-weight: 700;
|
||||||
font-size: 14px;
|
font-size: 14px;
|
||||||
color: #999;
|
color: #999;
|
||||||
}
|
}
|
||||||
&__main{
|
|
||||||
flex:1;
|
&__main {
|
||||||
|
flex: 1;
|
||||||
margin: 0 20px;
|
margin: 0 20px;
|
||||||
position: relative;
|
position: relative;
|
||||||
border: 1px solid #dedede;
|
border: 1px solid #dedede;
|
||||||
border-radius: 2px;
|
border-radius: 2px;
|
||||||
&:before,&:after{
|
|
||||||
|
&:before,
|
||||||
|
&:after {
|
||||||
position: absolute;
|
position: absolute;
|
||||||
top: 10px;
|
top: 10px;
|
||||||
left: -8px;
|
left: -8px;
|
||||||
@ -56,32 +67,39 @@
|
|||||||
width: 0;
|
width: 0;
|
||||||
height: 0;
|
height: 0;
|
||||||
display: block;
|
display: block;
|
||||||
content: " ";
|
content: ' ';
|
||||||
border-color: transparent;
|
border-color: transparent;
|
||||||
border-style: solid solid outset;
|
border-style: solid solid outset;
|
||||||
border-width: 8px 8px 8px 0;
|
border-width: 8px 8px 8px 0;
|
||||||
pointer-events: none;
|
pointer-events: none;
|
||||||
}
|
}
|
||||||
|
|
||||||
&:before {
|
&:before {
|
||||||
border-right-color: #dedede;
|
border-right-color: #dedede;
|
||||||
z-index: 1;
|
z-index: 1;
|
||||||
}
|
}
|
||||||
&:after{
|
|
||||||
|
&:after {
|
||||||
border-right-color: #f8f8f8;
|
border-right-color: #f8f8f8;
|
||||||
margin-left: 1px;
|
margin-left: 1px;
|
||||||
z-index: 2;
|
z-index: 2;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
&__body{
|
|
||||||
|
&__body {
|
||||||
padding: 15px;
|
padding: 15px;
|
||||||
overflow: hidden;
|
overflow: hidden;
|
||||||
background: #fff;
|
background: #fff;
|
||||||
font-family: Segoe UI,Lucida Grande,Helvetica,Arial,Microsoft YaHei,FreeSans,Arimo,Droid Sans,wenquanyi micro hei,Hiragino Sans GB,Hiragino Sans GB W3,FontAwesome,sans-serif;color: #333;
|
font-family: Segoe UI, Lucida Grande, Helvetica, Arial, Microsoft YaHei, FreeSans, Arimo,
|
||||||
|
Droid Sans, wenquanyi micro hei, Hiragino Sans GB, Hiragino Sans GB W3, FontAwesome,
|
||||||
|
sans-serif;
|
||||||
|
color: #333;
|
||||||
font-size: 14px;
|
font-size: 14px;
|
||||||
}
|
}
|
||||||
blockquote{
|
|
||||||
margin:0;
|
blockquote {
|
||||||
font-family: Georgia,Times New Roman,Times,Kai,Kaiti SC,KaiTi,BiauKai,FontAwesome,serif;
|
margin: 0;
|
||||||
|
font-family: Georgia, Times New Roman, Times, Kai, Kaiti SC, KaiTi, BiauKai, FontAwesome, serif;
|
||||||
padding: 1px 0 1px 15px;
|
padding: 1px 0 1px 15px;
|
||||||
border-left: 4px solid #ddd;
|
border-left: 4px solid #ddd;
|
||||||
}
|
}
|
||||||
|
@ -56,5 +56,5 @@ defineExpose({
|
|||||||
|
|
||||||
<style lang="scss" scoped>
|
<style lang="scss" scoped>
|
||||||
/* 因为 joolun 实现依赖 avue 组件,该页面使用了 card.scc */
|
/* 因为 joolun 实现依赖 avue 组件,该页面使用了 card.scc */
|
||||||
@import '../wx-msg/card.scss';
|
@import url('../wx-msg/card.scss');
|
||||||
</style>
|
</style>
|
||||||
|
@ -123,7 +123,7 @@ const selectMaterial = (item) => {
|
|||||||
.select-item {
|
.select-item {
|
||||||
width: 280px;
|
width: 280px;
|
||||||
padding: 10px;
|
padding: 10px;
|
||||||
margin: 0 auto 10px auto;
|
margin: 0 auto 10px;
|
||||||
border: 1px solid #eaeaea;
|
border: 1px solid #eaeaea;
|
||||||
|
|
||||||
.material-img {
|
.material-img {
|
||||||
@ -131,11 +131,11 @@ const selectMaterial = (item) => {
|
|||||||
}
|
}
|
||||||
|
|
||||||
.item-name {
|
.item-name {
|
||||||
font-size: 12px;
|
|
||||||
overflow: hidden;
|
overflow: hidden;
|
||||||
|
font-size: 12px;
|
||||||
|
text-align: center;
|
||||||
text-overflow: ellipsis;
|
text-overflow: ellipsis;
|
||||||
white-space: nowrap;
|
white-space: nowrap;
|
||||||
text-align: center;
|
|
||||||
|
|
||||||
.item-infos {
|
.item-infos {
|
||||||
width: 30%;
|
width: 30%;
|
||||||
@ -149,18 +149,18 @@ const selectMaterial = (item) => {
|
|||||||
}
|
}
|
||||||
|
|
||||||
.col-select {
|
.col-select {
|
||||||
border: 1px solid rgb(234, 234, 234);
|
|
||||||
padding: 50px 0px;
|
|
||||||
height: 160px;
|
|
||||||
width: 49.5%;
|
width: 49.5%;
|
||||||
|
height: 160px;
|
||||||
|
padding: 50px 0;
|
||||||
|
border: 1px solid rgb(234 234 234);
|
||||||
}
|
}
|
||||||
|
|
||||||
.col-add {
|
.col-add {
|
||||||
border: 1px solid rgb(234, 234, 234);
|
|
||||||
padding: 50px 0px;
|
|
||||||
height: 160px;
|
|
||||||
width: 49.5%;
|
|
||||||
float: right;
|
float: right;
|
||||||
|
width: 49.5%;
|
||||||
|
height: 160px;
|
||||||
|
padding: 50px 0;
|
||||||
|
border: 1px solid rgb(234 234 234);
|
||||||
|
|
||||||
.el-upload__tip {
|
.el-upload__tip {
|
||||||
line-height: 18px;
|
line-height: 18px;
|
||||||
|
@ -65,7 +65,7 @@ const onDelete = () => {
|
|||||||
.select-item {
|
.select-item {
|
||||||
width: 280px;
|
width: 280px;
|
||||||
padding: 10px;
|
padding: 10px;
|
||||||
margin: 0 auto 10px auto;
|
margin: 0 auto 10px;
|
||||||
border: 1px solid #eaeaea;
|
border: 1px solid #eaeaea;
|
||||||
|
|
||||||
.ope-row {
|
.ope-row {
|
||||||
|
@ -120,15 +120,15 @@ const selectMaterial = (item: Reply) => {
|
|||||||
<style lang="scss" scoped>
|
<style lang="scss" scoped>
|
||||||
.select-item2 {
|
.select-item2 {
|
||||||
padding: 10px;
|
padding: 10px;
|
||||||
margin: 0 auto 10px auto;
|
margin: 0 auto 10px;
|
||||||
border: 1px solid #eaeaea;
|
border: 1px solid #eaeaea;
|
||||||
|
|
||||||
.item-name {
|
.item-name {
|
||||||
font-size: 12px;
|
|
||||||
overflow: hidden;
|
overflow: hidden;
|
||||||
|
font-size: 12px;
|
||||||
|
text-align: center;
|
||||||
text-overflow: ellipsis;
|
text-overflow: ellipsis;
|
||||||
white-space: nowrap;
|
white-space: nowrap;
|
||||||
text-align: center;
|
|
||||||
|
|
||||||
.ope-row {
|
.ope-row {
|
||||||
width: 100%;
|
width: 100%;
|
||||||
@ -138,18 +138,18 @@ const selectMaterial = (item: Reply) => {
|
|||||||
}
|
}
|
||||||
|
|
||||||
.col-select {
|
.col-select {
|
||||||
border: 1px solid rgb(234, 234, 234);
|
|
||||||
padding: 50px 0px;
|
|
||||||
height: 160px;
|
|
||||||
width: 49.5%;
|
width: 49.5%;
|
||||||
|
height: 160px;
|
||||||
|
padding: 50px 0;
|
||||||
|
border: 1px solid rgb(234 234 234);
|
||||||
}
|
}
|
||||||
|
|
||||||
.col-add {
|
.col-add {
|
||||||
border: 1px solid rgb(234, 234, 234);
|
|
||||||
padding: 50px 0px;
|
|
||||||
height: 160px;
|
|
||||||
width: 49.5%;
|
|
||||||
float: right;
|
float: right;
|
||||||
|
width: 49.5%;
|
||||||
|
height: 160px;
|
||||||
|
padding: 50px 0;
|
||||||
|
border: 1px solid rgb(234 234 234);
|
||||||
|
|
||||||
.el-upload__tip {
|
.el-upload__tip {
|
||||||
line-height: 18px;
|
line-height: 18px;
|
||||||
|
@ -128,13 +128,13 @@ defineExpose({
|
|||||||
.select-item {
|
.select-item {
|
||||||
width: 280px;
|
width: 280px;
|
||||||
padding: 10px;
|
padding: 10px;
|
||||||
margin: 0 auto 10px auto;
|
margin: 0 auto 10px;
|
||||||
border: 1px solid #eaeaea;
|
border: 1px solid #eaeaea;
|
||||||
}
|
}
|
||||||
|
|
||||||
.select-item2 {
|
.select-item2 {
|
||||||
padding: 10px;
|
padding: 10px;
|
||||||
margin: 0 auto 10px auto;
|
margin: 0 auto 10px;
|
||||||
border: 1px solid #eaeaea;
|
border: 1px solid #eaeaea;
|
||||||
}
|
}
|
||||||
|
|
||||||
@ -148,11 +148,11 @@ defineExpose({
|
|||||||
}
|
}
|
||||||
|
|
||||||
.item-name {
|
.item-name {
|
||||||
font-size: 12px;
|
|
||||||
overflow: hidden;
|
overflow: hidden;
|
||||||
|
font-size: 12px;
|
||||||
|
text-align: center;
|
||||||
text-overflow: ellipsis;
|
text-overflow: ellipsis;
|
||||||
white-space: nowrap;
|
white-space: nowrap;
|
||||||
text-align: center;
|
|
||||||
}
|
}
|
||||||
|
|
||||||
.el-form-item__content {
|
.el-form-item__content {
|
||||||
@ -160,34 +160,34 @@ defineExpose({
|
|||||||
}
|
}
|
||||||
|
|
||||||
.col-select {
|
.col-select {
|
||||||
border: 1px solid rgb(234, 234, 234);
|
|
||||||
padding: 50px 0px;
|
|
||||||
height: 160px;
|
|
||||||
width: 49.5%;
|
width: 49.5%;
|
||||||
|
height: 160px;
|
||||||
|
padding: 50px 0;
|
||||||
|
border: 1px solid rgb(234 234 234);
|
||||||
}
|
}
|
||||||
|
|
||||||
.col-select2 {
|
.col-select2 {
|
||||||
border: 1px solid rgb(234, 234, 234);
|
|
||||||
padding: 50px 0px;
|
|
||||||
height: 160px;
|
height: 160px;
|
||||||
|
padding: 50px 0;
|
||||||
|
border: 1px solid rgb(234 234 234);
|
||||||
}
|
}
|
||||||
|
|
||||||
.col-add {
|
.col-add {
|
||||||
border: 1px solid rgb(234, 234, 234);
|
|
||||||
padding: 50px 0px;
|
|
||||||
height: 160px;
|
|
||||||
width: 49.5%;
|
|
||||||
float: right;
|
float: right;
|
||||||
|
width: 49.5%;
|
||||||
|
height: 160px;
|
||||||
|
padding: 50px 0;
|
||||||
|
border: 1px solid rgb(234 234 234);
|
||||||
}
|
}
|
||||||
|
|
||||||
.avatar-uploader-icon {
|
.avatar-uploader-icon {
|
||||||
border: 1px solid #d9d9d9;
|
|
||||||
font-size: 28px;
|
|
||||||
color: #8c939d;
|
|
||||||
width: 100px !important;
|
width: 100px !important;
|
||||||
height: 100px !important;
|
height: 100px !important;
|
||||||
|
font-size: 28px;
|
||||||
line-height: 100px !important;
|
line-height: 100px !important;
|
||||||
|
color: #8c939d;
|
||||||
text-align: center;
|
text-align: center;
|
||||||
|
border: 1px solid #d9d9d9;
|
||||||
}
|
}
|
||||||
|
|
||||||
.material-img {
|
.material-img {
|
||||||
|
@ -86,18 +86,18 @@ const amrStop = () => {
|
|||||||
</script>
|
</script>
|
||||||
<style lang="scss" scoped>
|
<style lang="scss" scoped>
|
||||||
.wx-voice-div {
|
.wx-voice-div {
|
||||||
|
display: flex;
|
||||||
|
width: 120px;
|
||||||
|
height: 50px;
|
||||||
padding: 5px;
|
padding: 5px;
|
||||||
background-color: #eaeaea;
|
background-color: #eaeaea;
|
||||||
border-radius: 10px;
|
border-radius: 10px;
|
||||||
width: 120px;
|
|
||||||
height: 50px;
|
|
||||||
|
|
||||||
display: flex;
|
|
||||||
justify-content: center;
|
justify-content: center;
|
||||||
align-items: center;
|
align-items: center;
|
||||||
}
|
}
|
||||||
|
|
||||||
.amr-duration {
|
.amr-duration {
|
||||||
font-size: 11px;
|
|
||||||
margin-left: 5px;
|
margin-left: 5px;
|
||||||
|
font-size: 11px;
|
||||||
}
|
}
|
||||||
</style>
|
</style>
|
||||||
|
@ -102,19 +102,45 @@ const handleDelete = async (item: any) => {
|
|||||||
}
|
}
|
||||||
</script>
|
</script>
|
||||||
<style lang="scss" scoped>
|
<style lang="scss" scoped>
|
||||||
|
@media (min-width: 992px) and (max-width: 1300px) {
|
||||||
|
.waterfall {
|
||||||
|
column-count: 3;
|
||||||
|
}
|
||||||
|
|
||||||
|
p {
|
||||||
|
color: red;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
@media (min-width: 768px) and (max-width: 991px) {
|
||||||
|
.waterfall {
|
||||||
|
column-count: 2;
|
||||||
|
}
|
||||||
|
|
||||||
|
p {
|
||||||
|
color: orange;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
@media (max-width: 767px) {
|
||||||
|
.waterfall {
|
||||||
|
column-count: 1;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
.ope-row {
|
.ope-row {
|
||||||
|
padding-top: 5px;
|
||||||
margin-top: 5px;
|
margin-top: 5px;
|
||||||
text-align: center;
|
text-align: center;
|
||||||
border-top: 1px solid #eaeaea;
|
border-top: 1px solid #eaeaea;
|
||||||
padding-top: 5px;
|
|
||||||
}
|
}
|
||||||
|
|
||||||
.item-name {
|
.item-name {
|
||||||
font-size: 12px;
|
|
||||||
overflow: hidden;
|
overflow: hidden;
|
||||||
|
font-size: 12px;
|
||||||
|
text-align: center;
|
||||||
text-overflow: ellipsis;
|
text-overflow: ellipsis;
|
||||||
white-space: nowrap;
|
white-space: nowrap;
|
||||||
text-align: center;
|
|
||||||
}
|
}
|
||||||
|
|
||||||
.el-upload__tip {
|
.el-upload__tip {
|
||||||
@ -125,8 +151,8 @@ const handleDelete = async (item: any) => {
|
|||||||
.left {
|
.left {
|
||||||
display: inline-block;
|
display: inline-block;
|
||||||
width: 35%;
|
width: 35%;
|
||||||
vertical-align: top;
|
|
||||||
margin-top: 200px;
|
margin-top: 200px;
|
||||||
|
vertical-align: top;
|
||||||
}
|
}
|
||||||
|
|
||||||
.right {
|
.right {
|
||||||
@ -136,16 +162,16 @@ const handleDelete = async (item: any) => {
|
|||||||
}
|
}
|
||||||
|
|
||||||
.avatar-uploader {
|
.avatar-uploader {
|
||||||
width: 20%;
|
|
||||||
display: inline-block;
|
display: inline-block;
|
||||||
|
width: 20%;
|
||||||
}
|
}
|
||||||
|
|
||||||
.avatar-uploader .el-upload {
|
.avatar-uploader .el-upload {
|
||||||
border-radius: 6px;
|
|
||||||
cursor: pointer;
|
|
||||||
position: relative;
|
position: relative;
|
||||||
overflow: hidden;
|
overflow: hidden;
|
||||||
text-align: unset !important;
|
text-align: unset !important;
|
||||||
|
cursor: pointer;
|
||||||
|
border-radius: 6px;
|
||||||
}
|
}
|
||||||
|
|
||||||
.avatar-uploader .el-upload:hover {
|
.avatar-uploader .el-upload:hover {
|
||||||
@ -153,13 +179,13 @@ const handleDelete = async (item: any) => {
|
|||||||
}
|
}
|
||||||
|
|
||||||
.avatar-uploader-icon {
|
.avatar-uploader-icon {
|
||||||
border: 1px solid #d9d9d9;
|
|
||||||
font-size: 28px;
|
|
||||||
color: #8c939d;
|
|
||||||
width: 120px;
|
width: 120px;
|
||||||
height: 120px;
|
height: 120px;
|
||||||
|
font-size: 28px;
|
||||||
line-height: 120px;
|
line-height: 120px;
|
||||||
|
color: #8c939d;
|
||||||
text-align: center;
|
text-align: center;
|
||||||
|
border: 1px solid #d9d9d9;
|
||||||
}
|
}
|
||||||
|
|
||||||
.avatar {
|
.avatar {
|
||||||
@ -173,13 +199,14 @@ const handleDelete = async (item: any) => {
|
|||||||
}
|
}
|
||||||
|
|
||||||
.digest {
|
.digest {
|
||||||
width: 60%;
|
|
||||||
display: inline-block;
|
display: inline-block;
|
||||||
|
width: 60%;
|
||||||
vertical-align: top;
|
vertical-align: top;
|
||||||
}
|
}
|
||||||
|
|
||||||
/*新增图文*/
|
/* 新增图文 */
|
||||||
/*瀑布流样式*/
|
|
||||||
|
/* 瀑布流样式 */
|
||||||
.waterfall {
|
.waterfall {
|
||||||
width: 100%;
|
width: 100%;
|
||||||
column-gap: 10px;
|
column-gap: 10px;
|
||||||
@ -198,68 +225,44 @@ p {
|
|||||||
line-height: 30px;
|
line-height: 30px;
|
||||||
}
|
}
|
||||||
|
|
||||||
@media (min-width: 992px) and (max-width: 1300px) {
|
/* 瀑布流样式 */
|
||||||
.waterfall {
|
|
||||||
column-count: 3;
|
|
||||||
}
|
|
||||||
p {
|
|
||||||
color: red;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
@media (min-width: 768px) and (max-width: 991px) {
|
|
||||||
.waterfall {
|
|
||||||
column-count: 2;
|
|
||||||
}
|
|
||||||
p {
|
|
||||||
color: orange;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
@media (max-width: 767px) {
|
|
||||||
.waterfall {
|
|
||||||
column-count: 1;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
/*瀑布流样式*/
|
|
||||||
.news-main {
|
.news-main {
|
||||||
background-color: #ffffff;
|
|
||||||
width: 100%;
|
width: 100%;
|
||||||
margin: auto;
|
|
||||||
height: 120px;
|
height: 120px;
|
||||||
|
margin: auto;
|
||||||
|
background-color: #fff;
|
||||||
}
|
}
|
||||||
|
|
||||||
.news-content {
|
.news-content {
|
||||||
background-color: #acadae;
|
position: relative;
|
||||||
width: 100%;
|
width: 100%;
|
||||||
height: 120px;
|
height: 120px;
|
||||||
position: relative;
|
background-color: #acadae;
|
||||||
}
|
}
|
||||||
|
|
||||||
.news-content-title {
|
.news-content-title {
|
||||||
display: inline-block;
|
|
||||||
font-size: 15px;
|
|
||||||
color: #ffffff;
|
|
||||||
position: absolute;
|
position: absolute;
|
||||||
left: 0px;
|
bottom: 0;
|
||||||
bottom: 0px;
|
left: 0;
|
||||||
background-color: black;
|
display: inline-block;
|
||||||
width: 98%;
|
width: 98%;
|
||||||
|
height: 25px;
|
||||||
padding: 1%;
|
padding: 1%;
|
||||||
opacity: 0.65;
|
|
||||||
overflow: hidden;
|
overflow: hidden;
|
||||||
|
font-size: 15px;
|
||||||
|
color: #fff;
|
||||||
text-overflow: ellipsis;
|
text-overflow: ellipsis;
|
||||||
white-space: nowrap;
|
white-space: nowrap;
|
||||||
height: 25px;
|
background-color: black;
|
||||||
|
opacity: 0.65;
|
||||||
}
|
}
|
||||||
|
|
||||||
.news-main-item {
|
.news-main-item {
|
||||||
background-color: #ffffff;
|
|
||||||
padding: 5px 0px;
|
|
||||||
border-top: 1px solid #eaeaea;
|
|
||||||
width: 100%;
|
width: 100%;
|
||||||
|
padding: 5px 0;
|
||||||
margin: auto;
|
margin: auto;
|
||||||
|
background-color: #fff;
|
||||||
|
border-top: 1px solid #eaeaea;
|
||||||
}
|
}
|
||||||
|
|
||||||
.news-content-item {
|
.news-content-item {
|
||||||
@ -269,8 +272,8 @@ p {
|
|||||||
|
|
||||||
.news-content-item-title {
|
.news-content-item-title {
|
||||||
display: inline-block;
|
display: inline-block;
|
||||||
font-size: 12px;
|
|
||||||
width: 70%;
|
width: 70%;
|
||||||
|
font-size: 12px;
|
||||||
}
|
}
|
||||||
|
|
||||||
.news-content-item-img {
|
.news-content-item-img {
|
||||||
@ -289,9 +292,9 @@ p {
|
|||||||
|
|
||||||
.news-main-plus {
|
.news-main-plus {
|
||||||
width: 280px;
|
width: 280px;
|
||||||
text-align: center;
|
|
||||||
margin: auto;
|
|
||||||
height: 50px;
|
height: 50px;
|
||||||
|
margin: auto;
|
||||||
|
text-align: center;
|
||||||
}
|
}
|
||||||
|
|
||||||
.icon-plus {
|
.icon-plus {
|
||||||
@ -302,15 +305,15 @@ p {
|
|||||||
.select-item {
|
.select-item {
|
||||||
width: 60%;
|
width: 60%;
|
||||||
padding: 10px;
|
padding: 10px;
|
||||||
margin: 0 auto 10px auto;
|
margin: 0 auto 10px;
|
||||||
border: 1px solid #eaeaea;
|
border: 1px solid #eaeaea;
|
||||||
}
|
}
|
||||||
|
|
||||||
.father .child {
|
.father .child {
|
||||||
display: none;
|
|
||||||
text-align: center;
|
|
||||||
position: relative;
|
position: relative;
|
||||||
bottom: 25px;
|
bottom: 25px;
|
||||||
|
display: none;
|
||||||
|
text-align: center;
|
||||||
}
|
}
|
||||||
|
|
||||||
.father:hover .child {
|
.father:hover .child {
|
||||||
|
@ -31,30 +31,6 @@ const emit = defineEmits<{
|
|||||||
</script>
|
</script>
|
||||||
|
|
||||||
<style lang="scss" scoped>
|
<style lang="scss" scoped>
|
||||||
/*瀑布流样式*/
|
|
||||||
.waterfall {
|
|
||||||
width: 100%;
|
|
||||||
column-gap: 10px;
|
|
||||||
column-count: 5;
|
|
||||||
margin-top: 10px;
|
|
||||||
/* 芋道源码:增加 10px,避免顶着上面 */
|
|
||||||
}
|
|
||||||
|
|
||||||
.waterfall-item {
|
|
||||||
padding: 10px;
|
|
||||||
margin-bottom: 10px;
|
|
||||||
break-inside: avoid;
|
|
||||||
border: 1px solid #eaeaea;
|
|
||||||
}
|
|
||||||
|
|
||||||
.material-img {
|
|
||||||
width: 100%;
|
|
||||||
}
|
|
||||||
|
|
||||||
p {
|
|
||||||
line-height: 30px;
|
|
||||||
}
|
|
||||||
|
|
||||||
@media (min-width: 992px) and (max-width: 1300px) {
|
@media (min-width: 992px) and (max-width: 1300px) {
|
||||||
.waterfall {
|
.waterfall {
|
||||||
column-count: 3;
|
column-count: 3;
|
||||||
@ -80,4 +56,28 @@ p {
|
|||||||
column-count: 1;
|
column-count: 1;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
.waterfall {
|
||||||
|
width: 100%;
|
||||||
|
column-gap: 10px;
|
||||||
|
column-count: 5;
|
||||||
|
margin-top: 10px;
|
||||||
|
|
||||||
|
/* 芋道源码:增加 10px,避免顶着上面 */
|
||||||
|
}
|
||||||
|
|
||||||
|
.waterfall-item {
|
||||||
|
padding: 10px;
|
||||||
|
margin-bottom: 10px;
|
||||||
|
break-inside: avoid;
|
||||||
|
border: 1px solid #eaeaea;
|
||||||
|
}
|
||||||
|
|
||||||
|
.material-img {
|
||||||
|
width: 100%;
|
||||||
|
}
|
||||||
|
|
||||||
|
p {
|
||||||
|
line-height: 30px;
|
||||||
|
}
|
||||||
</style>
|
</style>
|
||||||
|
@ -367,7 +367,6 @@ div {
|
|||||||
margin-left: 20px;
|
margin-left: 20px;
|
||||||
background-color: #e8e7e7;
|
background-color: #e8e7e7;
|
||||||
box-sizing: border-box;
|
box-sizing: border-box;
|
||||||
box-sizing: border-box;
|
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
</style>
|
</style>
|
||||||
|
Loading…
Reference in New Issue
Block a user