|
|
|
|
@ -1,221 +1,232 @@
|
|
|
|
|
<template>
|
|
|
|
|
<div v-show="visible">
|
|
|
|
|
<div class="flex">
|
|
|
|
|
<div class="card-list">
|
|
|
|
|
<div class="text-center margin-bottom">图文列表</div>
|
|
|
|
|
<div class="card-item" :class="{'selected':selectedIndex==index}" v-for="(item,index) in articles" :key="index" @click="selectedIndex=index">
|
|
|
|
|
<div class="text-cut-name">{{item.title}}</div>
|
|
|
|
|
</div>
|
|
|
|
|
<div v-show="articles.length<8 && !mediaId" class="card-add el-icon-plus" @click="addArticle()"></div>
|
|
|
|
|
</div>
|
|
|
|
|
<el-form size="mini" v-if="articles.length" :model="articles[selectedIndex]" :rules="dataRule" ref="dataForm" label-width="100px">
|
|
|
|
|
<el-form-item label="标题" prop="title">
|
|
|
|
|
<el-input v-model="articles[selectedIndex].title" placeholder="标题"></el-input>
|
|
|
|
|
</el-form-item>
|
|
|
|
|
<el-form-item label="封面图" prop="thumbMediaId">
|
|
|
|
|
<el-input v-model="articles[selectedIndex].thumbMediaId" placeholder="封面图media_id">
|
|
|
|
|
<div slot="append" @click="assetsSelectorVisible=true">从素材库中选择</div>
|
|
|
|
|
</el-input>
|
|
|
|
|
</el-form-item>
|
|
|
|
|
<el-form-item label="摘要" prop="digest">
|
|
|
|
|
<el-input v-model="articles[selectedIndex].digest" placeholder="摘要"></el-input>
|
|
|
|
|
</el-form-item>
|
|
|
|
|
<el-form-item label="原文地址" prop="contentSourceUrl">
|
|
|
|
|
<el-input v-model="articles[selectedIndex].contentSourceUrl" placeholder="阅读原文链接"></el-input>
|
|
|
|
|
</el-form-item>
|
|
|
|
|
<el-row>
|
|
|
|
|
<el-col :span="9">
|
|
|
|
|
<el-form-item label="作者" prop="author">
|
|
|
|
|
<el-input v-model="articles[selectedIndex].author" placeholder="作者"></el-input>
|
|
|
|
|
</el-form-item>
|
|
|
|
|
</el-col>
|
|
|
|
|
<el-col :span="5">
|
|
|
|
|
<el-form-item label="显示封面" prop="showCoverPic">
|
|
|
|
|
<el-switch v-model="articles[selectedIndex].showCoverPic"></el-switch>
|
|
|
|
|
</el-form-item>
|
|
|
|
|
</el-col>
|
|
|
|
|
<el-col :span="5">
|
|
|
|
|
<el-form-item label="允许评论" prop="needOpenComment">
|
|
|
|
|
<el-switch v-model="articles[selectedIndex].needOpenComment"></el-switch>
|
|
|
|
|
</el-form-item>
|
|
|
|
|
</el-col>
|
|
|
|
|
<el-col :span="5">
|
|
|
|
|
<el-form-item label="仅粉丝可评论" prop="onlyFansCanComment">
|
|
|
|
|
<el-switch v-model="articles[selectedIndex].onlyFansCanComment"></el-switch>
|
|
|
|
|
</el-form-item>
|
|
|
|
|
</el-col>
|
|
|
|
|
</el-row>
|
|
|
|
|
<el-form-item label="内容" prop="content">
|
|
|
|
|
<tinymce-editor ref="editor" v-model="articles[selectedIndex].content"> </tinymce-editor>
|
|
|
|
|
</el-form-item>
|
|
|
|
|
</el-form>
|
|
|
|
|
</div>
|
|
|
|
|
<div class="dialog-footer">
|
|
|
|
|
<el-button @click="$emit('hide')">取消</el-button>
|
|
|
|
|
<el-button type="primary" @click="dataFormSubmit()" :disabled="uploading">{{this.mediaId?'修改此篇':'全部提交（共'+articles.length+'篇）'}}</el-button>
|
|
|
|
|
</div>
|
|
|
|
|
<assets-selector v-if="assetsSelectorVisible" :visible="assetsSelectorVisible" selectType="image" @selected="onAssetsSelect"></assets-selector>
|
|
|
|
|
</div>
|
|
|
|
|
</template>
|
|
|
|
|
<template>
|
|
|
|
|
<div v-show="visible"> <!-- 控制弹窗的显示与隐藏 -->
|
|
|
|
|
<div class="flex">
|
|
|
|
|
<div class="card-list">
|
|
|
|
|
<div class="text-center margin-bottom">图文列表</div>
|
|
|
|
|
<!-- 遍历所有文章，生成列表项 -->
|
|
|
|
|
<div class="card-item" :class="{'selected':selectedIndex==index}" v-for="(item,index) in articles" :key="index" @click="selectedIndex=index">
|
|
|
|
|
<div class="text-cut-name">{{item.title}}</div>
|
|
|
|
|
</div>
|
|
|
|
|
<!-- 如果文章少于8篇且没有媒体ID，显示新增文章的按钮 -->
|
|
|
|
|
<div v-show="articles.length<8 && !mediaId" class="card-add el-icon-plus" @click="addArticle()"></div>
|
|
|
|
|
</div>
|
|
|
|
|
<!-- 文章表单，绑定到选中的文章 -->
|
|
|
|
|
<el-form size="mini" v-if="articles.length" :model="articles[selectedIndex]" :rules="dataRule" ref="dataForm" label-width="100px">
|
|
|
|
|
<el-form-item label="标题" prop="title">
|
|
|
|
|
<el-input v-model="articles[selectedIndex].title" placeholder="标题"></el-input>
|
|
|
|
|
</el-form-item>
|
|
|
|
|
<el-form-item label="封面图" prop="thumbMediaId">
|
|
|
|
|
<el-input v-model="articles[selectedIndex].thumbMediaId" placeholder="封面图media_id">
|
|
|
|
|
<div slot="append" @click="assetsSelectorVisible=true">从素材库中选择</div> <!-- 选择封面图的按钮 -->
|
|
|
|
|
</el-input>
|
|
|
|
|
</el-form-item>
|
|
|
|
|
<el-form-item label="摘要" prop="digest">
|
|
|
|
|
<el-input v-model="articles[selectedIndex].digest" placeholder="摘要"></el-input>
|
|
|
|
|
</el-form-item>
|
|
|
|
|
<el-form-item label="原文地址" prop="contentSourceUrl">
|
|
|
|
|
<el-input v-model="articles[selectedIndex].contentSourceUrl" placeholder="阅读原文链接"></el-input>
|
|
|
|
|
</el-form-item>
|
|
|
|
|
<el-row>
|
|
|
|
|
<el-col :span="9">
|
|
|
|
|
<el-form-item label="作者" prop="author">
|
|
|
|
|
<el-input v-model="articles[selectedIndex].author" placeholder="作者"></el-input>
|
|
|
|
|
</el-form-item>
|
|
|
|
|
</el-col>
|
|
|
|
|
<el-col :span="5">
|
|
|
|
|
<el-form-item label="显示封面" prop="showCoverPic">
|
|
|
|
|
<el-switch v-model="articles[selectedIndex].showCoverPic"></el-switch>
|
|
|
|
|
</el-form-item>
|
|
|
|
|
</el-col>
|
|
|
|
|
<el-col :span="5">
|
|
|
|
|
<el-form-item label="允许评论" prop="needOpenComment">
|
|
|
|
|
<el-switch v-model="articles[selectedIndex].needOpenComment"></el-switch>
|
|
|
|
|
</el-form-item>
|
|
|
|
|
</el-col>
|
|
|
|
|
<el-col :span="5">
|
|
|
|
|
<el-form-item label="仅粉丝可评论" prop="onlyFansCanComment">
|
|
|
|
|
<el-switch v-model="articles[selectedIndex].onlyFansCanComment"></el-switch>
|
|
|
|
|
</el-form-item>
|
|
|
|
|
</el-col>
|
|
|
|
|
</el-row>
|
|
|
|
|
<el-form-item label="内容" prop="content">
|
|
|
|
|
<tinymce-editor ref="editor" v-model="articles[selectedIndex].content"> </tinymce-editor> <!-- 富文本编辑器 -->
|
|
|
|
|
</el-form-item>
|
|
|
|
|
</el-form>
|
|
|
|
|
</div>
|
|
|
|
|
<div class="dialog-footer">
|
|
|
|
|
<el-button @click="$emit('hide')">取消</el-button> <!-- 取消按钮 -->
|
|
|
|
|
<el-button type="primary" @click="dataFormSubmit()" :disabled="uploading">{{this.mediaId?'修改此篇':'全部提交（共'+articles.length+'篇）'}}</el-button>
|
|
|
|
|
<!-- 提交按钮，根据是否有mediaId来决定按钮显示内容 -->
|
|
|
|
|
</div>
|
|
|
|
|
<assets-selector v-if="assetsSelectorVisible" :visible="assetsSelectorVisible" selectType="image" @selected="onAssetsSelect"></assets-selector> <!-- 选择素材框 -->
|
|
|
|
|
</div>
|
|
|
|
|
</template>
|
|
|
|
|
|
|
|
|
|
<script>
|
|
|
|
|
const articleTemplate={
|
|
|
|
|
templateId: 0,
|
|
|
|
|
title: '',
|
|
|
|
|
content: '',
|
|
|
|
|
author: '',
|
|
|
|
|
showCoverPic: true,
|
|
|
|
|
contentSourceUrl: '',
|
|
|
|
|
digest: '',
|
|
|
|
|
thumbMediaId: '',
|
|
|
|
|
needOpenComment: false,
|
|
|
|
|
onlyFansCanComment: false
|
|
|
|
|
}
|
|
|
|
|
export default {
|
|
|
|
|
components: {
|
|
|
|
|
TinymceEditor: () => import('@/components/tinymce-editor'),
|
|
|
|
|
AssetsSelector:()=>import('./assets-selector')
|
|
|
|
|
},
|
|
|
|
|
props:{
|
|
|
|
|
visible:{
|
|
|
|
|
type:Boolean,
|
|
|
|
|
default:false
|
|
|
|
|
}
|
|
|
|
|
},
|
|
|
|
|
data() {
|
|
|
|
|
return {
|
|
|
|
|
assetsSelectorVisible:false,
|
|
|
|
|
mediaId:'',
|
|
|
|
|
selectedIndex:0,
|
|
|
|
|
articles:[],
|
|
|
|
|
uploading:false,
|
|
|
|
|
dataRule: {
|
|
|
|
|
title: [
|
|
|
|
|
{ required: true, message: '标题不能为空', trigger: 'blur' }
|
|
|
|
|
],
|
|
|
|
|
content: [
|
|
|
|
|
{ required: true, message: '内容不能为空', trigger: 'blur' }
|
|
|
|
|
],
|
|
|
|
|
thumbMediaId: [
|
|
|
|
|
{ required: true, message: '封面图media_id不能为空', trigger: 'blur' }
|
|
|
|
|
],
|
|
|
|
|
contentSourceUrl: [
|
|
|
|
|
{ required: true, message: '原文地址不得为空', trigger: 'blur' }
|
|
|
|
|
]
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
},
|
|
|
|
|
methods: {
|
|
|
|
|
init(news){
|
|
|
|
|
if(news && news.mediaId){
|
|
|
|
|
this.mediaId=news.mediaId
|
|
|
|
|
this.articles = news.content.articles
|
|
|
|
|
}else{
|
|
|
|
|
this.mediaId=''
|
|
|
|
|
this.articles=[{...articleTemplate}]
|
|
|
|
|
}
|
|
|
|
|
},
|
|
|
|
|
// 表单提交
|
|
|
|
|
dataFormSubmit() {
|
|
|
|
|
if(this.uploading)return
|
|
|
|
|
this.$refs['dataForm'].validate((valid) => {
|
|
|
|
|
if (valid) {
|
|
|
|
|
if(this.mediaId){// 编辑，只能一次修改一篇
|
|
|
|
|
this.materialArticleUpdate();
|
|
|
|
|
}else{ // 新增，全部文章一起保存
|
|
|
|
|
this.materialNewsUpload();
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
})
|
|
|
|
|
},
|
|
|
|
|
materialNewsUpload(){
|
|
|
|
|
this.uploading=true
|
|
|
|
|
this.$http({
|
|
|
|
|
url: this.$http.adornUrl(`/manage/wxAssets/materialNewsUpload`),
|
|
|
|
|
method: 'post',
|
|
|
|
|
data: this.$http.adornData(this.articles,false)
|
|
|
|
|
}).then(({ data }) => {
|
|
|
|
|
if (data && data.code === 200) {
|
|
|
|
|
this.$message({
|
|
|
|
|
message: "操作成功",
|
|
|
|
|
type: "success",
|
|
|
|
|
duration: 1500,
|
|
|
|
|
onClose: () => {
|
|
|
|
|
this.$emit("refreshDataList");
|
|
|
|
|
this.emit('hide')
|
|
|
|
|
}
|
|
|
|
|
});
|
|
|
|
|
} else {
|
|
|
|
|
this.$message.error(data.msg)
|
|
|
|
|
}
|
|
|
|
|
this.uploading=false
|
|
|
|
|
})
|
|
|
|
|
},
|
|
|
|
|
materialArticleUpdate(){
|
|
|
|
|
this.uploading=true
|
|
|
|
|
this.$http({
|
|
|
|
|
url: this.$http.adornUrl(`/manage/wxAssets/materialArticleUpdate`),
|
|
|
|
|
method: 'post',
|
|
|
|
|
data: this.$http.adornData({
|
|
|
|
|
'mediaId':this.mediaId,
|
|
|
|
|
'index':this.selectedIndex,
|
|
|
|
|
'articles':this.articles[this.selectedIndex]
|
|
|
|
|
})
|
|
|
|
|
}).then(({ data }) => {
|
|
|
|
|
if (data && data.code === 200) {
|
|
|
|
|
this.$message.success('操作成功')
|
|
|
|
|
} else {
|
|
|
|
|
this.$message.error(data.msg)
|
|
|
|
|
}
|
|
|
|
|
this.uploading=false
|
|
|
|
|
})
|
|
|
|
|
},
|
|
|
|
|
addArticle(){
|
|
|
|
|
this.articles.push({...articleTemplate})
|
|
|
|
|
this.selectedIndex=this.articles.length-1
|
|
|
|
|
},
|
|
|
|
|
onAssetsSelect(assetsInfo){
|
|
|
|
|
Vue.set(this.articles[this.selectedIndex], 'thumbMediaId', assetsInfo.mediaId)
|
|
|
|
|
this.assetsSelectorVisible=false
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
</script>
|
|
|
|
|
<style scoped>
|
|
|
|
|
.card-list{
|
|
|
|
|
width: 300px;
|
|
|
|
|
padding-right: 10px;
|
|
|
|
|
border-right: 1px solid #eeeeee;
|
|
|
|
|
}
|
|
|
|
|
.card-item{
|
|
|
|
|
margin-top: 2px;
|
|
|
|
|
padding: 20px 5px;
|
|
|
|
|
border: 1px solid #ddd;
|
|
|
|
|
font-size: 12px;
|
|
|
|
|
line-height: 15px;
|
|
|
|
|
}
|
|
|
|
|
.card-item.selected{
|
|
|
|
|
border: 2px solid #409EFF;
|
|
|
|
|
}
|
|
|
|
|
.text-cut-name{
|
|
|
|
|
display: -webkit-box;
|
|
|
|
|
word-wrap:break-word;
|
|
|
|
|
word-break:break-all;
|
|
|
|
|
-webkit-box-orient: vertical;
|
|
|
|
|
-webkit-line-clamp: 2;
|
|
|
|
|
overflow: hidden;
|
|
|
|
|
}
|
|
|
|
|
.card-add{
|
|
|
|
|
margin-top: 2px;
|
|
|
|
|
display: block;
|
|
|
|
|
border: 1px dotted #ddd;
|
|
|
|
|
color: #ddd;
|
|
|
|
|
text-align: center;
|
|
|
|
|
font-size: 30px;
|
|
|
|
|
line-height: 50px;
|
|
|
|
|
}
|
|
|
|
|
.dialog-footer {
|
|
|
|
|
margin-top: 20px;
|
|
|
|
|
text-align: right;
|
|
|
|
|
}
|
|
|
|
|
<script>
|
|
|
|
|
const articleTemplate = { // 文章模板
|
|
|
|
|
templateId: 0,
|
|
|
|
|
title: '',
|
|
|
|
|
content: '',
|
|
|
|
|
author: '',
|
|
|
|
|
showCoverPic: true,
|
|
|
|
|
contentSourceUrl: '',
|
|
|
|
|
digest: '',
|
|
|
|
|
thumbMediaId: '',
|
|
|
|
|
needOpenComment: false,
|
|
|
|
|
onlyFansCanComment: false
|
|
|
|
|
}
|
|
|
|
|
export default {
|
|
|
|
|
components: {
|
|
|
|
|
TinymceEditor: () => import('@/components/tinymce-editor'), // 异步引入富文本编辑器组件
|
|
|
|
|
AssetsSelector: () => import('./assets-selector') // 异步引入素材选择器组件
|
|
|
|
|
},
|
|
|
|
|
props: {
|
|
|
|
|
visible: { // 控制组件可见性的属性
|
|
|
|
|
type: Boolean,
|
|
|
|
|
default: false
|
|
|
|
|
}
|
|
|
|
|
},
|
|
|
|
|
data() {
|
|
|
|
|
return {
|
|
|
|
|
assetsSelectorVisible: false, // 控制素材选择器的可见性
|
|
|
|
|
mediaId: '', // 用于存储文章的媒体ID
|
|
|
|
|
selectedIndex: 0, // 当前选中文章的索引
|
|
|
|
|
articles: [], // 存储文章列表
|
|
|
|
|
uploading: false, // 上传状态
|
|
|
|
|
dataRule: { // 表单的验证规则
|
|
|
|
|
title: [
|
|
|
|
|
{ required: true, message: '标题不能为空', trigger: 'blur' }
|
|
|
|
|
],
|
|
|
|
|
content: [
|
|
|
|
|
{ required: true, message: '内容不能为空', trigger: 'blur' }
|
|
|
|
|
],
|
|
|
|
|
thumbMediaId: [
|
|
|
|
|
{ required: true, message: '封面图media_id不能为空', trigger: 'blur' }
|
|
|
|
|
],
|
|
|
|
|
contentSourceUrl: [
|
|
|
|
|
{ required: true, message: '原文地址不得为空', trigger: 'blur' }
|
|
|
|
|
]
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
},
|
|
|
|
|
methods: {
|
|
|
|
|
init(news) { // 初始化方法，用于加载新闻数据
|
|
|
|
|
if (news && news.mediaId) {
|
|
|
|
|
this.mediaId = news.mediaId; // 如果有mediaId，设置mediaId
|
|
|
|
|
this.articles = news.content.articles; // 加载新闻的文章内容
|
|
|
|
|
} else {
|
|
|
|
|
this.mediaId = ''; // 如果没有，从新初始化
|
|
|
|
|
this.articles = [{ ...articleTemplate }]; // 新增一篇文章，使用模板
|
|
|
|
|
}
|
|
|
|
|
},
|
|
|
|
|
// 表单提交
|
|
|
|
|
dataFormSubmit() {
|
|
|
|
|
if (this.uploading) return; // 如果正在上传，返回
|
|
|
|
|
this.$refs['dataForm'].validate((valid) => { // 验证表单
|
|
|
|
|
if (valid) {
|
|
|
|
|
if (this.mediaId) { // 如果已有mediaId，执行文章更新
|
|
|
|
|
this.materialArticleUpdate();
|
|
|
|
|
} else { // 否则执行文章新增
|
|
|
|
|
this.materialNewsUpload();
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
});
|
|
|
|
|
},
|
|
|
|
|
// 上传新闻内容
|
|
|
|
|
materialNewsUpload() {
|
|
|
|
|
this.uploading = true; // 设置上传状态为true
|
|
|
|
|
this.$http({
|
|
|
|
|
url: this.$http.adornUrl(`/manage/wxAssets/materialNewsUpload`), // 请求URL
|
|
|
|
|
method: 'post', // 请求方法
|
|
|
|
|
data: this.$http.adornData(this.articles, false) // 请求数据
|
|
|
|
|
}).then(({ data }) => {
|
|
|
|
|
// 处理成功响应
|
|
|
|
|
if (data && data.code === 200) {
|
|
|
|
|
this.$message({
|
|
|
|
|
message: "操作成功", // 成功提示
|
|
|
|
|
type: "success",
|
|
|
|
|
duration: 1500,
|
|
|
|
|
onClose: () => {
|
|
|
|
|
this.$emit("refreshDataList"); // 发射刷新数据的事件
|
|
|
|
|
this.$emit('hide'); // 关闭弹窗
|
|
|
|
|
}
|
|
|
|
|
});
|
|
|
|
|
} else {
|
|
|
|
|
this.$message.error(data.msg); // 显示错误消息
|
|
|
|
|
}
|
|
|
|
|
this.uploading = false; // 重置上传状态
|
|
|
|
|
});
|
|
|
|
|
},
|
|
|
|
|
// 更新文章内容
|
|
|
|
|
materialArticleUpdate() {
|
|
|
|
|
this.uploading = true; // 设置上传状态为true
|
|
|
|
|
this.$http({
|
|
|
|
|
url: this.$http.adornUrl(`/manage/wxAssets/materialArticleUpdate`), // 请求URL
|
|
|
|
|
method: 'post', // 请求方法
|
|
|
|
|
data: this.$http.adornData({
|
|
|
|
|
'mediaId': this.mediaId, // 传递的mediaId
|
|
|
|
|
'index': this.selectedIndex, // 传递的文章索引
|
|
|
|
|
'articles': this.articles[this.selectedIndex] // 传递的文章数据
|
|
|
|
|
})
|
|
|
|
|
}).then(({ data }) => {
|
|
|
|
|
// 处理成功响应
|
|
|
|
|
if (data && data.code === 200) {
|
|
|
|
|
this.$message.success('操作成功'); // 成功提示
|
|
|
|
|
} else {
|
|
|
|
|
this.$message.error(data.msg); // 显示错误消息
|
|
|
|
|
}
|
|
|
|
|
this.uploading = false; // 重置上传状态
|
|
|
|
|
});
|
|
|
|
|
},
|
|
|
|
|
// 添加新文章
|
|
|
|
|
addArticle() {
|
|
|
|
|
this.articles.push({ ...articleTemplate }); // 将新的文章模板推入文章列表
|
|
|
|
|
this.selectedIndex = this.articles.length - 1; // 更新当前选中索引为新增文章
|
|
|
|
|
},
|
|
|
|
|
// 处理素材选择
|
|
|
|
|
onAssetsSelect(assetsInfo) {
|
|
|
|
|
Vue.set(this.articles[this.selectedIndex], 'thumbMediaId', assetsInfo.mediaId); // 设置选择的封面图的mediaId
|
|
|
|
|
this.assetsSelectorVisible = false; // 关闭素材选择器
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
</script>
|
|
|
|
|
|
|
|
|
|
<style scoped>
|
|
|
|
|
.card-list {
|
|
|
|
|
width: 300px; /* 卡片列表的宽度 */
|
|
|
|
|
padding-right: 10px; /* 右侧内边距 */
|
|
|
|
|
border-right: 1px solid #eeeeee; /* 右侧边框 */
|
|
|
|
|
}
|
|
|
|
|
.card-item {
|
|
|
|
|
margin-top: 2px; /* 上外边距 */
|
|
|
|
|
padding: 20px 5px; /* 内边距 */
|
|
|
|
|
border: 1px solid #ddd; /* 边框 */
|
|
|
|
|
font-size: 12px; /* 字体大小 */
|
|
|
|
|
line-height: 15px; /* 行高 */
|
|
|
|
|
}
|
|
|
|
|
.card-item.selected {
|
|
|
|
|
border: 2px solid #409EFF; /* 选中时的边框颜色 */
|
|
|
|
|
}
|
|
|
|
|
.text-cut-name {
|
|
|
|
|
display: -webkit-box; /* 使用盒子模型 */
|
|
|
|
|
word-wrap: break-word; /* 自动换行 */
|
|
|
|
|
word-break: break-all; /* 强制断行 */
|
|
|
|
|
-webkit-box-orient: vertical; /* 垂直方向的盒子模型 */
|
|
|
|
|
-webkit-line-clamp: 2; /* 限制显示的行数 */
|
|
|
|
|
overflow: hidden; /* 溢出隐藏 */
|
|
|
|
|
}
|
|
|
|
|
.card-add {
|
|
|
|
|
margin-top: 2px; /* 上外边距 */
|
|
|
|
|
display: block; /* 块级元素 */
|
|
|
|
|
border: 1px dotted #ddd; /* 虚线边框 */
|
|
|
|
|
color: #ddd; /* 文字颜色 */
|
|
|
|
|
text-align: center; /* 居中对齐 */
|
|
|
|
|
font-size: 30px; /* 文字大小 */
|
|
|
|
|
line-height: 50px; /* 行高 */
|
|
|
|
|
}
|
|
|
|
|
.dialog-footer {
|
|
|
|
|
margin-top: 20px; /* 上外边距 */
|
|
|
|
|
text-align: right; /* 右对齐 */
|
|
|
|
|
}
|
|
|
|
|
</style>
|
