parent
e2efe063fd
commit
8dddc719ae
17 changed files with 938 additions and 57 deletions
|
After Width: | Height: | Size: 1.0 KiB |
|
After Width: | Height: | Size: 138 B |
|
After Width: | Height: | Size: 221 B |
|
After Width: | Height: | Size: 239 B |
|
After Width: | Height: | Size: 292 B |
|
After Width: | Height: | Size: 376 B |
@ -0,0 +1,251 @@ |
||||
<template> |
||||
<div class="quill" ref="quill" :class="classes"> |
||||
<div ref="editor" :style="styles" v-loading="loading"></div> |
||||
|
||||
<el-upload |
||||
:headers="headers" |
||||
:action="this.api.fileupload" |
||||
:before-upload="beforeUpload" |
||||
:on-success="editorUploadSuccess" |
||||
style="display: none" |
||||
> |
||||
<el-button class="editorUpload" type="primary">点击上传</el-button> |
||||
</el-upload> |
||||
</div> |
||||
</template> |
||||
|
||||
<script> |
||||
import Quill from "quill"; |
||||
import "quill/dist/quill.core.css"; |
||||
import "quill/dist/quill.snow.css"; |
||||
import "quill/dist/quill.bubble.css"; |
||||
import toolbarOptions from "./options"; |
||||
import Cookie from 'js-cookie' |
||||
export default { |
||||
name: "quill", |
||||
props: { |
||||
value: { |
||||
type: String, |
||||
default: "" |
||||
}, |
||||
readonly: { |
||||
type: Boolean, |
||||
default: false |
||||
}, |
||||
toTop: { |
||||
type: Boolean, |
||||
default: true |
||||
}, |
||||
border: { |
||||
type: Boolean, |
||||
default: false |
||||
}, |
||||
height: { |
||||
type: Number |
||||
}, |
||||
minHeight: { |
||||
type: Number |
||||
}, |
||||
/* |
||||
* 原本的readOnly失效,对比其他项目，发现是quill版本不同导致， |
||||
* 使用props传入elseRead = 'true'，手动隐藏工具栏 |
||||
*/ |
||||
elseRead: { |
||||
type: String, default: "false" |
||||
} |
||||
}, |
||||
data() { |
||||
return { |
||||
headers: { |
||||
token: Cookie.get('admin-token') |
||||
}, |
||||
Quill: null, |
||||
currentValue: "", |
||||
options: { |
||||
theme: "snow", |
||||
bounds: document.body, |
||||
debug: "warn", |
||||
modules: { |
||||
toolbar: { |
||||
container: toolbarOptions, |
||||
handlers: { |
||||
"image": function(value) { |
||||
if (value) { |
||||
// 调用iview图片上传 |
||||
document.querySelector(".editorUpload").click(); |
||||
} else { |
||||
this.Quill.format("image", false); |
||||
} |
||||
} |
||||
} |
||||
} |
||||
}, |
||||
placeholder: "", |
||||
readOnly: this.readonly |
||||
}, |
||||
loading: false |
||||
}; |
||||
}, |
||||
computed: { |
||||
classes() { |
||||
return [ |
||||
{ |
||||
"quill-no-border": !this.border |
||||
} |
||||
]; |
||||
}, |
||||
styles() { |
||||
let style = {}; |
||||
if (this.minHeight) { |
||||
style.minHeight = `${this.minHeight}px`; |
||||
} |
||||
if (this.height) { |
||||
style.height = `${this.height}px`; |
||||
} |
||||
return style; |
||||
} |
||||
|
||||
}, |
||||
watch: { |
||||
value: { |
||||
handler(val) { |
||||
if (val !== this.currentValue) { |
||||
this.currentValue = val; |
||||
if (this.Quill) { |
||||
this.Quill.pasteHTML(this.value); |
||||
} |
||||
} |
||||
}, |
||||
immediate: true |
||||
} |
||||
}, |
||||
mounted() { |
||||
this.init(); |
||||
// 处理工具栏隐藏样式 |
||||
if (this.elseRead === "true") { |
||||
let children = this.$refs.quill.children[0].style; |
||||
children.padding = "0"; |
||||
children.overflow = "hidden"; |
||||
children.height = "0"; |
||||
children.borderTop = "0"; |
||||
} |
||||
}, |
||||
beforeDestroy() { |
||||
// 在组件销毁后销毁实例 |
||||
this.Quill = null; |
||||
}, |
||||
methods: { |
||||
init () { |
||||
const editor = this.$refs.editor; |
||||
// 初始化编辑器 |
||||
this.Quill = new Quill(editor, this.options); |
||||
const ins = this.Quill |
||||
// 默认值 |
||||
ins.pasteHTML(this.currentValue); |
||||
if(this.toTop){ |
||||
this.$nextTick(() => { |
||||
window.scrollTo(0,0) |
||||
}) |
||||
} |
||||
// 绑定事件 |
||||
ins.on('text-change', (delta, oldDelta, source) => { |
||||
const html = this.$refs.editor.children[0].innerHTML; |
||||
const text = ins.getText(); |
||||
const quill = this.Quill; |
||||
// 更新内部的值 |
||||
this.currentValue = html; |
||||
// 发出事件 v-model |
||||
this.$emit('input', html); |
||||
// 发出事件 |
||||
this.$emit('on-change', { html, text, quill }); |
||||
}); |
||||
// 将一些 quill 自带的事件传递出去 |
||||
ins.on('text-change', (delta, oldDelta, source) => { |
||||
this.$emit('on-text-change', delta, oldDelta, source); |
||||
}); |
||||
ins.on('selection-change', (range, oldRange, source) => { |
||||
this.$emit('on-selection-change', range, oldRange, source); |
||||
}); |
||||
ins.on('editor-change', (eventName, ...args) => { |
||||
this.$emit('on-editor-change', eventName, ...args); |
||||
}); |
||||
// 监听粘贴事件 |
||||
ins.root.addEventListener('paste', evt => { |
||||
if (evt.clipboardData && evt.clipboardData.files && evt.clipboardData.files.length) { |
||||
evt.preventDefault(); |
||||
// 检测是否粘贴的是图片 |
||||
[].forEach.call(evt.clipboardData.files, file => { |
||||
if (!file.type.match(/^image\/(gif|jpe?g|a?png|bmp)/i)) { |
||||
return |
||||
} |
||||
const param = new FormData() |
||||
param.append('file', file) |
||||
// 把图片上传到服务器，不然会直接把base64存到数据库 |
||||
this.$post(this.api.fileupload, param, { |
||||
headers: { "Content-Type": "multipart/form-data" } |
||||
}).then(res => { |
||||
var range = ins.getSelection() |
||||
if (range) { |
||||
// 在当前光标位置插入图片 |
||||
ins.insertEmbed(range.index, 'image', res.data.filesResult.fileUrl) |
||||
// 将光标移动到图片后面 |
||||
ins.setSelection(range.index + 1) |
||||
} |
||||
}).catch(res => {}) |
||||
}); |
||||
} |
||||
}, false) |
||||
}, |
||||
beforeUpload(file) { |
||||
this.loading = true; |
||||
}, |
||||
editorUploadSuccess(res) { |
||||
// 获取富文本组件实例 |
||||
let quill = this.Quill; |
||||
// 如果上传成功 |
||||
if (res.data.filesResult.fileUrl) { |
||||
// 获取光标所在位置 |
||||
let length = quill.getSelection().index; |
||||
// 插入图片，res为服务器返回的图片链接地址 |
||||
quill.insertEmbed(length, "image", res.data.filesResult.fileUrl); |
||||
// 调整光标到最后 |
||||
quill.setSelection(length + 1); |
||||
} else { |
||||
this.$message.error('图片插入失败') |
||||
} |
||||
this.loading = false; |
||||
} |
||||
} |
||||
}; |
||||
</script> |
||||
<style lang="scss" scoped> |
||||
.quill-no-border { |
||||
.ql-toolbar.ql-snow { |
||||
border: none; |
||||
border-bottom: 1px solid #e8eaec; |
||||
} |
||||
|
||||
.ql-container.ql-snow { |
||||
border: none; |
||||
} |
||||
} |
||||
|
||||
.else { |
||||
.ql-toolbar.ql-snow { |
||||
height: 0; |
||||
overflow: hidden; |
||||
padding: 0; |
||||
border-top: 0; |
||||
} |
||||
} |
||||
/deep/.ql-snow { |
||||
position: relative; |
||||
.ql-tooltip { |
||||
position: absolute !important; |
||||
top: 10px !important; |
||||
left: 10px !important; |
||||
transform: translateY(10px); |
||||
} |
||||
} |
||||
|
||||
</style> |
||||
@ -0,0 +1,16 @@ |
||||
export default [ |
||||
["bold", "italic", "underline", "strike"], |
||||
["blockquote", "code-block"], |
||||
[{ "header": 1 }, { "header": 2 }], |
||||
[{ "list": "ordered" }, { "list": "bullet" }], |
||||
[{ "script": "sub" }, { "script": "super" }], |
||||
[{ "indent": "-1" }, { "indent": "+1" }], |
||||
[{ "direction": "rtl" }], |
||||
[{ "size": ["small", false, "large", "huge"] }], |
||||
[{ "header": [1, 2, 3, 4, 5, 6, false] }], |
||||
[{ "color": [] }, { "background": [] }], |
||||
[{ "font": [] }], |
||||
[{ "align": [] }], |
||||
["clean"], |
||||
["link", "image", "video"] |
||||
]; |
||||
@ -0,0 +1,399 @@ |
||||
<template> |
||||
<!-- 实验报告 --> |
||||
<div class="wrap"> |
||||
<breadcrumb data="返回实验/我的数据"></breadcrumb> |
||||
<div class="content" :class="{loading}" id="pdfDom"> |
||||
<div style="text-align: right" v-if="!loading"> |
||||
<el-button size="mini" @click="editReport"> |
||||
{{ editing ? "保存" : "编辑" }} |
||||
</el-button> |
||||
<el-button type="primary" size="mini" @click="exportPage">导出报告</el-button> |
||||
</div> |
||||
<h6 class="r-title">标准实验报告</h6> |
||||
<div class="info"> |
||||
<h6 class="l-title"> |
||||
<img src="@/assets/images/report1.png" alt=""> |
||||
基本信息 |
||||
</h6> |
||||
<ul :class="['info-list', {edit: editing}]"> |
||||
<li> |
||||
<label>学生姓名：</label> |
||||
<el-input v-if="editing" v-model="infoData.userName" disabled></el-input> |
||||
<span v-else>{{ infoData.userName }}</span> |
||||
</li> |
||||
<li> |
||||
<label>学生学号：</label> |
||||
<el-input v-if="editing" v-model="infoData.workNumber" disabled></el-input> |
||||
<span v-else>{{ infoData.workNumber }}</span> |
||||
</li> |
||||
<li> |
||||
<label>实验时间：</label> |
||||
<el-input v-if="editing" v-model="infoData.submitTime" disabled></el-input> |
||||
<span v-else>{{ infoData.submitTime }}</span> |
||||
</li> |
||||
<li> |
||||
<label>实验成绩：</label> |
||||
<el-input v-if="editing" v-model="infoData.score" disabled></el-input> |
||||
<div v-else class="score-wrap"> |
||||
<em>{{ infoData.score }}</em> |
||||
<img src="@/assets/images/point.png" alt=""> |
||||
</div> |
||||
</li> |
||||
<li> |
||||
<label>学生班级：</label> |
||||
<el-input v-if="editing" v-model="infoData.className"></el-input> |
||||
<span v-else>{{ infoData.className }}</span> |
||||
</li> |
||||
<li> |
||||
<label>指导老师：</label> |
||||
<el-input v-if="editing" v-model="infoData.instructor"></el-input> |
||||
<span v-else>{{ infoData.instructor }}</span> |
||||
</li> |
||||
<li> |
||||
<label>实验学时：</label> |
||||
<el-input v-if="editing" v-model="infoData.period"></el-input> |
||||
<span v-else>{{ infoData.period }}</span> |
||||
</li> |
||||
</ul> |
||||
<div class="m-b-20"> |
||||
<h6 class="l-title"> |
||||
<img src="@/assets/images/report2.png" alt=""> |
||||
实验项目名称 |
||||
</h6> |
||||
<el-input v-if="editing" v-model="infoData.projectName" type="textarea"></el-input> |
||||
<div v-else class="pre-wrap" v-html="infoData.projectName"></div> |
||||
</div> |
||||
<div class="m-b-20"> |
||||
<h6 class="l-title"> |
||||
<img src="@/assets/images/report3.png" alt=""> |
||||
实验目的 |
||||
</h6> |
||||
<quill v-if="editing" :border="true" v-model="infoData.purpose" :height="150" /> |
||||
<div v-else :class="['pre-wrap', {edit: editing}]" v-html="infoData.purpose"></div> |
||||
</div> |
||||
<div class="m-b-20"> |
||||
<h6 class="l-title"> |
||||
<img src="@/assets/images/report4.png" alt=""> |
||||
实验数据 |
||||
</h6> |
||||
<el-table :data="expData" class="table" border stripe header-align="center"> |
||||
<el-table-column type="index" label="序号" align="center" width="60"> |
||||
<template slot-scope="scope"> |
||||
{{ scope.$index + 1 }} |
||||
</template> |
||||
</el-table-column> |
||||
<el-table-column prop="judgmentName" label="判分点" width="270" align="center"></el-table-column> |
||||
<el-table-column v-if='project' prop="judgmentName" label="考核点" align="center" width="150"> |
||||
<template slot-scope="scope"> |
||||
<div v-for="(item, index) in scope.row.lcRuleRecords" :key="index"> |
||||
<span> |
||||
<span>{{index+1}}. </span>{{item.name}} |
||||
</span> |
||||
</div> |
||||
</template> |
||||
</el-table-column> |
||||
<el-table-column prop="ruleAnswer" label="参考答案" style='word-wrap: break-word'> |
||||
<template slot-scope="scope"> |
||||
<div v-if='scope.row.lcRuleRecords'> |
||||
<div v-for="(item, index) in scope.row.lcRuleRecords" :key="index"> |
||||
<span> |
||||
<span>{{index+1}}. </span>{{item.ruleAnswer}} |
||||
</span> |
||||
</div> |
||||
</div> |
||||
<div v-else v-html="scope.row.referenceAnswer"></div> |
||||
</template> |
||||
</el-table-column> |
||||
<el-table-column prop="userAnswer" label="学生答案"> |
||||
<template slot-scope="scope"> |
||||
<div v-if='scope.row.lcRuleRecords'> |
||||
<div v-for="(item, index) in scope.row.lcRuleRecords" :key="index"> |
||||
<span v-if='item.userAnswer'> |
||||
<span>{{index+1}}. </span>{{item.userAnswer}} |
||||
</span> |
||||
<span v-else> |
||||
<span>{{index+1}}. </span>未填写 |
||||
</span> |
||||
</div> |
||||
</div> |
||||
<div v-else v-html='scope.row.answer' style='white-space: pre-wrap'></div> |
||||
<template v-if="scope.row.runThePictureList"> |
||||
<img v-for="(img, i) in scope.row.runThePictureList" :key="i" width="200" class="result-pic" :src="img" alt=""> |
||||
</template> |
||||
</template> |
||||
</el-table-column> |
||||
<el-table-column prop="quesScore" label="分值" width="80" align="center"></el-table-column> |
||||
<el-table-column prop="score" label="得分" width="80" align="center"></el-table-column> |
||||
</el-table> |
||||
</div> |
||||
<div class="m-b-20"> |
||||
<h6 class="l-title"> |
||||
<img src="@/assets/images/report5.png" alt=""> |
||||
实验总结与体会 |
||||
</h6> |
||||
<quill v-show="editing" :border="true" v-model="infoData.summarize" :height="150" /> |
||||
<div v-show="!editing" class="pre-wrap" v-html="infoData.summarize"></div> |
||||
</div> |
||||
</div> |
||||
</div> |
||||
</div> |
||||
</template> |
||||
|
||||
<script> |
||||
import { Loading } from "element-ui"; |
||||
import util from '@/util' |
||||
import breadcrumb from '@/components/breadcrumb' |
||||
import quill from "@/components/quill"; |
||||
export default { |
||||
data() { |
||||
return { |
||||
reportId: this.$route.query.reportId, |
||||
title: "实验报告", |
||||
form: {}, |
||||
infoData: {}, |
||||
expData: [], |
||||
editing: false, |
||||
loadIns: null, |
||||
loading: false, |
||||
project:false, |
||||
userScores: [] |
||||
}; |
||||
}, |
||||
components: { |
||||
breadcrumb, |
||||
quill |
||||
}, |
||||
mounted() { |
||||
this.getData() |
||||
}, |
||||
methods: { |
||||
getData() { // 查询详情 |
||||
const { reportId } = this |
||||
this.$get(`${this.api.reportDetail}?reportId=${reportId}`).then(({ report, userScores }) => { |
||||
this.form = report |
||||
const form = this.form |
||||
this.infoData = { |
||||
reportId, |
||||
className: form.className, |
||||
workNumber: form.workNumber, |
||||
experimentalClassName: form.experimentalClassName, |
||||
instructor: form.instructor, |
||||
period: form.period, |
||||
laboratory: form.laboratory, |
||||
submitTime: form.submitTime, |
||||
score: form.score, |
||||
userName: form.userName, |
||||
projectName: form.projectName, |
||||
purpose: form.purpose, |
||||
summarize: form.summarize |
||||
} |
||||
const data = report.data |
||||
this.userScores = userScores |
||||
// 如果没有data，则添加，否则，直接使用 |
||||
if (!data) { |
||||
this.handleList(userScores) |
||||
this.$post(this.api.editExperimentalData, { |
||||
reportId, |
||||
data: JSON.stringify(userScores) |
||||
}).then(res => {}).catch(err => {}) |
||||
} else { |
||||
this.handleList(userScores.find(e => e.lcRuleRecords) ? userScores : JSON.parse(data)) |
||||
} |
||||
}).catch(res => {}) |
||||
}, |
||||
// 处理实验数据 |
||||
handleList(list) { |
||||
this.project = list.find(e => e.lcRuleRecords) // 银行系统才有lcRuleRecords |
||||
if (this.project) { |
||||
list.map(e => { |
||||
e.assessmentPoint = '' |
||||
e.referenceAnswer = '' |
||||
e.answer = '' |
||||
e.lcRuleRecords.map((n, i) => { |
||||
e.assessmentPoint += `${i + 1}.${n.name}` |
||||
e.referenceAnswer += `${i + 1}.${n.ruleAnswer}` |
||||
e.answer += `${i + 1}.${n.userAnswer}` |
||||
}) |
||||
}) |
||||
} |
||||
this.expData = list |
||||
}, |
||||
exportPage() { |
||||
const form = Object.assign(this.form, this.infoData) |
||||
const list = JSON.parse(JSON.stringify(this.expData)) |
||||
list.map((e, i) => { |
||||
const item = this.userScores.find(n => n.judgmentId == e.judgmentId) |
||||
if (item && item.runThePicture) e.runThePicture = item.runThePicture |
||||
if (item && item.runThePictureList) e.runThePictureList = item.runThePictureList |
||||
e.id = i + 1 |
||||
if (e.referenceAnswer && typeof e.referenceAnswer === 'string') e.referenceAnswer = e.referenceAnswer.replace(/<[^>]+>/g, '').replace(/( |&|%s)/g, '').replace(/>/g, '>').replace(/</g, '<') |
||||
if (e.answer && typeof e.answer === 'string') e.answer = e.answer.replace(/<[^>]+>/g, '').replace(/( |&|%s)/g, '').replace(/>/g, '>').replace(/</g, '<') |
||||
}) |
||||
for (const i in form) { |
||||
if (form[i] && typeof form[i] === 'string') form[i] = form[i].replace(/<[^>]+>/g, '') |
||||
} |
||||
form.purpose = form.purpose.replace(/<[^>]+>/g, '') |
||||
this.loading = true; |
||||
this.loadIns = Loading.service({ |
||||
background: "#fff" |
||||
}); |
||||
this.$post(this.project ? this.api.exportBankExperimentReport : this.api.exportLabReport, { |
||||
...form, |
||||
experimentalData: list |
||||
}).then(res => { |
||||
this.loadIns.close(); |
||||
this.loading = false; |
||||
util.downloadFileDirect(`实验报告.docx`,new Blob([res])) |
||||
}).catch(res => { |
||||
this.loadIns.close(); |
||||
this.loading = false; |
||||
}) |
||||
}, |
||||
editReport() { // 编辑实验报告 |
||||
if (this.editing) { |
||||
this.$post(`${this.api.updateReport}`, this.infoData).then(res => { |
||||
this.editing = false; |
||||
this.$message.success('修改成功') |
||||
}).catch(err => {}); |
||||
} else { |
||||
this.editing = true; |
||||
} |
||||
} |
||||
} |
||||
}; |
||||
</script> |
||||
|
||||
<style lang="scss" scoped> |
||||
.m-b-20 { |
||||
margin-bottom: 20px; |
||||
} |
||||
.wrap { |
||||
padding: 12px 300px 20px; |
||||
} |
||||
code, kbd, samp{ |
||||
font-family: 'PingFang SC', "Helvetica Neue", Helvetica, "microsoft yahei", arial, STHeiTi, sans-serif; |
||||
word-wrap: break-word; |
||||
white-space: pre-wrap; |
||||
} |
||||
/deep/ pre{ |
||||
white-space: pre-wrap; /* css-3 */ |
||||
white-space: -moz-pre-wrap; /* Mozilla, since 1999 */ |
||||
white-space: pre-wrap; /* Opera 4-6 */ |
||||
white-space: -o-pre-wrap; /* Opera 7 */ |
||||
word-wrap: break-word; /* Internet Explorer 5.5+ */ |
||||
word-break:break-all; |
||||
overflow:hidden; |
||||
font-size: 12px; |
||||
font-weight:400; |
||||
font-family:'PingFang SC', "Helvetica Neue", Helvetica, "microsoft yahei", arial, STHeiTi, sans-serif |
||||
} |
||||
.content { |
||||
padding: 16px 0; |
||||
background: #fff; |
||||
&.loading { |
||||
padding-top: 30px; |
||||
} |
||||
.r-title { |
||||
margin-bottom: 40px; |
||||
font-size: 24px; |
||||
text-align: center; |
||||
color: #333; |
||||
} |
||||
.info { |
||||
padding: 20px 16px; |
||||
border: 1px solid #E1E6F2; |
||||
} |
||||
.l-title{ |
||||
display: flex; |
||||
align-items: center; |
||||
padding: 5px 8px; |
||||
margin-bottom: 12px; |
||||
font-size: 14px; |
||||
color: #333; |
||||
background-color: #F7F9FC; |
||||
img{ |
||||
margin-right: 5px; |
||||
} |
||||
} |
||||
.info-list { |
||||
display: flex; |
||||
flex-wrap: wrap; |
||||
padding: 10px 0 0 20px; |
||||
li { |
||||
display: inline-flex; |
||||
width: 25%; |
||||
padding: 0 10px; |
||||
margin-bottom: 34px; |
||||
} |
||||
&.edit { |
||||
li { |
||||
align-items: center; |
||||
} |
||||
} |
||||
label { |
||||
font-size: 14px; |
||||
color: #333; |
||||
white-space: nowrap; |
||||
} |
||||
span { |
||||
min-width: 150px; |
||||
padding: 0 10px 3px; |
||||
border-bottom: 1px solid #E1E6F2; |
||||
} |
||||
/deep/.el-input { |
||||
width: 174px; |
||||
} |
||||
} |
||||
.score-wrap { |
||||
position: relative; |
||||
min-width: 150px; |
||||
border-bottom: 1px solid #E1E6F2; |
||||
em { |
||||
position: absolute; |
||||
top: -12px; |
||||
left: 30px; |
||||
font-family: din; |
||||
font-size: 30px; |
||||
font-weight: 600; |
||||
color: #0B1D30; |
||||
} |
||||
img { |
||||
position: absolute; |
||||
bottom: -15px; |
||||
left: 0; |
||||
} |
||||
} |
||||
/deep/.el-textarea .el-textarea__inner, .pre-wrap { |
||||
min-height: 72px; |
||||
padding: 10px 16px; |
||||
font-size: 14px; |
||||
color: #333; |
||||
&.edit { |
||||
color: #ABB3C6; |
||||
border: 1px solid #CACFDB; |
||||
border-radius: 4px; |
||||
background-color: #F6F7F9; |
||||
} |
||||
} |
||||
/deep/ .table th { |
||||
background-color: #e1eaff !important; |
||||
.cell { |
||||
line-height: 35px; |
||||
color: #555555; |
||||
} |
||||
} |
||||
} |
||||
.result-pic { |
||||
margin: 10px 0; |
||||
} |
||||
@media (max-width: 1650px) { |
||||
.wrap { |
||||
padding: 12px 200px 20px; |
||||
} |
||||
} |
||||
@media (max-width: 1430px) { |
||||
.wrap { |
||||
padding: 12px 100px 20px; |
||||
} |
||||
} |
||||
</style> |
||||
Loading…
Reference in new issue