提交 99064593 authored 作者: matian's avatar matian

style:样式优化

上级 94f8b721
......@@ -80,6 +80,7 @@ const bytesToSize = (bytes: number) => {
position: relative;
display: flex;
align-items: center;
margin-top: -20px;
&:hover {
.tool-pop-btn {
opacity: 1;
......@@ -118,7 +119,7 @@ const bytesToSize = (bytes: number) => {
text-overflow: ellipsis;
}
.tool-pop-btn {
transition: all 0.5s;
transition: all 0.1s;
position: absolute;
top: 0;
left: 0;
......@@ -126,7 +127,7 @@ const bytesToSize = (bytes: number) => {
height: 100%;
background: rgba(0, 0, 0, 0.6);
opacity: 0;
padding-top: 52px;
padding-top: 72px;
box-sizing: border-box;
.edit-btn {
width: 113px;
......@@ -201,6 +202,7 @@ const bytesToSize = (bytes: number) => {
font-size: 16px;
line-height: 100%;
color: #999999;
word-break: keep-all;
}
}
}
......
......@@ -20,7 +20,7 @@ const copyCourse = () => {
<div class="card-item">
<div class="card-item-top">
<div class="title">{{ props.data.name }}</div>
<div class="cover-img" :style="`background-image:url(${props.data.cover}) `"></div>
<div class="cover-img" :style="`background-image:url(${props.data.cover})`"></div>
<div class="tool-pop-btn">
<div style="min-width: 100%">
<router-link v-if="props.data.auth_edit" :to="`/course/update-course?id=${props.data.id}`">
......@@ -63,10 +63,6 @@ const copyCourse = () => {
&:hover {
.tool-pop-btn {
opacity: 1;
display: flex;
justify-content: center;
align-items: center;
flex-direction: column;
}
}
.cover-img {
......@@ -98,8 +94,12 @@ const copyCourse = () => {
height: 100%;
background: rgba(0, 0, 0, 0.6);
opacity: 0;
padding-top: 22px;
// padding-top: 22px;
box-sizing: border-box;
display: flex;
justify-content: center;
align-items: center;
flex-direction: column;
.edit-btn {
width: 113px;
line-height: 32px;
......@@ -182,6 +182,7 @@ const copyCourse = () => {
.tag {
font-size: 16px;
line-height: 100%;
word-break: keep-all;
color: #999999;
}
}
......
......@@ -53,6 +53,16 @@ const fileType = ['doc', 'docx', 'xls', 'xlsx', 'pdf', 'ppt', 'pptx', 'mp3', 'mp
<div class="value active">{{ props.data?.status_name }}</div>
</div>
</div>
<div class="i-items">
<img
src="https://webapp-pub.oss-cn-beijing.aliyuncs.com/center_resource/video-view-icon3.png"
class="icons"
/>
<div class="text-box">
<div class="name">创建时间</div>
<div class="value">{{ props.data?.created_time }}</div>
</div>
</div>
</div>
<div class="flex-box">
<div class="i-items">
......@@ -67,7 +77,7 @@ const fileType = ['doc', 'docx', 'xls', 'xlsx', 'pdf', 'ppt', 'pptx', 'mp3', 'mp
</div>
<div class="i-items">
<img
src="https://webapp-pub.oss-cn-beijing.aliyuncs.com/center_resource/video-view-icon6.png"
src="https://webapp-pub.oss-cn-beijing.aliyuncs.com/center_resource/course-view-icon13.png"
class="icons"
/>
<div class="text-box">
......@@ -85,18 +95,6 @@ const fileType = ['doc', 'docx', 'xls', 'xlsx', 'pdf', 'ppt', 'pptx', 'mp3', 'mp
<div class="value">{{ props.data?.knowledge_points || '暂无' }}</div>
</div>
</div>
</div>
<div class="flex-box">
<div class="i-items">
<img
src="https://webapp-pub.oss-cn-beijing.aliyuncs.com/center_resource/video-view-icon3.png"
class="icons"
/>
<div class="text-box">
<div class="name">创建时间</div>
<div class="value">{{ props.data?.created_time }}</div>
</div>
</div>
<div class="i-items">
<img
src="https://webapp-pub.oss-cn-beijing.aliyuncs.com/center_resource/video-view-icon4.png"
......@@ -107,7 +105,6 @@ const fileType = ['doc', 'docx', 'xls', 'xlsx', 'pdf', 'ppt', 'pptx', 'mp3', 'mp
<div class="value">{{ props.data?.updated_time }}</div>
</div>
</div>
<div class="i-items"></div>
</div>
</div>
</div>
......@@ -134,21 +131,25 @@ const fileType = ['doc', 'docx', 'xls', 'xlsx', 'pdf', 'ppt', 'pptx', 'mp3', 'mp
}
}
.info-items {
// display: flex;
// flex-wrap: wrap;
padding: 12px 0;
display: flex;
flex-direction: column;
flex: 1;
padding-left: 12px;
.flex-box {
display: flex;
justify-content: flex-start;
justify-content: space-around;
}
.i-items:not(:last-child) {
border-right: 1px dashed rgb(191, 191, 191);
}
.i-items {
width: 30%;
width: 25%;
display: flex;
align-items: center;
height: fit-content;
margin-right: 80px;
margin-bottom: 30px;
padding-left: 5%;
.textarea-box {
padding: 18px 18px 51px;
background: #ffffff;
......@@ -166,10 +167,10 @@ const fileType = ['doc', 'docx', 'xls', 'xlsx', 'pdf', 'ppt', 'pptx', 'mp3', 'mp
color: #999999;
}
.value {
font-size: 16px;
font-weight: bold;
font-size: 14px;
line-height: 100%;
color: #333333;
color: #333;
font-family: Source Han Sans CN;
margin-top: 8px;
&.active {
color: #1ab226;
......
......@@ -54,6 +54,16 @@ const fileType = ['doc', 'docx', 'xls', 'xlsx', 'pdf', 'ppt', 'pptx', 'mp3', 'mp
<div class="value active">{{ props.data?.status_name }}</div>
</div>
</div>
<div class="i-items">
<img
src="https://webapp-pub.oss-cn-beijing.aliyuncs.com/center_resource/video-view-icon3.png"
class="icons"
/>
<div class="text-box">
<div class="name">创建时间</div>
<div class="value">{{ props.data?.created_time }}</div>
</div>
</div>
</div>
<div class="flex-box">
<div class="i-items">
......@@ -68,7 +78,7 @@ const fileType = ['doc', 'docx', 'xls', 'xlsx', 'pdf', 'ppt', 'pptx', 'mp3', 'mp
</div>
<div class="i-items">
<img
src="https://webapp-pub.oss-cn-beijing.aliyuncs.com/center_resource/video-view-icon6.png"
src="https://webapp-pub.oss-cn-beijing.aliyuncs.com/center_resource/course-view-icon13.png"
class="icons"
/>
<div class="text-box">
......@@ -86,26 +96,16 @@ const fileType = ['doc', 'docx', 'xls', 'xlsx', 'pdf', 'ppt', 'pptx', 'mp3', 'mp
<div class="value">{{ props.data?.knowledge_points || '暂无' }}</div>
</div>
</div>
</div>
<div class="flex-box">
<div class="i-items">
<img
src="https://webapp-pub.oss-cn-beijing.aliyuncs.com/center_resource/video-view-icon3.png"
src="https://webapp-pub.oss-cn-beijing.aliyuncs.com/center_resource/video-view-icon4.png"
class="icons"
/>
<div class="text-box">
<div class="name">创建时间</div>
<div class="value">{{ props.data?.created_time }}</div>
</div>
</div>
<div class="i-items">
<img src="https://webapp-pub.oss-cn-beijing.aliyuncs.com/center_resource/video-view-icon4.png" class="icons" />
<div class="text-box">
<div class="name">更新时间</div>
<div class="value">{{ props.data?.updated_time }}</div>
</div>
</div>
<div class="i-items"></div>
</div>
</div>
</div>
......@@ -132,21 +132,25 @@ const fileType = ['doc', 'docx', 'xls', 'xlsx', 'pdf', 'ppt', 'pptx', 'mp3', 'mp
}
}
.info-items {
// display: flex;
// flex-wrap: wrap;
padding-left: 12px;
padding: 12px 0;
display: flex;
flex-direction: column;
flex: 1;
.flex-box {
display: flex;
justify-content: flex-start;
justify-content: space-around;
}
.i-items:not(:last-child) {
border-right: 1px dashed rgb(191, 191, 191);
}
.i-items {
width: 30%;
width: 25%;
display: flex;
align-items: center;
height: fit-content;
margin-right: 80px;
margin-bottom: 30px;
padding-left: 5%;
.textarea-box {
padding: 18px 18px 51px;
background: #ffffff;
......@@ -164,10 +168,10 @@ const fileType = ['doc', 'docx', 'xls', 'xlsx', 'pdf', 'ppt', 'pptx', 'mp3', 'mp
color: #999999;
}
.value {
font-size: 16px;
font-weight: bold;
font-size: 14px;
line-height: 100%;
color: #333333;
color: #333;
font-family: Source Han Sans CN;
margin-top: 8px;
&.active {
color: #1ab226;
......
......@@ -54,6 +54,16 @@ const fileType = ['doc', 'docx', 'xls', 'xlsx', 'pdf', 'ppt', 'pptx', 'mp3', 'mp
<div class="value active">{{ props.data?.status_name }}</div>
</div>
</div>
<div class="i-items">
<img
src="https://webapp-pub.oss-cn-beijing.aliyuncs.com/center_resource/video-view-icon3.png"
class="icons"
/>
<div class="text-box">
<div class="name">创建时间</div>
<div class="value">{{ props.data?.created_time }}</div>
</div>
</div>
</div>
<div class="flex-box">
<div class="i-items">
......@@ -68,7 +78,7 @@ const fileType = ['doc', 'docx', 'xls', 'xlsx', 'pdf', 'ppt', 'pptx', 'mp3', 'mp
</div>
<div class="i-items">
<img
src="https://webapp-pub.oss-cn-beijing.aliyuncs.com/center_resource/video-view-icon6.png"
src="https://webapp-pub.oss-cn-beijing.aliyuncs.com/center_resource/course-view-icon13.png"
class="icons"
/>
<div class="text-box">
......@@ -86,18 +96,6 @@ const fileType = ['doc', 'docx', 'xls', 'xlsx', 'pdf', 'ppt', 'pptx', 'mp3', 'mp
<div class="value">{{ props.data?.knowledge_points || '暂无' }}</div>
</div>
</div>
</div>
<div class="flex-box">
<div class="i-items">
<img
src="https://webapp-pub.oss-cn-beijing.aliyuncs.com/center_resource/video-view-icon3.png"
class="icons"
/>
<div class="text-box">
<div class="name">创建时间</div>
<div class="value">{{ props.data?.created_time }}</div>
</div>
</div>
<div class="i-items">
<img
src="https://webapp-pub.oss-cn-beijing.aliyuncs.com/center_resource/video-view-icon4.png"
......@@ -108,7 +106,6 @@ const fileType = ['doc', 'docx', 'xls', 'xlsx', 'pdf', 'ppt', 'pptx', 'mp3', 'mp
<div class="value">{{ props.data?.updated_time }}</div>
</div>
</div>
<div class="i-items"></div>
</div>
</div>
</div>
......@@ -135,21 +132,25 @@ const fileType = ['doc', 'docx', 'xls', 'xlsx', 'pdf', 'ppt', 'pptx', 'mp3', 'mp
}
}
.info-items {
// display: flex;
// flex-wrap: wrap;
padding-left: 12px;
padding: 12px 0;
display: flex;
flex-direction: column;
flex: 1;
.flex-box {
display: flex;
justify-content: flex-start;
// justify-content: space-around;
}
.i-items:not(:last-child) {
border-right: 1px dashed rgb(191, 191, 191);
}
.i-items {
width: 30%;
width: 25%;
display: flex;
align-items: center;
height: fit-content;
margin-right: 80px;
margin-bottom: 30px;
padding-left: 5%;
.textarea-box {
padding: 18px 18px 51px;
background: #ffffff;
......@@ -167,10 +168,10 @@ const fileType = ['doc', 'docx', 'xls', 'xlsx', 'pdf', 'ppt', 'pptx', 'mp3', 'mp
color: #999999;
}
.value {
font-size: 16px;
font-weight: bold;
font-size: 14px;
line-height: 100%;
color: #333333;
color: #333;
font-family: Source Han Sans CN;
margin-top: 8px;
&.active {
color: #1ab226;
......
......@@ -32,18 +32,22 @@ const props: any = defineProps<{ data: object; tabIndex: string }>()
</div>
<div class="item-b">
<div class="time">{{ props.data.updated_time }}</div>
<div class="tag" v-if="tabIndex === '2'">{{ props.data.department_public === '0' ? '未共享' : '已共享' }}</div>
<div class="tag" v-if="tabIndex === '3'">{{ props.data.platform_public === '0' ? '未共享' : '已共享' }}</div>
<div class="tag1" v-if="tabIndex === '2'">
{{ props.data.department_public === '0' ? '未共享' : '已共享' }}
</div>
<div class="tag1" v-if="tabIndex === '3'">
{{ props.data.platform_public === '0' ? '未共享' : '已共享' }}
</div>
</div>
</div>
</div>
</template>
<style lang="scss" scoped>
.card-item {
width: 17%;
width: 18%;
border-radius: 6px;
overflow: hidden;
margin-right: 20px;
margin-right: 10px;
margin-bottom: 20px;
.card-item-top {
height: 170px;
......@@ -152,10 +156,11 @@ const props: any = defineProps<{ data: object; tabIndex: string }>()
line-height: 100%;
color: #999999;
}
.tag {
.tag1 {
font-size: 16px;
line-height: 100%;
color: #999999;
word-break: keep-all;
}
}
}
......
......@@ -49,6 +49,16 @@ const props = defineProps(['data'])
<div :class="props.data.status == '1' ? 'value active' : 'value'">{{ props.data.status_name }}</div>
</div>
</div>
<div class="i-items">
<img
src="https://webapp-pub.oss-cn-beijing.aliyuncs.com/center_resource/video-view-icon3.png"
class="icons"
/>
<div class="text-box">
<div class="name">创建时间</div>
<div class="value">{{ props.data.created_time }}</div>
</div>
</div>
</div>
<div class="flex-box">
<div class="i-items">
......@@ -63,7 +73,7 @@ const props = defineProps(['data'])
</div>
<div class="i-items">
<img
src="https://webapp-pub.oss-cn-beijing.aliyuncs.com/center_resource/video-view-icon6.png"
src="https://webapp-pub.oss-cn-beijing.aliyuncs.com/center_resource/course-view-icon13.png"
class="icons"
/>
<div class="text-box">
......@@ -81,18 +91,6 @@ const props = defineProps(['data'])
<div class="value">{{ props.data?.knowledge_points || '暂无' }}</div>
</div>
</div>
</div>
<div class="flex-box">
<div class="i-items">
<img
src="https://webapp-pub.oss-cn-beijing.aliyuncs.com/center_resource/video-view-icon3.png"
class="icons"
/>
<div class="text-box">
<div class="name">创建时间</div>
<div class="value">{{ props.data.created_time }}</div>
</div>
</div>
<div class="i-items">
<img
src="https://webapp-pub.oss-cn-beijing.aliyuncs.com/center_resource/video-view-icon4.png"
......@@ -103,7 +101,6 @@ const props = defineProps(['data'])
<div class="value">{{ props.data.updated_time }}</div>
</div>
</div>
<div class="i-items"></div>
</div>
</div>
</div>
......@@ -130,21 +127,25 @@ const props = defineProps(['data'])
}
}
.info-items {
// display: flex;
// flex-wrap: wrap;
padding-left: 12px;
display: flex;
flex-direction: column;
flex: 1;
padding: 12px 0;
.flex-box {
display: flex;
justify-content: flex-start;
justify-content: space-around;
}
.i-items:not(:last-child) {
border-right: 1px dashed rgb(191, 191, 191);
}
.i-items {
width: 30%;
width: 25%;
display: flex;
align-items: center;
height: fit-content;
margin-right: 80px;
margin-bottom: 30px;
padding-left: 5%;
.textarea-box {
padding: 18px 18px 51px;
background: #ffffff;
......@@ -160,13 +161,13 @@ const props = defineProps(['data'])
.name {
font-size: 14px;
line-height: 100%;
color: #999999;
color: #999;
}
.value {
font-size: 16px;
font-weight: bold;
font-size: 14px;
line-height: 100%;
color: #333333;
color: #333;
font-family: Source Han Sans CN;
margin-top: 8px;
&.active {
color: #1ab226;
......
......@@ -177,9 +177,9 @@ const changeCard = () => {
<style lang="scss" scoped>
.card-list {
background: #fafafa;
padding: 20px;
display: flex;
flex-wrap: wrap;
padding: 20px 0;
}
.video-head {
position: relative;
......
Markdown 格式
0%
您添加了 0 到此讨论。请谨慎行事。
请先完成此评论的编辑!
注册 或者 后发表评论