mirror of
https://codeup.aliyun.com/67762337eccfc218f6110e0e/vue/learning-system-portal.git
synced 2025-12-06 17:36:42 +08:00
修改
This commit is contained in:
lmj
BIN
public/images/daochubg.png
Normal file
BIN
public/images/daochubg.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 30 KiB |
@@ -1,37 +1,285 @@
|
||||
<template>
|
||||
<div>
|
||||
<div style="padding: 38px 42px;">
|
||||
<div class="note-hear">
|
||||
<h3>我的笔记</h3>
|
||||
<div>
|
||||
<el-button>导入</el-button>
|
||||
<el-button>导出</el-button>
|
||||
<el-button @click="dialogVisible = true">导出</el-button>
|
||||
</div>
|
||||
</div>
|
||||
<div class="note-sift">
|
||||
<el-button>默认按钮</el-button>
|
||||
<el-button>默认按钮</el-button>
|
||||
<el-button>默认按钮</el-button>
|
||||
<el-button>默认按钮</el-button>
|
||||
|
||||
<el-date-picker
|
||||
class="el-buttons"
|
||||
v-model="value1"
|
||||
type="daterange"
|
||||
>
|
||||
</el-date-picker>
|
||||
<!-- <i class="el-icon-arrow-down"></i> -->
|
||||
<el-button class="el-buttons">全部课程 <i class="el-icon-arrow-down"></i></el-button>
|
||||
<el-button class="el-buttons">发布时间 <i class="el-icon-arrow-down"></i></el-button>
|
||||
<el-button class="el-buttons">点赞次数 <i class="el-icon-arrow-down"></i></el-button>
|
||||
</div>
|
||||
<div class="note-tab">
|
||||
<div class="tabcontent">
|
||||
<span :class=" num == 1 ? 'tab-textactive':''" >全部</span>
|
||||
<span :class=" num == 2 ? 'tab-textactive':''" >线上笔记</span>
|
||||
<span :class=" num == 3 ? 'tab-textactive':''" >导入笔记</span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="note-all" v-if="num == 1">
|
||||
<div class="note-all-info">
|
||||
<div class="all-title">
|
||||
<h3> 《高效能人士的7个习惯》</h3>
|
||||
<div><img src="../../../public/images/coteplay.png" alt="">8:40</div>
|
||||
<span>私密</span>
|
||||
<h6>2022/05/21 16:28</h6>
|
||||
</div>
|
||||
<div class="all-content">
|
||||
我见过的策划们，不管是甲方企业的，还是广告代理都经常犯三大错误：找一个营销理论，做策略时直接向上套。不管是什么行业、企业处在什么发展阶段，都要照着这个理论的要求，做策略时直接向上套。不管是什么行业、企业处在什么来实。不管是么行业、企业处在什什么行业、企业处在发展发发发施营销传播，写PPT时 也要照着这个理论的框架来写。施营销传播，写PPT时 也要照着这个理论的框架来写施营销传播，写PPT时 也要照论。
|
||||
</div>
|
||||
<div class="all-footer">
|
||||
<div>
|
||||
<div class="textbut-box">
|
||||
<interactBar nodeWidth="60px" :readonly="true" :type="4" :data="qa" @addAnswers="qaAnswer(qa)" :shares="true" :comments="false" :answers="true" :clickAnswer="true" :views="false"></interactBar>
|
||||
<el-button style=" margin-right: 10px;" class="textbut" type="text"> <i class="el-icon-delete"></i> 删除</el-button><el-button class="textbut" type="text"> <i class="el-icon-edit"></i> 编辑</el-button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="note-all-info">
|
||||
<div class="all-title">
|
||||
<h3> 《高效能人士的7个习惯》</h3>
|
||||
<!-- <div><img src="../../../public/images/coteplay.png" alt="">8:40</div>
|
||||
<span>私密</span> -->
|
||||
<div class="daoru">导入</div>
|
||||
<h6>2022/05/21 16:28</h6>
|
||||
</div>
|
||||
<div class="all-content">
|
||||
我见过的策划们，不管是甲方企业的，还是广告代理都经常犯三大错误：找一个营销理论，做策略时直接向上套。不管是什么行业、企业处在什么发展阶段，都要照着这个理论的要求，做策略时直接向上套。不管是什么行业、企业处在什么来实。不管是么行业、企业处在什什么行业、企业处在发展发发发施营销传播，写PPT时 也要照着这个理论的框架来写。施营销传播，写PPT时 也要照着这个理论的框架来写施营销传播，写PPT时 也要照论。
|
||||
</div>
|
||||
<div class="all-footer">
|
||||
<div>
|
||||
<div class="textbut-box">
|
||||
<!-- <interactBar nodeWidth="60px" :readonly="true" :type="4" :data="qa" @addAnswers="qaAnswer(qa)" :shares="true" :comments="false" :answers="true" :clickAnswer="true" :views="false"></interactBar> -->
|
||||
<el-button style=" margin-right: 10px;" class="textbut" type="text"> <i class="el-icon-delete"></i> 删除</el-button><el-button class="textbut" type="text"> <i class="el-icon-edit"></i> 编辑</el-button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="note-all-info">
|
||||
<div class="all-title">
|
||||
<h3> 《高效能人士的7个习惯》</h3>
|
||||
<!-- <div><img src="../../../public/images/coteplay.png" alt="">8:40</div>
|
||||
<span>私密</span> -->
|
||||
<div class="daoru">导入</div>
|
||||
<h6>2022/05/21 16:28</h6>
|
||||
</div>
|
||||
<div class="all-content">
|
||||
<img src="../../../public/images/course.png" alt="">
|
||||
<img src="" alt="">
|
||||
<img src="" alt="">
|
||||
</div>
|
||||
<div class="all-footer">
|
||||
<div>
|
||||
<div class="textbut-box">
|
||||
<!-- <interactBar nodeWidth="60px" :readonly="true" :type="4" :data="qa" @addAnswers="qaAnswer(qa)" :shares="true" :comments="false" :answers="true" :clickAnswer="true" :views="false"></interactBar> -->
|
||||
<el-button style=" margin-right: 10px;" class="textbut" type="text"> <i class="el-icon-delete"></i> 删除</el-button><el-button class="textbut" type="text"> <i class="el-icon-edit"></i> 编辑</el-button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
<el-dialog
|
||||
title="王明"
|
||||
:visible.sync="dialogVisible"
|
||||
width="30%"
|
||||
:before-close="handleClose">
|
||||
<span>这是一段信息</span>
|
||||
<span slot="footer" class="dialog-footer">
|
||||
<el-button @click="dialogVisible = false">取 消</el-button>
|
||||
<el-button @click="dialogVisible = false">打 印</el-button>
|
||||
<el-button type="primary" @click="dialogVisible = false">确 定</el-button>
|
||||
</span>
|
||||
</el-dialog>
|
||||
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import interactBar from '@/components/Portal/interactBar.vue';
|
||||
export default {
|
||||
components:{interactBar},
|
||||
data(){
|
||||
return{
|
||||
value1: '起止时间',
|
||||
num :1,
|
||||
dialogVisible: false,
|
||||
}
|
||||
|
||||
|
||||
},
|
||||
methods: {
|
||||
handleClose(done) {
|
||||
this.$confirm('确认关闭？')
|
||||
.then(_ => {
|
||||
done();
|
||||
})
|
||||
.catch(_ => {});
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
::v-deep.el-dialog__header{
|
||||
background: url('/images/daochubg.png') 100% / 100% !important;
|
||||
}
|
||||
.textbut-box{
|
||||
// position: absolute;
|
||||
// right: 0;
|
||||
display: flex;
|
||||
}
|
||||
.textbut{
|
||||
font-size: 12px;
|
||||
font-weight: 400;
|
||||
color: #6E7B84 !important;
|
||||
|
||||
}
|
||||
.note-all{
|
||||
width: 100%;
|
||||
.note-all-info{
|
||||
border-bottom: 1px solid #ddd;
|
||||
padding-top: 35px;
|
||||
.all-footer{
|
||||
height: 10px;
|
||||
padding-bottom: 45px;
|
||||
width: 100%;
|
||||
div{
|
||||
float: right;
|
||||
}
|
||||
}
|
||||
.all-content{
|
||||
font-size: 14px;
|
||||
font-weight: 400;
|
||||
color: #333333;
|
||||
img{
|
||||
width: 140px;
|
||||
height: 175px;
|
||||
margin-right: 23px;
|
||||
}
|
||||
}
|
||||
.all-title{
|
||||
height: 50px;
|
||||
.daoru{
|
||||
width: 80px;
|
||||
height: 30px;
|
||||
border-radius: 4px;
|
||||
border: 1px solid #3379FB;
|
||||
}
|
||||
h6{
|
||||
margin: 0;
|
||||
float: right;
|
||||
font-size: 14px;
|
||||
color: #999999;
|
||||
font-weight: 400;
|
||||
}
|
||||
h3{
|
||||
font-size: 18px;
|
||||
font-weight: 600;
|
||||
color: #333333;
|
||||
margin: 0;
|
||||
float: left;
|
||||
}
|
||||
span{
|
||||
width: 53px;
|
||||
height: 22px;
|
||||
border-radius: 10px;
|
||||
border: 1px solid #3379FB;
|
||||
font-size: 14px;
|
||||
font-weight: 400;
|
||||
color: #3379FB;
|
||||
text-align:center;
|
||||
margin-top: 5px;
|
||||
display: inline-block;
|
||||
}
|
||||
div{
|
||||
width: 120px;
|
||||
height: 30px;
|
||||
border-radius: 4px;
|
||||
border: 1px solid #3379FB;
|
||||
font-size: 14px;
|
||||
font-weight: 400;
|
||||
color: #387DF7;
|
||||
line-height: 30px;
|
||||
text-align: center;
|
||||
float: left;
|
||||
margin: 0 20px;
|
||||
img{
|
||||
width: 10px;
|
||||
// height: 16px;
|
||||
padding-top: 6px;
|
||||
vertical-align: top;
|
||||
margin-right: 12px;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
.tabcontent{
|
||||
span{
|
||||
margin-right: 45px;
|
||||
padding: 0 6px;
|
||||
text-align: center;
|
||||
padding-bottom: 14px;
|
||||
display: inline-block;
|
||||
}
|
||||
}
|
||||
|
||||
.tab-textactive{
|
||||
border-bottom: 3px solid #3379FB;
|
||||
transform: all 0.3s;
|
||||
}
|
||||
.note-tab{
|
||||
height: 40px;
|
||||
margin-top: 20px;
|
||||
border-bottom: 1px solid #ddd;
|
||||
}
|
||||
.el-buttons{
|
||||
width: 160px !important;
|
||||
height: 40px;
|
||||
border-radius: 4px;
|
||||
// margin-left: 20px;
|
||||
}
|
||||
.el-buttons:hover{
|
||||
background-color: #fff !important;
|
||||
border: 1px solid #ddd !important;
|
||||
color: #0059FF !important;
|
||||
}
|
||||
.el-buttons:focus{
|
||||
background-color: #fff !important;
|
||||
color: #0059FF !important;
|
||||
border: 1px solid #ddd !important;
|
||||
}
|
||||
.note-sift{
|
||||
button{
|
||||
width: 160px;
|
||||
height: 40px;
|
||||
border-radius: 4px;
|
||||
margin-left: 20px;
|
||||
}
|
||||
}
|
||||
.note-hear{
|
||||
padding: 38px 42px;
|
||||
width: 100%;
|
||||
height: 50px;
|
||||
h3{
|
||||
margin: 0;
|
||||
float: left;
|
||||
font-size: 18px;
|
||||
font-weight: 600;
|
||||
color: #333333;
|
||||
line-height: 30px;
|
||||
}
|
||||
div{
|
||||
float: right;
|
||||
|
||||
Reference in New Issue
Block a user