10 changed files with 695 additions and 53 deletions
@ -0,0 +1,81 @@ |
|||||
|
import request from '@/utils/request' |
||||
|
const contentIntro = '/back/contentIntro' |
||||
|
const content = '/content' |
||||
|
|
||||
|
/** |
||||
|
* 查询列表详情列表 |
||||
|
* @param params |
||||
|
* @returns {Promise<T | never>} |
||||
|
* @constructor |
||||
|
*/ |
||||
|
export function POST_QUERY_DETAIL(params) { |
||||
|
return request({ |
||||
|
url: `${contentIntro}/list`, |
||||
|
method: 'post', |
||||
|
data:params |
||||
|
}).then(res => { |
||||
|
return res.data |
||||
|
}) |
||||
|
} |
||||
|
|
||||
|
/** |
||||
|
* 单个列表详情 |
||||
|
* @param params |
||||
|
* @returns {Promise<T | never>} |
||||
|
* @constructor |
||||
|
*/ |
||||
|
export function QUERY_DETAIL(params) { |
||||
|
return request({ |
||||
|
url: `${content}/detail`, |
||||
|
method: 'get', |
||||
|
params |
||||
|
}).then(res => res.data) |
||||
|
} |
||||
|
|
||||
|
/** |
||||
|
* 删除列表详情 |
||||
|
* @param params |
||||
|
* @returns {Promise<T | never>} |
||||
|
* @constructor |
||||
|
*/ |
||||
|
export function DELETE_DETAIL(params) { |
||||
|
return request({ |
||||
|
url: `${contentIntro}/delete`, |
||||
|
method: 'post', |
||||
|
data:params |
||||
|
}).then(res => { |
||||
|
return res.data |
||||
|
}) |
||||
|
} |
||||
|
|
||||
|
/** |
||||
|
* 添加列表详情 |
||||
|
* @param params |
||||
|
* @returns {Promise<T | never>} |
||||
|
* @constructor |
||||
|
*/ |
||||
|
export function ADD_DETAIL(params) { |
||||
|
return request({ |
||||
|
url: `${contentIntro}/add`, |
||||
|
method: 'post', |
||||
|
data:params |
||||
|
}).then(res => { |
||||
|
return res.data |
||||
|
}) |
||||
|
} |
||||
|
|
||||
|
/** |
||||
|
* 修改列表详情 |
||||
|
* @param params |
||||
|
* @returns {Promise<T | never>} |
||||
|
* @constructor |
||||
|
*/ |
||||
|
export function UPDATE_DETAIL(params) { |
||||
|
return request({ |
||||
|
url: `${contentIntro}/update`, |
||||
|
method: 'post', |
||||
|
data:params |
||||
|
}).then(res => { |
||||
|
return res.data |
||||
|
}) |
||||
|
} |
||||
@ -0,0 +1,30 @@ |
|||||
|
<template> |
||||
|
<el-descriptions title="垂直带边框列表" direction="vertical" :column="3" border> |
||||
|
<el-descriptions-item label="发表时间">{{ $moment(list.publishTime).format('YYYY-MM-DD HH:mm') }}</el-descriptions-item> |
||||
|
<el-descriptions-item label="创建时间">{{ $moment(list.createdAt).format('YYYY-MM-DD HH:mm') }}</el-descriptions-item> |
||||
|
<el-descriptions-item label="修改时间" :span="2">{{ $moment(list.updatedAt).format('YYYY-MM-DD HH:mm') }}</el-descriptions-item> |
||||
|
<el-descriptions-item label="标题显示类型"> |
||||
|
<el-tag size="small">{{ list.showType == 0 ? '文本' : list.showType == 1 ? '图片' : list.showType == 2 ? '视频' : '' }}</el-tag> |
||||
|
</el-descriptions-item> |
||||
|
<el-descriptions-item label="跳转路径">{{ list.jumpUrl }}</el-descriptions-item> |
||||
|
<el-descriptions-item label="正文"> |
||||
|
<div v-if="detailContent && detailContent.content" v-html="detailContent.content"></div> |
||||
|
<div v-else>暂无</div> |
||||
|
</el-descriptions-item> |
||||
|
</el-descriptions> |
||||
|
</template> |
||||
|
|
||||
|
<script> |
||||
|
export default { |
||||
|
name: "detailsOfDistribution", |
||||
|
components: { |
||||
|
// Editor, |
||||
|
}, |
||||
|
props: ['list', 'detailContent'], |
||||
|
data() { |
||||
|
return { |
||||
|
|
||||
|
} |
||||
|
}, |
||||
|
} |
||||
|
</script> |
||||
@ -0,0 +1,514 @@ |
|||||
|
// padding |
||||
|
.pa-0 { |
||||
|
padding: 0px; |
||||
|
} |
||||
|
|
||||
|
.pa-1 { |
||||
|
padding: 4px; |
||||
|
} |
||||
|
|
||||
|
.pa-2 { |
||||
|
padding: 8px; |
||||
|
} |
||||
|
|
||||
|
.pa-3 { |
||||
|
padding: 12px; |
||||
|
} |
||||
|
|
||||
|
.pa-4 { |
||||
|
padding: 16px; |
||||
|
} |
||||
|
|
||||
|
.pa-5 { |
||||
|
padding: 20px; |
||||
|
} |
||||
|
|
||||
|
.pt-3 { |
||||
|
padding-top: 12px; |
||||
|
} |
||||
|
|
||||
|
.pt-5 { |
||||
|
padding-top: 20px; |
||||
|
} |
||||
|
|
||||
|
.pb-3 { |
||||
|
padding-bottom: 12px; |
||||
|
} |
||||
|
|
||||
|
.pb-4 { |
||||
|
padding-bottom: 16px; |
||||
|
} |
||||
|
|
||||
|
.pb-5 { |
||||
|
padding-bottom: 20px; |
||||
|
} |
||||
|
|
||||
|
.pb-10 { |
||||
|
padding-bottom: 40px; |
||||
|
} |
||||
|
|
||||
|
.px-1{ |
||||
|
padding-left: 4px; |
||||
|
padding-right: 4px; |
||||
|
} |
||||
|
|
||||
|
.px-2{ |
||||
|
padding-left: 8px; |
||||
|
padding-right: 8px; |
||||
|
} |
||||
|
|
||||
|
.px-3{ |
||||
|
padding-left: 12px; |
||||
|
padding-right: 12px; |
||||
|
} |
||||
|
|
||||
|
.px-4{ |
||||
|
padding-left: 16px; |
||||
|
padding-right: 16px; |
||||
|
} |
||||
|
|
||||
|
.px-5{ |
||||
|
padding-left: 20px; |
||||
|
padding-right: 20px; |
||||
|
} |
||||
|
|
||||
|
.px-6{ |
||||
|
padding-left: 24px; |
||||
|
padding-right: 24px; |
||||
|
} |
||||
|
|
||||
|
.px-10{ |
||||
|
padding-left: 40px; |
||||
|
padding-right: 40px; |
||||
|
} |
||||
|
|
||||
|
.py-1{ |
||||
|
padding-top: 4px; |
||||
|
padding-bottom: 4px; |
||||
|
} |
||||
|
|
||||
|
.py-2{ |
||||
|
padding-top: 8px; |
||||
|
padding-bottom: 8px; |
||||
|
} |
||||
|
|
||||
|
.py-3{ |
||||
|
padding-top: 12px; |
||||
|
padding-bottom: 12px; |
||||
|
} |
||||
|
|
||||
|
.py-4{ |
||||
|
padding-top: 16px; |
||||
|
padding-bottom: 16px; |
||||
|
} |
||||
|
|
||||
|
.py-5{ |
||||
|
padding-top: 20px; |
||||
|
padding-bottom: 20px; |
||||
|
} |
||||
|
|
||||
|
.py-10{ |
||||
|
padding-top: 40px; |
||||
|
padding-bottom: 40px; |
||||
|
} |
||||
|
|
||||
|
.py-12{ |
||||
|
padding-top: 60px; |
||||
|
padding-bottom: 60px; |
||||
|
} |
||||
|
|
||||
|
// margin |
||||
|
.ma-2 { |
||||
|
margin: 8px; |
||||
|
} |
||||
|
|
||||
|
.ma-3 { |
||||
|
margin: 12px; |
||||
|
} |
||||
|
|
||||
|
.mx-0{ |
||||
|
margin-left: 0!important; |
||||
|
margin-right: 0!important; |
||||
|
} |
||||
|
|
||||
|
.mx-1{ |
||||
|
margin-left: 4px; |
||||
|
margin-right: 4px; |
||||
|
} |
||||
|
|
||||
|
.mx-2{ |
||||
|
margin-left: 8px; |
||||
|
margin-right: 8px; |
||||
|
} |
||||
|
|
||||
|
|
||||
|
.my-0{ |
||||
|
margin-top: 0!important; |
||||
|
margin-bottom: 0!important; |
||||
|
} |
||||
|
|
||||
|
.my-1{ |
||||
|
margin-top: 4px!important; |
||||
|
margin-bottom: 4px!important; |
||||
|
} |
||||
|
|
||||
|
.my-2{ |
||||
|
margin-top: 8px; |
||||
|
margin-bottom: 8px; |
||||
|
} |
||||
|
|
||||
|
.my-3{ |
||||
|
margin-top: 12px; |
||||
|
margin-bottom: 12px; |
||||
|
} |
||||
|
|
||||
|
.my-4{ |
||||
|
margin-top: 16px; |
||||
|
margin-bottom: 16px; |
||||
|
} |
||||
|
|
||||
|
.my-5{ |
||||
|
margin-top: 20px; |
||||
|
margin-bottom: 20px; |
||||
|
} |
||||
|
|
||||
|
.mt-1{ |
||||
|
margin-top: 4px; |
||||
|
} |
||||
|
|
||||
|
.mt-2{ |
||||
|
margin-top: 8px; |
||||
|
} |
||||
|
|
||||
|
.mt-3{ |
||||
|
margin-top: 12px; |
||||
|
} |
||||
|
|
||||
|
.mt-4{ |
||||
|
margin-top: 16px; |
||||
|
} |
||||
|
|
||||
|
.mt-5{ |
||||
|
margin-top: 20px; |
||||
|
} |
||||
|
|
||||
|
.mt-8{ |
||||
|
margin-top: 32px; |
||||
|
} |
||||
|
|
||||
|
.mb-1{ |
||||
|
margin-bottom: 4px; |
||||
|
} |
||||
|
|
||||
|
.mb-2{ |
||||
|
margin-bottom: 8px; |
||||
|
} |
||||
|
|
||||
|
.mb-3{ |
||||
|
margin-bottom: 12px; |
||||
|
} |
||||
|
|
||||
|
.mb-4{ |
||||
|
margin-bottom: 16px; |
||||
|
} |
||||
|
|
||||
|
.mb-5{ |
||||
|
margin-bottom: 20px; |
||||
|
} |
||||
|
|
||||
|
.mb-6{ |
||||
|
margin-bottom: 24px; |
||||
|
} |
||||
|
|
||||
|
.mb-7{ |
||||
|
margin-bottom: 28px; |
||||
|
} |
||||
|
|
||||
|
.mb-8{ |
||||
|
margin-bottom: 32px; |
||||
|
} |
||||
|
|
||||
|
.mb-9{ |
||||
|
margin-bottom: 36px; |
||||
|
} |
||||
|
|
||||
|
.mb-10{ |
||||
|
margin-bottom: 40px; |
||||
|
} |
||||
|
|
||||
|
.ml-2{ |
||||
|
margin-left: 8px; |
||||
|
} |
||||
|
|
||||
|
.ml-3{ |
||||
|
margin-left: 12px; |
||||
|
} |
||||
|
|
||||
|
.ml-4{ |
||||
|
margin-left: 16px; |
||||
|
} |
||||
|
|
||||
|
.ml-5{ |
||||
|
margin-left: 20px; |
||||
|
} |
||||
|
|
||||
|
.ml-6{ |
||||
|
margin-left: 24px; |
||||
|
} |
||||
|
|
||||
|
.ml-7{ |
||||
|
margin-left: 28px; |
||||
|
} |
||||
|
|
||||
|
.ml-8{ |
||||
|
margin-left: 32px; |
||||
|
} |
||||
|
|
||||
|
.mr-1{ |
||||
|
margin-right: 4px; |
||||
|
} |
||||
|
|
||||
|
.mr-2{ |
||||
|
margin-right: 8px; |
||||
|
} |
||||
|
|
||||
|
.mr-3{ |
||||
|
margin-right: 12px; |
||||
|
} |
||||
|
|
||||
|
.mr-4{ |
||||
|
margin-right: 16px; |
||||
|
} |
||||
|
|
||||
|
.mr-5{ |
||||
|
margin-right: 20px; |
||||
|
} |
||||
|
|
||||
|
.mr-6{ |
||||
|
margin-right: 24px; |
||||
|
} |
||||
|
|
||||
|
.mr-7{ |
||||
|
margin-right: 28px; |
||||
|
} |
||||
|
|
||||
|
.mr-8{ |
||||
|
margin-right: 32px; |
||||
|
} |
||||
|
|
||||
|
// background |
||||
|
.white { |
||||
|
background: white; |
||||
|
} |
||||
|
|
||||
|
// flex |
||||
|
.flex{ |
||||
|
display: flex; |
||||
|
} |
||||
|
|
||||
|
.flex-wrap{ |
||||
|
flex-wrap: wrap; |
||||
|
} |
||||
|
|
||||
|
.flex-nowrap{ |
||||
|
flex-wrap: nowrap; |
||||
|
} |
||||
|
|
||||
|
.flex-column{ |
||||
|
flex-direction: column; |
||||
|
} |
||||
|
|
||||
|
.flex-column-reverse{ |
||||
|
flex-direction: column-reverse; |
||||
|
} |
||||
|
|
||||
|
.flex-row{ |
||||
|
flex-direction: row; |
||||
|
} |
||||
|
|
||||
|
.flex-row-reverse{ |
||||
|
flex-direction: row-reverse; |
||||
|
} |
||||
|
|
||||
|
.justify-center{ |
||||
|
justify-content: center; |
||||
|
} |
||||
|
|
||||
|
.justify-space-between{ |
||||
|
justify-content: space-between; |
||||
|
} |
||||
|
|
||||
|
.align-center{ |
||||
|
align-items: center |
||||
|
} |
||||
|
|
||||
|
.align-start{ |
||||
|
align-items: flex-start |
||||
|
} |
||||
|
|
||||
|
.align-end{ |
||||
|
align-items: flex-end |
||||
|
} |
||||
|
|
||||
|
.flex-1{ |
||||
|
display: flex; |
||||
|
flex: 1; |
||||
|
} |
||||
|
|
||||
|
.flex-3{ |
||||
|
display: flex; |
||||
|
flex: 3; |
||||
|
} |
||||
|
|
||||
|
// other |
||||
|
.inner { |
||||
|
width: 82%; |
||||
|
margin: 0 auto; |
||||
|
} |
||||
|
|
||||
|
.pointer{ |
||||
|
cursor:pointer; |
||||
|
} |
||||
|
|
||||
|
.w-height{ |
||||
|
height:100%; |
||||
|
} |
||||
|
|
||||
|
.w-width{ |
||||
|
width:100%; |
||||
|
} |
||||
|
|
||||
|
img{ |
||||
|
max-width: 100% |
||||
|
} |
||||
|
// font |
||||
|
.font-big{ |
||||
|
font-size: 60px; |
||||
|
} |
||||
|
|
||||
|
.font-small{ |
||||
|
font-size: 30px; |
||||
|
line-height: 40px; |
||||
|
} |
||||
|
|
||||
|
.font-bold{ |
||||
|
font-weight: bold; |
||||
|
} |
||||
|
|
||||
|
.text-indent-2{ |
||||
|
text-indent: 2em |
||||
|
} |
||||
|
|
||||
|
.font-bold-32{ |
||||
|
font-size: 32px; |
||||
|
font-weight: bold; |
||||
|
} |
||||
|
|
||||
|
.font-32{ |
||||
|
font-size: 32px; |
||||
|
} |
||||
|
|
||||
|
.font-bold-24{ |
||||
|
font-size: 24px; |
||||
|
font-weight: bold; |
||||
|
} |
||||
|
|
||||
|
.font-24{ |
||||
|
font-size: 24px; |
||||
|
} |
||||
|
|
||||
|
.font-20{ |
||||
|
font-size: 20px; |
||||
|
} |
||||
|
|
||||
|
.font-bold-20{ |
||||
|
font-size: 20px; |
||||
|
font-weight: bold; |
||||
|
} |
||||
|
|
||||
|
.font-bold-18{ |
||||
|
font-size: 18px; |
||||
|
font-weight: bold; |
||||
|
} |
||||
|
|
||||
|
.font-18{ |
||||
|
font-size: 18px; |
||||
|
} |
||||
|
|
||||
|
.font-bold-16{ |
||||
|
font-size: 16px; |
||||
|
font-weight: bold; |
||||
|
} |
||||
|
|
||||
|
.font-16{ |
||||
|
font-size: 16px; |
||||
|
} |
||||
|
|
||||
|
.font-bold-14{ |
||||
|
font-size: 14px; |
||||
|
font-weight: bold; |
||||
|
} |
||||
|
|
||||
|
.font-14{ |
||||
|
font-size: 14px; |
||||
|
} |
||||
|
|
||||
|
.font-12{ |
||||
|
font-size: 12px; |
||||
|
} |
||||
|
|
||||
|
.icon-size{ |
||||
|
font-size: 20px; |
||||
|
} |
||||
|
|
||||
|
h2{ |
||||
|
font-size: 24px; |
||||
|
font-weight: bold; |
||||
|
color: rgba(0,0,0,.85) |
||||
|
} |
||||
|
|
||||
|
.baseColor{ |
||||
|
color: #13ACC4 |
||||
|
} |
||||
|
|
||||
|
.bg{ |
||||
|
background: #F5F5F5 |
||||
|
} |
||||
|
|
||||
|
.base-bg{ |
||||
|
background: #13ACC4 |
||||
|
} |
||||
|
|
||||
|
.second-base-bg{ |
||||
|
background: #AACD06 |
||||
|
} |
||||
|
|
||||
|
// 文字颜色 |
||||
|
.white--text{ |
||||
|
color: #fff |
||||
|
} |
||||
|
|
||||
|
.grey--text{ |
||||
|
color: #616161 |
||||
|
} |
||||
|
|
||||
|
.title-color{ |
||||
|
color: rgba(0,0,0,.85) |
||||
|
} |
||||
|
|
||||
|
.textColor{ |
||||
|
color: rgba(0,0,0,.65) |
||||
|
} |
||||
|
|
||||
|
.secondary{ |
||||
|
color: rgba(0,0,0,.45) |
||||
|
} |
||||
|
|
||||
|
// line-height |
||||
|
.line-height-30{ |
||||
|
line-height: 30px |
||||
|
} |
||||
|
|
||||
|
.line-height-36{ |
||||
|
line-height: 36px |
||||
|
} |
||||
Loading…
Reference in new issue