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