<template>
<div>
<div class="education_video_title">教学视频:</div>
<div class="education_video">
<div class="education_video_setting" @click="videoSettingVisible = !videoSettingVisible"></div>
<div class="education_video_text">
<input class="course_name" ref="inpName" placeholder="请输入内容" v-model="input" :disabled="disabled">
</div>
<!-- 点击教学视频右上角的三点 显示 -->
<div class="video_setting_dialog" v-show="videoSettingVisible">
<div class="video_setting_text" @click="reName">重命名</div>
<el-divider></el-divider>
<div class="video_setting_text" @click="delVideoVisible=true">删除视频</div>
</div>
</div>
</div>
</template>
<script>
export default {
name: "TestTime",
data() {
return {
input: '空间设计是非常抽象的,需要有灵活的脑袋',
// input框是否可编辑
disabled: true,
// 点击教学视频右上角的三点
videoSettingVisible: false,
};
},
methods: {
// 重命名
reName() {
this.$nextTick(() =>
this.$refs.inpName.focus(),
this.disabled = false
);
},
}
}
</script>
<style lang="scss" scoped>
::v-deep .el-divider--horizontal {
margin: 0 !important;
}
.upload_video_title {
color: #7E7E7E;
font-family: PingFang SC;
font-size: 1.125rem;
font-weight: 600;
line-height: 1.125rem;
display: inline-block;
margin-top: 2.5rem;
.upload_btn {
width: 7.78rem;
background: #007AFF;
color: #FFF;
font-family: PingFang SC;
font-size: 0.875rem;
line-height: 0.875rem;
letter-spacing: 0.035rem;
}
}
.education_video_title {
margin: 2rem;
color: #7E7E7E;
font-family: PingFang SC;
font-size: 1.125rem;
font-weight: 600;
line-height: 1.125rem;
}
.education_video {
margin: 2rem;
width: 357px;
height: 197px;
margin-top: 1.5rem;
margin-right: 4rem;
background: rgb(111, 211, 124);
border-radius: 0.625rem;
display: inline-block;
position: relative;
.education_video_setting {
width: 1rem;
height: 1rem;
position: absolute;
right: 1.75rem;
top: 1rem;
background: url('../static/Vector_point.png');
}
.education_video_text {
text-align: center;
color: #FFF;
font-family: PingFang SC;
font-size: 0.75rem;
line-height: 120%;
margin-top: 160px;
}
/* 点击视频右上角三点 显示 */
.video_setting_dialog {
width: 8.875rem;
height: 5rem;
border-radius: 0.25rem;
background: #FFF;
box-shadow: 2px 2px 8px 0px rgba(82, 90, 102, 0.08), 1px 1px 2px 0px rgba(82, 90, 102, 0.04);
position: absolute;
right: -2.5rem;
top: 2rem;
.video_setting_text {
color: #31373D;
font-family: PingFang SC;
font-size: 0.75rem;
line-height: 0.75rem;
text-align: center;
padding: 0.88rem 0;
}
}
}
/* input框 */
.course_name {
width: 330px;
text-align: center;
/* 设置背景色为全透明 */
background-color: transparent;
/* 还没有点击“重命名时没有边框,所以只有点击重命名聚焦的时候可以看到边框” */
border: none;
color: #fff;
}
</style>
01-13
279
![](https://csdnimg.cn/release/blogv2/dist/pc/img/readCountWhite.png)