|
@@ -9,15 +9,9 @@
|
|
|
style="width: 50%; margin-top: 50px"
|
|
|
>
|
|
|
<el-form-item label="视频名称:" prop="title">
|
|
|
- <el-input
|
|
|
- v-model="form.title"
|
|
|
- placeholder="请输入视频名称"
|
|
|
- />
|
|
|
+ <el-input v-model="form.title" placeholder="请输入视频名称" />
|
|
|
</el-form-item>
|
|
|
- <el-form-item
|
|
|
- label="课程章节:"
|
|
|
- prop="course_chapter_id"
|
|
|
- >
|
|
|
+ <el-form-item label="课程章节:" prop="course_chapter_id">
|
|
|
<el-select
|
|
|
v-model="form.course_chapter_id"
|
|
|
placeholder="请选择课程章节"
|
|
@@ -38,7 +32,7 @@
|
|
|
<el-upload
|
|
|
ref="upload"
|
|
|
accept=".mp4"
|
|
|
- :action="base_url+'/upload'"
|
|
|
+ :action="base_url + '/upload'"
|
|
|
class="upload-demo"
|
|
|
:data="videoUploadData"
|
|
|
:file-list="form.fileList"
|
|
@@ -48,12 +42,8 @@
|
|
|
:on-error="uploadErr"
|
|
|
:on-success="videoSuccess"
|
|
|
>
|
|
|
- <el-button size="small" type="primary">
|
|
|
- 上传视频
|
|
|
- </el-button>
|
|
|
- <div slot="tip" class="el-upload__tip">
|
|
|
- 只能上传mp4格式
|
|
|
- </div>
|
|
|
+ <el-button size="small" type="primary"> 上传视频 </el-button>
|
|
|
+ <div slot="tip" class="el-upload__tip">只能上传mp4格式</div>
|
|
|
</el-upload>
|
|
|
<div v-if="title == '编辑视频'">
|
|
|
<a :href="form.fileList.url" target="_blank">
|
|
@@ -62,10 +52,7 @@
|
|
|
</div>
|
|
|
</el-form-item>
|
|
|
|
|
|
- <el-form-item
|
|
|
- label="视频简介:"
|
|
|
- prop="short_description"
|
|
|
- >
|
|
|
+ <el-form-item label="视频简介:" prop="short_description">
|
|
|
<el-input
|
|
|
v-model="form.short_description"
|
|
|
autosize
|
|
@@ -101,17 +88,14 @@
|
|
|
<span style="position: absolute; top: 0px; left: -80px; color: red">
|
|
|
*
|
|
|
</span>
|
|
|
- <el-input-number
|
|
|
- v-model="hours"
|
|
|
- label="请输入小时"
|
|
|
- />
|
|
|
- 时
|
|
|
+ <el-input-number v-model="hours" label="请输入小时" />
|
|
|
+ 时
|
|
|
<el-input-number
|
|
|
v-model="minute"
|
|
|
label="请输入分钟时"
|
|
|
style="margin-left: 10px"
|
|
|
/>
|
|
|
- 分
|
|
|
+ 分
|
|
|
<el-input-number
|
|
|
v-model="second"
|
|
|
label="请输入秒"
|
|
@@ -119,14 +103,11 @@
|
|
|
/>
|
|
|
秒
|
|
|
</el-form-item>
|
|
|
- <el-form-item
|
|
|
- label="中文字幕地:"
|
|
|
- prop="subtitle_zh_path"
|
|
|
- >
|
|
|
+ <el-form-item label="中文字幕地:" prop="subtitle_zh_path">
|
|
|
<el-upload
|
|
|
ref="upload"
|
|
|
accept=".vtt"
|
|
|
- :action="base_url+'/upload'"
|
|
|
+ :action="base_url + '/upload'"
|
|
|
class="upload-demo"
|
|
|
:data="zhUploadData"
|
|
|
:limit="limit"
|
|
@@ -135,12 +116,8 @@
|
|
|
:on-error="uploadErr"
|
|
|
:on-success="zhSuccess"
|
|
|
>
|
|
|
- <el-button size="small" type="primary">
|
|
|
- 点击上传
|
|
|
- </el-button>
|
|
|
- <div slot="tip" class="el-upload__tip">
|
|
|
- 只能上传(vtt格式)
|
|
|
- </div>
|
|
|
+ <el-button size="small" type="primary"> 点击上传 </el-button>
|
|
|
+ <div slot="tip" class="el-upload__tip">只能上传(vtt格式)</div>
|
|
|
</el-upload>
|
|
|
<div v-if="title == '编辑视频'">
|
|
|
<a :href="form.subtitle_zh_path_resource.url" target="_blank">
|
|
@@ -148,14 +125,11 @@
|
|
|
</a>
|
|
|
</div>
|
|
|
</el-form-item>
|
|
|
- <el-form-item
|
|
|
- label="英文字幕地址:"
|
|
|
- prop="subtitle_en_path"
|
|
|
- >
|
|
|
+ <el-form-item label="英文字幕地址:" prop="subtitle_en_path">
|
|
|
<el-upload
|
|
|
ref="upload"
|
|
|
accept=".vtt"
|
|
|
- :action="base_url+'/upload'"
|
|
|
+ :action="base_url + '/upload'"
|
|
|
class="upload-demo"
|
|
|
:data="enUploadData"
|
|
|
:limit="limit"
|
|
@@ -164,12 +138,8 @@
|
|
|
:on-error="uploadErr"
|
|
|
:on-success="enSuccess"
|
|
|
>
|
|
|
- <el-button size="small" type="primary">
|
|
|
- 点击上传
|
|
|
- </el-button>
|
|
|
- <div slot="tip" class="el-upload__tip">
|
|
|
- 只能上传(vtt格式)
|
|
|
- </div>
|
|
|
+ <el-button size="small" type="primary"> 点击上传 </el-button>
|
|
|
+ <div slot="tip" class="el-upload__tip">只能上传(vtt格式)</div>
|
|
|
</el-upload>
|
|
|
<div v-if="title == '编辑视频'">
|
|
|
<a :href="form.subtitle_en_path_resource.url" target="_blank">
|
|
@@ -200,289 +170,275 @@
|
|
|
</template>
|
|
|
|
|
|
<script>
|
|
|
- import { videoAdd, videoEdit } from './api/video'
|
|
|
- import { chapterList } from './api/chapter'
|
|
|
- export default {
|
|
|
- name: 'DepartmentManagementEdit',
|
|
|
- // components: { VabQuill },
|
|
|
- data() {
|
|
|
- return {
|
|
|
- chapterData: [],
|
|
|
- minute: '', //分
|
|
|
- hours: '', //时
|
|
|
- second: '', //秒
|
|
|
- courseId: '', //课程id
|
|
|
- videoId: '', //视频id
|
|
|
- form: {
|
|
|
- course_chapter_id: '',
|
|
|
- title: '',
|
|
|
- url: '',
|
|
|
- short_description: '',
|
|
|
- description: '',
|
|
|
- published_at: '',
|
|
|
- status: 1,
|
|
|
- sort: 0,
|
|
|
- fileList: [],
|
|
|
- },
|
|
|
- action: '', //图片上传地址
|
|
|
- uploadShow: true,
|
|
|
- videoUploadData: { file_type: 'file', type: 'course_video' },
|
|
|
- zhUploadData: { file_type: 'file', type: 'course_video' },
|
|
|
- enUploadData: { file_type: 'file', type: 'course_video' },
|
|
|
- limit: 1,
|
|
|
- rules: {
|
|
|
- category_id: [
|
|
|
- { required: true, trigger: 'change', message: '请选择课程类型' },
|
|
|
- ],
|
|
|
- title: [
|
|
|
- { required: true, trigger: 'blur', message: '请输入课程名称' },
|
|
|
- ],
|
|
|
- course_chapter_id: [
|
|
|
- { required: true, trigger: 'change', message: '请选择课程章节' },
|
|
|
- ],
|
|
|
- fileList: [
|
|
|
- { required: true, trigger: 'change', message: '请上传课程视频' },
|
|
|
- ],
|
|
|
- short_description: [
|
|
|
- { required: true, trigger: 'blur', message: '请输入课程简介' },
|
|
|
- ],
|
|
|
- sort: [
|
|
|
- { required: true, trigger: 'blur', message: '请输入课程排序' },
|
|
|
- ],
|
|
|
- status: [
|
|
|
- { required: true, trigger: 'blur', message: '请选择课程状态' },
|
|
|
- ],
|
|
|
+import { videoAdd, videoEdit } from "./api/video";
|
|
|
+import { chapterList } from "./api/chapter";
|
|
|
+export default {
|
|
|
+ name: "DepartmentManagementEdit",
|
|
|
+ // components: { VabQuill },
|
|
|
+ data() {
|
|
|
+ return {
|
|
|
+ chapterData: [],
|
|
|
+ minute: "", //分
|
|
|
+ hours: "", //时
|
|
|
+ second: "", //秒
|
|
|
+ courseId: "", //课程id
|
|
|
+ videoId: "", //视频id
|
|
|
+ form: {
|
|
|
+ course_chapter_id: "",
|
|
|
+ title: "",
|
|
|
+ url: "",
|
|
|
+ short_description: "",
|
|
|
+ description: "",
|
|
|
+ published_at: "",
|
|
|
+ status: 1,
|
|
|
+ sort: 0,
|
|
|
+ fileList: [],
|
|
|
+ },
|
|
|
+ action: "", //图片上传地址
|
|
|
+ uploadShow: true,
|
|
|
+ videoUploadData: { file_type: "file", type: "course_video" },
|
|
|
+ zhUploadData: { file_type: "file", type: "course_video" },
|
|
|
+ enUploadData: { file_type: "file", type: "course_video" },
|
|
|
+ limit: 1,
|
|
|
+ rules: {
|
|
|
+ category_id: [
|
|
|
+ { required: true, trigger: "change", message: "请选择课程类型" },
|
|
|
+ ],
|
|
|
+ title: [{ required: true, trigger: "blur", message: "请输入课程名称" }],
|
|
|
+ course_chapter_id: [
|
|
|
+ { required: true, trigger: "change", message: "请选择课程章节" },
|
|
|
+ ],
|
|
|
+ fileList: [
|
|
|
+ { required: true, trigger: "change", message: "请上传课程视频" },
|
|
|
+ ],
|
|
|
+ short_description: [
|
|
|
+ { required: true, trigger: "blur", message: "请输入课程简介" },
|
|
|
+ ],
|
|
|
+ sort: [{ required: true, trigger: "blur", message: "请输入课程排序" }],
|
|
|
+ status: [
|
|
|
+ { required: true, trigger: "blur", message: "请选择课程状态" },
|
|
|
+ ],
|
|
|
+ },
|
|
|
+ title: "",
|
|
|
+ dialogFormVisible: false,
|
|
|
+ };
|
|
|
+ },
|
|
|
+ watch: {
|
|
|
+ $route: "getChapterList",
|
|
|
+ },
|
|
|
+ created() {
|
|
|
+ let route = this.$route;
|
|
|
+ console.log(route.query, "route.query");
|
|
|
+ // this.course_chapter_id
|
|
|
+ // 接收视频列表页面的数据参数
|
|
|
+ this.courseId = route.query.courseId;
|
|
|
+ this.videoId = route.query.videoId;
|
|
|
+ if (route.query.videoId) {
|
|
|
+ this.title = "编辑视频";
|
|
|
+ } else {
|
|
|
+ this.title = "添加视频";
|
|
|
+ }
|
|
|
+ console.log(route.query, "ids");
|
|
|
+ // this.action = baseURL + '/common/upload'
|
|
|
+ this.chapterData = [];
|
|
|
+ this.getChapterList();
|
|
|
+ },
|
|
|
+
|
|
|
+ methods: {
|
|
|
+ //富文本编辑器
|
|
|
+ getTnyMac(res) {
|
|
|
+ this.form.intro = res;
|
|
|
+ },
|
|
|
+
|
|
|
+ //返回上一页
|
|
|
+ goBack() {
|
|
|
+ this.$router.push({
|
|
|
+ path: "/video/videoList",
|
|
|
+ query: {
|
|
|
+ id: this.courseId,
|
|
|
},
|
|
|
- title: '',
|
|
|
- dialogFormVisible: false,
|
|
|
- }
|
|
|
+ });
|
|
|
},
|
|
|
- watch: {
|
|
|
- $route: 'getChapterList',
|
|
|
+ //章节管理
|
|
|
+ // chapterManage() {
|
|
|
+ // this.$router.push({
|
|
|
+ // path: '/course/chapter',
|
|
|
+ // query: {
|
|
|
+ // courseId: this.courseId,
|
|
|
+ // videoId: this.videoId,
|
|
|
+ // },
|
|
|
+ // })
|
|
|
+ // },
|
|
|
+ //获取章节列表
|
|
|
+ async getChapterList() {
|
|
|
+ const { data } = await chapterList({
|
|
|
+ courseId: this.courseId,
|
|
|
+ status: 1,
|
|
|
+ });
|
|
|
+ console.log(data, "章节列表");
|
|
|
+ this.chapterData = data.data;
|
|
|
},
|
|
|
- created() {
|
|
|
- let route = this.$route
|
|
|
- console.log(route.query, 'route.query')
|
|
|
- // this.course_chapter_id
|
|
|
- // 接收视频列表页面的数据参数
|
|
|
- this.courseId = route.query.courseId
|
|
|
- this.videoId = route.query.videoId
|
|
|
- if (route.query.videoId) {
|
|
|
- this.title = '编辑视频'
|
|
|
- } else {
|
|
|
- this.title = '添加视频'
|
|
|
- }
|
|
|
- console.log(route.query, 'ids')
|
|
|
- // this.action = baseURL + '/common/upload'
|
|
|
- this.chapterData = []
|
|
|
- this.getChapterList()
|
|
|
+ //视频上传成功
|
|
|
+ videoSuccess(response, file) {
|
|
|
+ console.log(response, "图片上传成功");
|
|
|
+ console.log(file, "图片上传成功");
|
|
|
+ this.form.url = response.data.id;
|
|
|
+ this.form.fileList.push(file);
|
|
|
+ this.$refs.form.validateField("fileList");
|
|
|
+ },
|
|
|
+ //中文字幕上传成功
|
|
|
+ zhSuccess(response) {
|
|
|
+ console.log(response, "图片上传成功");
|
|
|
+ this.form.subtitle_zh_path = response.data.id;
|
|
|
+ },
|
|
|
+ //英文字幕上传成功
|
|
|
+ enSuccess(response) {
|
|
|
+ console.log(response, "图片上传成功");
|
|
|
+ this.form.subtitle_en_path = response.data.id;
|
|
|
+ },
|
|
|
+ uploadErr(err) {
|
|
|
+ console.log(err, "上传失败");
|
|
|
+ this.$message.error("文件上传失败,请重新上传");
|
|
|
+ },
|
|
|
+ handleNodeClick(node) {
|
|
|
+ this.form.category_name = node.name;
|
|
|
+ this.form.category_id = node.id;
|
|
|
+ },
|
|
|
+ close() {
|
|
|
+ this.hours = this.second = this.minute = 0;
|
|
|
+ this.$refs["form"].resetFields();
|
|
|
+ this.form = this.$options.data().form;
|
|
|
+ this.dialogFormVisible = false;
|
|
|
+ this.goBack();
|
|
|
},
|
|
|
|
|
|
- methods: {
|
|
|
- //富文本编辑器
|
|
|
- getTnyMac(res) {
|
|
|
- this.form.intro = res
|
|
|
- },
|
|
|
-
|
|
|
- //返回上一页
|
|
|
- goBack() {
|
|
|
- this.$router.push({
|
|
|
- path: '/video/video',
|
|
|
- query: {
|
|
|
- id: this.courseId,
|
|
|
- },
|
|
|
- })
|
|
|
- },
|
|
|
- //章节管理
|
|
|
- // chapterManage() {
|
|
|
- // this.$router.push({
|
|
|
- // path: '/course/chapter',
|
|
|
- // query: {
|
|
|
- // courseId: this.courseId,
|
|
|
- // videoId: this.videoId,
|
|
|
- // },
|
|
|
- // })
|
|
|
- // },
|
|
|
- //获取章节列表
|
|
|
- async getChapterList() {
|
|
|
- const { data } = await chapterList({
|
|
|
- courseId: this.courseId,
|
|
|
- status: 1,
|
|
|
- })
|
|
|
- console.log(data, '章节列表')
|
|
|
- this.chapterData = data.data
|
|
|
- },
|
|
|
- //视频上传成功
|
|
|
- videoSuccess(response, file) {
|
|
|
- console.log(response, '图片上传成功')
|
|
|
- console.log(file, '图片上传成功')
|
|
|
- this.form.url = response.data.id
|
|
|
- this.form.fileList.push(file)
|
|
|
- this.$refs.form.validateField('fileList')
|
|
|
- },
|
|
|
- //中文字幕上传成功
|
|
|
- zhSuccess(response) {
|
|
|
- console.log(response, '图片上传成功')
|
|
|
- this.form.subtitle_zh_path = response.data.id
|
|
|
- },
|
|
|
- //英文字幕上传成功
|
|
|
- enSuccess(response) {
|
|
|
- console.log(response, '图片上传成功')
|
|
|
- this.form.subtitle_en_path = response.data.id
|
|
|
- },
|
|
|
- uploadErr(err) {
|
|
|
- console.log(err, '上传失败')
|
|
|
- this.$message.error('文件上传失败,请重新上传')
|
|
|
- },
|
|
|
- handleNodeClick(node) {
|
|
|
- this.form.category_name = node.name
|
|
|
- this.form.category_id = node.id
|
|
|
- },
|
|
|
- close() {
|
|
|
- this.hours = this.second = this.minute = 0
|
|
|
- this.$refs['form'].resetFields()
|
|
|
- this.form = this.$options.data().form
|
|
|
- this.dialogFormVisible = false
|
|
|
- this.goBack()
|
|
|
- },
|
|
|
-
|
|
|
- //编辑保存
|
|
|
- save() {
|
|
|
- this.form.duration = this.hours * 3600 + this.minute * 60 + this.second
|
|
|
- this.$refs['form'].validate(async (valid) => {
|
|
|
- if (valid) {
|
|
|
- const { message } = await videoEdit(this.form)
|
|
|
- this.$message(
|
|
|
- message,
|
|
|
- 'success',
|
|
|
- false,
|
|
|
- 'vab-hey-message-success'
|
|
|
- )
|
|
|
- this.$router.push({
|
|
|
- path: '/course/video',
|
|
|
- query: {
|
|
|
- id: this.courseId,
|
|
|
- },
|
|
|
- })
|
|
|
- }
|
|
|
- })
|
|
|
- },
|
|
|
- //添加
|
|
|
- add() {
|
|
|
- console.log(this.hours, '时')
|
|
|
- console.log(this.minute, '时')
|
|
|
- console.log(this.second, '时')
|
|
|
- this.form.course_id = this.courseId
|
|
|
- this.form.duration = this.hours * 3600 + this.minute * 60 + this.second
|
|
|
- if (this.form.duration == 0) {
|
|
|
- this.$message.error('视频时长不能为0')
|
|
|
- return
|
|
|
+ //编辑保存
|
|
|
+ save() {
|
|
|
+ this.form.duration = this.hours * 3600 + this.minute * 60 + this.second;
|
|
|
+ this.$refs["form"].validate(async (valid) => {
|
|
|
+ if (valid) {
|
|
|
+ const { message } = await videoEdit(this.form);
|
|
|
+ this.$message({ message, type: "success" });
|
|
|
+ this.$router.push({
|
|
|
+ path: "/video/videoList",
|
|
|
+ query: {
|
|
|
+ id: this.courseId,
|
|
|
+ },
|
|
|
+ });
|
|
|
}
|
|
|
- console.log(this.form.duration, '视频时长')
|
|
|
- this.$refs['form'].validate(async (valid) => {
|
|
|
- if (valid) {
|
|
|
- const { message } = await videoAdd(this.form)
|
|
|
- this.$message(
|
|
|
- message,
|
|
|
- 'success',
|
|
|
- false,
|
|
|
- 'vab-hey-message-success'
|
|
|
- )
|
|
|
- this.hours = this.minute = this.second = 0
|
|
|
- this.form = {
|
|
|
- course_chapter_id: '',
|
|
|
- title: '',
|
|
|
- url: '',
|
|
|
- short_description: '',
|
|
|
- description: '',
|
|
|
- published_at: '',
|
|
|
- status: 1,
|
|
|
- }
|
|
|
- this.$refs.upload.clearFiles()
|
|
|
- this.$router.push({
|
|
|
- path: '/video/video',
|
|
|
- query: {
|
|
|
- id: this.courseId,
|
|
|
- },
|
|
|
- })
|
|
|
- }
|
|
|
- })
|
|
|
- },
|
|
|
+ });
|
|
|
+ },
|
|
|
+ //添加
|
|
|
+ add() {
|
|
|
+ console.log(this.hours, "时");
|
|
|
+ console.log(this.minute, "时");
|
|
|
+ console.log(this.second, "时");
|
|
|
+ this.form.course_id = this.courseId;
|
|
|
+ this.form.duration = this.hours * 3600 + this.minute * 60 + this.second;
|
|
|
+ if (this.form.duration == 0) {
|
|
|
+ this.$message.error("视频时长不能为0");
|
|
|
+ return;
|
|
|
+ }
|
|
|
+ console.log(this.form.duration, "视频时长");
|
|
|
+ this.$refs["form"].validate(async (valid) => {
|
|
|
+ if (valid) {
|
|
|
+ const { message } = await videoAdd(this.form);
|
|
|
+ this.$message({ message, type: "success" });
|
|
|
+ this.hours = this.minute = this.second = 0;
|
|
|
+ this.form = {
|
|
|
+ course_chapter_id: "",
|
|
|
+ title: "",
|
|
|
+ url: "",
|
|
|
+ short_description: "",
|
|
|
+ description: "",
|
|
|
+ published_at: "",
|
|
|
+ status: 1,
|
|
|
+ };
|
|
|
+ this.$refs.upload.clearFiles();
|
|
|
+ this.$router.push({
|
|
|
+ path: "/video/videoList",
|
|
|
+ query: {
|
|
|
+ id: this.courseId,
|
|
|
+ },
|
|
|
+ });
|
|
|
+ }
|
|
|
+ });
|
|
|
},
|
|
|
- }
|
|
|
+ },
|
|
|
+};
|
|
|
</script>
|
|
|
<style lang="scss">
|
|
|
- .foot {
|
|
|
- width: 50%;
|
|
|
- margin-top: 50px;
|
|
|
- text-align: center;
|
|
|
- }
|
|
|
- p {
|
|
|
- margin: 10px;
|
|
|
- }
|
|
|
+.foot {
|
|
|
+ width: 50%;
|
|
|
+ margin-top: 50px;
|
|
|
+ text-align: center;
|
|
|
+}
|
|
|
+p {
|
|
|
+ margin: 10px;
|
|
|
+}
|
|
|
|
|
|
- .edit_container,
|
|
|
- .quill-editor {
|
|
|
- height: 300px;
|
|
|
- }
|
|
|
+.edit_container,
|
|
|
+.quill-editor {
|
|
|
+ height: 300px;
|
|
|
+}
|
|
|
|
|
|
- .ql-snow .ql-picker.ql-size .ql-picker-label::before,
|
|
|
- .ql-snow .ql-picker.ql-size .ql-picker-item::before {
|
|
|
- content: '14px';
|
|
|
- }
|
|
|
+.ql-snow .ql-picker.ql-size .ql-picker-label::before,
|
|
|
+.ql-snow .ql-picker.ql-size .ql-picker-item::before {
|
|
|
+ content: "14px";
|
|
|
+}
|
|
|
|
|
|
- .ql-snow .ql-picker.ql-size .ql-picker-label[data-value='small']::before,
|
|
|
- .ql-snow .ql-picker.ql-size .ql-picker-item[data-value='small']::before {
|
|
|
- content: '10px';
|
|
|
- }
|
|
|
- .ql-snow .ql-picker.ql-size .ql-picker-label[data-value='large']::before,
|
|
|
- .ql-snow .ql-picker.ql-size .ql-picker-item[data-value='large']::before {
|
|
|
- content: '18px';
|
|
|
- }
|
|
|
- .ql-snow .ql-picker.ql-size .ql-picker-label[data-value='huge']::before,
|
|
|
- .ql-snow .ql-picker.ql-size .ql-picker-item[data-value='huge']::before {
|
|
|
- content: '32px';
|
|
|
- }
|
|
|
+.ql-snow .ql-picker.ql-size .ql-picker-label[data-value="small"]::before,
|
|
|
+.ql-snow .ql-picker.ql-size .ql-picker-item[data-value="small"]::before {
|
|
|
+ content: "10px";
|
|
|
+}
|
|
|
+.ql-snow .ql-picker.ql-size .ql-picker-label[data-value="large"]::before,
|
|
|
+.ql-snow .ql-picker.ql-size .ql-picker-item[data-value="large"]::before {
|
|
|
+ content: "18px";
|
|
|
+}
|
|
|
+.ql-snow .ql-picker.ql-size .ql-picker-label[data-value="huge"]::before,
|
|
|
+.ql-snow .ql-picker.ql-size .ql-picker-item[data-value="huge"]::before {
|
|
|
+ content: "32px";
|
|
|
+}
|
|
|
|
|
|
- .ql-snow .ql-picker.ql-header .ql-picker-label::before,
|
|
|
- .ql-snow .ql-picker.ql-header .ql-picker-item::before {
|
|
|
- content: '文本';
|
|
|
- }
|
|
|
- .ql-snow .ql-picker.ql-header .ql-picker-label[data-value='1']::before,
|
|
|
- .ql-snow .ql-picker.ql-header .ql-picker-item[data-value='1']::before {
|
|
|
- content: '标题1';
|
|
|
- }
|
|
|
- .ql-snow .ql-picker.ql-header .ql-picker-label[data-value='2']::before,
|
|
|
- .ql-snow .ql-picker.ql-header .ql-picker-item[data-value='2']::before {
|
|
|
- content: '标题2';
|
|
|
- }
|
|
|
- .ql-snow .ql-picker.ql-header .ql-picker-label[data-value='3']::before,
|
|
|
- .ql-snow .ql-picker.ql-header .ql-picker-item[data-value='3']::before {
|
|
|
- content: '标题3';
|
|
|
- }
|
|
|
- .ql-snow .ql-picker.ql-header .ql-picker-label[data-value='4']::before,
|
|
|
- .ql-snow .ql-picker.ql-header .ql-picker-item[data-value='4']::before {
|
|
|
- content: '标题4';
|
|
|
- }
|
|
|
- .ql-snow .ql-picker.ql-header .ql-picker-label[data-value='5']::before,
|
|
|
- .ql-snow .ql-picker.ql-header .ql-picker-item[data-value='5']::before {
|
|
|
- content: '标题5';
|
|
|
- }
|
|
|
- .ql-snow .ql-picker.ql-header .ql-picker-label[data-value='6']::before,
|
|
|
- .ql-snow .ql-picker.ql-header .ql-picker-item[data-value='6']::before {
|
|
|
- content: '标题6';
|
|
|
- }
|
|
|
+.ql-snow .ql-picker.ql-header .ql-picker-label::before,
|
|
|
+.ql-snow .ql-picker.ql-header .ql-picker-item::before {
|
|
|
+ content: "文本";
|
|
|
+}
|
|
|
+.ql-snow .ql-picker.ql-header .ql-picker-label[data-value="1"]::before,
|
|
|
+.ql-snow .ql-picker.ql-header .ql-picker-item[data-value="1"]::before {
|
|
|
+ content: "标题1";
|
|
|
+}
|
|
|
+.ql-snow .ql-picker.ql-header .ql-picker-label[data-value="2"]::before,
|
|
|
+.ql-snow .ql-picker.ql-header .ql-picker-item[data-value="2"]::before {
|
|
|
+ content: "标题2";
|
|
|
+}
|
|
|
+.ql-snow .ql-picker.ql-header .ql-picker-label[data-value="3"]::before,
|
|
|
+.ql-snow .ql-picker.ql-header .ql-picker-item[data-value="3"]::before {
|
|
|
+ content: "标题3";
|
|
|
+}
|
|
|
+.ql-snow .ql-picker.ql-header .ql-picker-label[data-value="4"]::before,
|
|
|
+.ql-snow .ql-picker.ql-header .ql-picker-item[data-value="4"]::before {
|
|
|
+ content: "标题4";
|
|
|
+}
|
|
|
+.ql-snow .ql-picker.ql-header .ql-picker-label[data-value="5"]::before,
|
|
|
+.ql-snow .ql-picker.ql-header .ql-picker-item[data-value="5"]::before {
|
|
|
+ content: "标题5";
|
|
|
+}
|
|
|
+.ql-snow .ql-picker.ql-header .ql-picker-label[data-value="6"]::before,
|
|
|
+.ql-snow .ql-picker.ql-header .ql-picker-item[data-value="6"]::before {
|
|
|
+ content: "标题6";
|
|
|
+}
|
|
|
|
|
|
- .ql-snow .ql-picker.ql-font .ql-picker-label::before,
|
|
|
- .ql-snow .ql-picker.ql-font .ql-picker-item::before {
|
|
|
- content: '标准字体';
|
|
|
- }
|
|
|
- .ql-snow .ql-picker.ql-font .ql-picker-label[data-value='serif']::before,
|
|
|
- .ql-snow .ql-picker.ql-font .ql-picker-item[data-value='serif']::before {
|
|
|
- content: '衬线字体';
|
|
|
- }
|
|
|
- .ql-snow .ql-picker.ql-font .ql-picker-label[data-value='monospace']::before,
|
|
|
- .ql-snow .ql-picker.ql-font .ql-picker-item[data-value='monospace']::before {
|
|
|
- content: '等宽字体';
|
|
|
- }
|
|
|
+.ql-snow .ql-picker.ql-font .ql-picker-label::before,
|
|
|
+.ql-snow .ql-picker.ql-font .ql-picker-item::before {
|
|
|
+ content: "标准字体";
|
|
|
+}
|
|
|
+.ql-snow .ql-picker.ql-font .ql-picker-label[data-value="serif"]::before,
|
|
|
+.ql-snow .ql-picker.ql-font .ql-picker-item[data-value="serif"]::before {
|
|
|
+ content: "衬线字体";
|
|
|
+}
|
|
|
+.ql-snow .ql-picker.ql-font .ql-picker-label[data-value="monospace"]::before,
|
|
|
+.ql-snow .ql-picker.ql-font .ql-picker-item[data-value="monospace"]::before {
|
|
|
+ content: "等宽字体";
|
|
|
+}
|
|
|
</style>
|