767 lines
19 KiB
Vue
767 lines
19 KiB
Vue
<template>
|
|
<div style="height: 98%;">
|
|
<div class="crumbs">
|
|
<el-breadcrumb separator="/">
|
|
<el-breadcrumb-item>
|
|
<i class="el-icon-document-copy"></i> Artcile Html
|
|
</el-breadcrumb-item>
|
|
</el-breadcrumb>
|
|
</div>
|
|
<div class="container" style="height: 95%;min-width: 1000px;background-color: #fafafa;padding: 10px;">
|
|
<el-row :gutter="20" style="height: 102%;">
|
|
<el-col :span="24" style="height: 100%;">
|
|
<div class="type_MTxt">
|
|
<h3 class="man_Title">{{detailMes.title}}ea quisquam modi ratione in, ducimus quia. Neque
|
|
reiciendis nihil illum!</h3>
|
|
<div>
|
|
<div v-for="(item,index) in Main_List" :class="item.check?'C_style':''">
|
|
<el-checkbox v-model="item.check" class="checkMain" @change="chooseMain($event,item)">
|
|
</el-checkbox>
|
|
<p v-html="item.text"></p>
|
|
<font v-if="item.getnum!=0" class="chNumer">{{item.getnum}}</font>
|
|
<b class="MaxBtn" @click="MTxtEdit(item,index)"
|
|
style="background-color: #006699;right: 120px;">
|
|
<i class="el-icon-edit"></i>
|
|
</b>
|
|
<b class="MaxBtn" @click="MTxtPic(item,index)"
|
|
style="background-color: #13bc20;right: 80px;">
|
|
<i class="el-icon-picture-outline"></i>
|
|
</b>
|
|
<b class="MaxBtn" @click="MTxtTable(item,index)"
|
|
style="background-color: #b6a109;right:40px;">
|
|
<i class="el-icon-document-add"></i>
|
|
</b>
|
|
|
|
<b class="MaxBtn" @click="MTxtDelet(item,index)"
|
|
style="background-color: #bc1a13;right: 0px;">
|
|
<i class="el-icon-delete"></i>
|
|
</b>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</el-col>
|
|
<el-col :span="8" style="height: 100%;">
|
|
<p class="type_Gbtn" @click="trsanGtp">
|
|
<i class="el-icon-document-copy" style="margin-right: 5px;"></i>
|
|
TMRGTP Proofreading
|
|
</p>
|
|
<div style="height: 91.5%;overflow-y: scroll;" v-if="ChGtp_List.length!=0">
|
|
<div class="type_CHar" v-for="(item,index) in ChGtp_List">
|
|
<p v-html="item.text"></p>
|
|
<font class="chNumer">{{index+1}}</font>
|
|
<font class="chReple" @click="replceChGpr(item)">replace</font>
|
|
</div>
|
|
</div>
|
|
</el-col>
|
|
</el-row>
|
|
|
|
</div>
|
|
|
|
|
|
<!--修改文本 -->
|
|
<el-dialog title="Modify Text" :visible.sync="txtVisible" width="800px" :close-on-click-modal="false">
|
|
<el-form ref="editMes" :model="txtStyle" label-width="10px">
|
|
<!-- <el-form-item label="">
|
|
<p style="color: #006699;font-weight: bold;">Preview :</p>
|
|
<p v-html="txtStyle.text" style="line-height: 24px;word-wrap: break-word;word-break: normal;"></p>
|
|
</el-form-item> -->
|
|
<el-form-item label="">
|
|
<el-input type="textarea" placeholder="Please enter the table content..." v-model="txtStyle.text"
|
|
autosize>
|
|
</el-input>
|
|
</el-form-item>
|
|
</el-form>
|
|
<span slot="footer" class="dialog-footer">
|
|
<el-button @click="txtVisible=false">
|
|
Cancel
|
|
</el-button>
|
|
<el-button type="primary" @click="saveTxt">
|
|
<i class="el-icon-finished" style="margin-right: 5px;"></i>
|
|
Save
|
|
</el-button>
|
|
</span>
|
|
</el-dialog>
|
|
|
|
|
|
<!--添加图片 -->
|
|
<el-dialog title="Insert Picture" :visible.sync="pictVisible" width="800px" :close-on-click-modal="false">
|
|
<el-form ref="editMes" :model="picStyle" label-width="150px">
|
|
<el-form-item>
|
|
<span slot="label">
|
|
<font style="color: #f56c6c;margin-right: 5px;">*</font>
|
|
Picture :
|
|
</span>
|
|
<el-upload class="avatar-uploader" :action="baseUrl+'api/Production/up_articlepic_file'"
|
|
:show-file-list="false" name="articleicon" :on-success="handleAvatarSuccess"
|
|
:on-error="handleAvatarError" :before-upload="beforeAvatarUpload">
|
|
<img v-if="picStyle.imageUrl" :src="picStyle.imageUrl" class="avatar">
|
|
<i v-else class="el-icon-plus avatar-uploader-icon"></i>
|
|
</el-upload>
|
|
</el-form-item>
|
|
<el-form-item label="Bottom Title :">
|
|
<el-input placeholder="Please enter the table title..." v-model="picStyle.titleBot">
|
|
</el-input>
|
|
</el-form-item>
|
|
<el-form-item label="Bottom Describe :">
|
|
<el-input placeholder="Please enter the table describe..." v-model="picStyle.titleDes">
|
|
</el-input>
|
|
</el-form-item>
|
|
</el-form>
|
|
<p style="margin: 20px 0;text-align: right;">
|
|
<el-button type="warning" plain
|
|
@click="picStyle.picUrl='';picStyle.titleBot='';picStyle.titleDes='';picStyle.imageUrl='';">
|
|
<i class="el-icon-refresh" style="margin-right: 5px;"></i>Empty
|
|
</el-button>
|
|
<el-button type="primary" plain @click="">
|
|
<i class="el-icon-sort" style="margin-right: 5px;"></i>Generate Picture
|
|
</el-button>
|
|
</p>
|
|
<div class="lineStyle" v-if="picStyle.picUrl!=''">
|
|
<div>
|
|
<span class="title">Picture Width :</span>
|
|
<el-input v-model="picStyle.picwith" style="width: 120px;">
|
|
<template slot="append">px</template>
|
|
</el-input>
|
|
</div>
|
|
</div>
|
|
<div style="padding: 0 20px;" v-if="picStyle.picUrl!=''">
|
|
<div style="text-align: center;">
|
|
<img :src="baseUrl+'public/'+picStyle.picUrl" :style="'width:'+picStyle.picwith+'px'">
|
|
</div>
|
|
<p style="text-align: center;margin: 0 0 15px 0;font-size: 12px;color: #006699;">
|
|
<b>{{picStyle.titleBot}}</b>
|
|
</p>
|
|
<p style="text-align: center;margin: 10px 0 0 0;font-size: 12px;">{{picStyle.titleDes}}</p>
|
|
</div>
|
|
<span slot="footer" class="dialog-footer" v-if="picStyle.picUrl!=''">
|
|
<el-button type="primary" @click="savePic">
|
|
<i class="el-icon-finished" style="margin-right: 5px;"></i>
|
|
Save Picture
|
|
</el-button>
|
|
</span>
|
|
</el-dialog>
|
|
|
|
|
|
<!-- 添加表格 -->
|
|
<el-dialog title="Insert Table" :visible.sync="threeVisible" width="1000px" :close-on-click-modal="false">
|
|
<el-form ref="editMes" :model="lineStyle" label-width="115px">
|
|
<el-form-item label="Top Title :">
|
|
<el-input placeholder="Please enter the table title..." v-model="lineStyle.titleTop">
|
|
</el-input>
|
|
</el-form-item>
|
|
<el-form-item>
|
|
<span slot="label">
|
|
<font style="color: #f56c6c;margin-right: 5px;">*</font>
|
|
Content :
|
|
</span>
|
|
<el-input type="textarea" :rows="5" placeholder="Please enter the table content..."
|
|
v-model="lineStyle.textarea">
|
|
</el-input>
|
|
</el-form-item>
|
|
<el-form-item label="Bottom Title :">
|
|
<el-input placeholder="Please enter the table title..." v-model="lineStyle.titleBot">
|
|
</el-input>
|
|
</el-form-item>
|
|
</el-form>
|
|
|
|
|
|
<p style="margin: 20px 0;text-align: right;">
|
|
<el-button type="warning" plain
|
|
@click="lineStyle.textarea='';lineStyle.titleTop='';lineStyle.titleBot='';lineTable=[]">
|
|
<i class="el-icon-refresh" style="margin-right: 5px;"></i>Empty
|
|
</el-button>
|
|
<el-button type="primary" plain @click="CopyExcelToTable">
|
|
<i class="el-icon-sort" style="margin-right: 5px;"></i>Generate Table
|
|
</el-button>
|
|
</p>
|
|
<div class="lineStyle" v-if="lineTable.length!=0">
|
|
<div>
|
|
<span class="title">Table All Width :</span>
|
|
<el-input v-model="lineStyle.tabwith" style="width: 120px;">
|
|
<template slot="append">%</template>
|
|
</el-input>
|
|
</div>
|
|
<div>
|
|
<div v-for="(item,index) in lineStyle.arrwith" class="styArry">
|
|
<span class="title">Column <b style="color: #006699;">{{index+1}}</b> :</span>
|
|
<el-input v-model="lineStyle.arrwith[index]" style="width: 100px;">
|
|
<template slot="append">%</template>
|
|
</el-input>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div style="padding: 0 20px;" v-if="lineTable.length!=0">
|
|
<p style="text-align: center;margin: 0 0 10px 0;font-size: 12px;color: #006699;">
|
|
<b>{{lineStyle.titleTop}}</b>
|
|
</p>
|
|
<div class="lineAll" :style="'width:'+lineStyle.tabwith+'%'">
|
|
<div v-for="item in lineTable" class="lineTit">
|
|
<div v-for="(eqrt,iner) in item" :style="'width:'+lineStyle.arrwith[iner]+'%'">
|
|
{{eqrt}}
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<p style="text-align: center;margin: 10px 0 0 0;font-size: 12px;">{{lineStyle.titleBot}}</p>
|
|
</div>
|
|
|
|
<span slot="footer" class="dialog-footer">
|
|
<el-button type="primary" @click="saveLine" v-if="lineTable.length!=0">
|
|
<i class="el-icon-finished" style="margin-right: 5px;"></i>
|
|
Save Table
|
|
</el-button>
|
|
</span>
|
|
</el-dialog>
|
|
|
|
|
|
</div>
|
|
</template>
|
|
|
|
<script>
|
|
export default {
|
|
data() {
|
|
return {
|
|
baseUrl: this.Common.baseUrl,
|
|
mediaUrl: this.Common.mediaUrl,
|
|
Art_Id: this.$route.query.id,
|
|
detailMes: {},
|
|
Main_List: [],
|
|
check_List: [],
|
|
ChGtp_List: [],
|
|
lineStyle: {
|
|
titleTop: '',
|
|
titleBot: '',
|
|
textarea: '',
|
|
tabwith: '100',
|
|
arrwith: []
|
|
},
|
|
lineTable: [],
|
|
threeVisible: false,
|
|
picStyle: {
|
|
titleTop: '',
|
|
titleDes: '',
|
|
// picUrl: 'https://www.tmrjournals.cn/public/articleHTML/TMR/TMR20230213002/images/alternativeImage/TMR20230213002-F004.jpg',
|
|
picUrl: '',
|
|
imageUrl: '',
|
|
picwith: '500'
|
|
},
|
|
pictVisible: false,
|
|
txtStyle: {
|
|
text: ''
|
|
},
|
|
txtVisible: false,
|
|
};
|
|
},
|
|
|
|
created() {
|
|
this.getDate()
|
|
},
|
|
|
|
methods: {
|
|
// 获取数据
|
|
getDate() {
|
|
const loading = this.$loading({
|
|
lock: true,
|
|
text: 'Loading...',
|
|
spinner: 'el-icon-loading',
|
|
background: 'rgba(0, 0, 0, 0.7)'
|
|
});
|
|
|
|
// 获取文章信息
|
|
this.$api
|
|
.post('api/Production/getProductionMains', {
|
|
p_article_id: this.Art_Id
|
|
})
|
|
.then(res => {
|
|
if (res.code == 0) {
|
|
this.detailMes = res.data.mains
|
|
this.Main_List = []
|
|
for (let i = 0; i < this.detailMes.length; i++) {
|
|
this.Main_List.push({
|
|
p_main_id: this.detailMes[i].p_main_id,
|
|
text: this.detailMes[i].content,
|
|
value: i + 1,
|
|
getnum: 0,
|
|
check: false,
|
|
})
|
|
}
|
|
loading.close()
|
|
} else {
|
|
this.$message.error(res.msg);
|
|
loading.close()
|
|
}
|
|
})
|
|
.catch(err => {
|
|
this.$message.error(err);
|
|
loading.close()
|
|
});
|
|
|
|
},
|
|
|
|
|
|
// 选择段落
|
|
chooseMain(e, item) {
|
|
this.check_List = []
|
|
let allNUm = 1
|
|
for (var i = 0; i < this.Main_List.length; i++) {
|
|
if (this.Main_List[i].check) {
|
|
this.Main_List[i].getnum = allNUm
|
|
allNUm = allNUm + 1
|
|
this.check_List.push({
|
|
text: this.Main_List[i].text,
|
|
value: this.Main_List[i].value,
|
|
index: i,
|
|
p_main_id: this.Main_List[i].p_main_id,
|
|
})
|
|
}
|
|
}
|
|
console.log(this.check_List)
|
|
},
|
|
|
|
// 转化为gpt标准格式
|
|
trsanGtp() {
|
|
if (this.check_List.length == 0) {
|
|
this.$message.error('Please select a paragraph!');
|
|
} else {
|
|
this.ChGtp_List = JSON.parse(JSON.stringify(this.check_List))
|
|
console.log(this.ChGtp_List)
|
|
}
|
|
|
|
},
|
|
|
|
|
|
// 替换Gtp生成的内容
|
|
replceChGpr(val) {
|
|
this.Main_List[val.index].text = JSON.parse(JSON.stringify(val.text))
|
|
},
|
|
|
|
|
|
// 修改段落
|
|
MTxtEdit(val, num) {
|
|
this.txtVisible = true
|
|
this.txtStyle = JSON.parse(JSON.stringify(val))
|
|
this.txtStyle.index = num
|
|
},
|
|
|
|
// 图片段落
|
|
MTxtPic(val, num) {
|
|
this.picStyle.p_main_id = val.p_main_id;
|
|
this.picStyle.titleBot = '';
|
|
this.picStyle.titleDes = '';
|
|
this.picStyle.picUrl = '';
|
|
this.picStyle.imageUrl = ''
|
|
this.pictVisible = true
|
|
},
|
|
|
|
// 表格段落
|
|
MTxtTable(val, num) {
|
|
this.lineStyle.p_main_id = val.p_main_id;
|
|
this.lineStyle.textarea = '';
|
|
this.lineStyle.titleCon = '';
|
|
this.lineTable = [];
|
|
this.threeVisible = true
|
|
},
|
|
|
|
// 删除段落
|
|
MTxtDelet(val, num) {
|
|
this.$api
|
|
.post('api/Production/delProductionMain', {
|
|
p_main_id: val.p_main_id
|
|
})
|
|
.then(res => {
|
|
if (res.code == 0) {
|
|
this.txtVisible = false
|
|
} else {
|
|
this.$message.error(res.msg);
|
|
}
|
|
})
|
|
.catch(err => {
|
|
this.$message.error(err);
|
|
});
|
|
},
|
|
|
|
|
|
// 确定保存段落修改
|
|
saveTxt() {
|
|
this.$api
|
|
.post('api/Production/editProductionMain', {
|
|
p_main_id: this.txtStyle.p_main_id,
|
|
content: this.txtStyle.text
|
|
})
|
|
.then(res => {
|
|
if (res.code == 0) {
|
|
this.txtVisible = false
|
|
this.Main_List[this.txtStyle.index].text = JSON.parse(JSON.stringify(this.txtStyle.text))
|
|
} else {
|
|
this.$message.error(res.msg);
|
|
}
|
|
})
|
|
.catch(err => {
|
|
this.$message.error(err);
|
|
});
|
|
},
|
|
|
|
// 确定保存图片
|
|
savePic() {
|
|
|
|
},
|
|
|
|
// 表格转化
|
|
CopyExcelToTable() {
|
|
if (this.lineStyle.textarea == '') {
|
|
this.$message.error('Please fill in the table content!');
|
|
return
|
|
}
|
|
let txtRows = this.lineStyle.textarea.split("\n");
|
|
let txtColum = []
|
|
for (let i = 0; i < txtRows.length; i++) {
|
|
if (txtRows[i] != "") {
|
|
let columns = txtRows[i].split("\t");
|
|
let dataone = [];
|
|
for (let j = 0; j < columns.length; j++) {
|
|
dataone.push(columns[j]);
|
|
}
|
|
txtColum.push(dataone);
|
|
};
|
|
}
|
|
|
|
let arrwithNumer = Math.floor(100 / txtColum[0].length) - 2
|
|
this.lineStyle.arrwith = []
|
|
for (let i = 0; i < txtColum[0].length; i++) {
|
|
this.lineStyle.arrwith.push(arrwithNumer)
|
|
}
|
|
this.lineTable = txtColum
|
|
|
|
|
|
},
|
|
|
|
|
|
// 确定保存表格
|
|
saveLine() {
|
|
let dataTable = ''
|
|
for (let i = 0; i < this.lineTable.length; i++) {
|
|
let ArryDr = ''
|
|
let listHNem = ''
|
|
for (let j = 0; j < this.lineTable[i].length; j++) {
|
|
let ArrHtml = '<div style="width:' + this.lineStyle.arrwith[j] +
|
|
'%;line-height: 22px;vertical-align: middle;display: inline-block;padding: 0 1%;font-size: 14px;color: #606266;word-wrap: break-word;word-break: normal;">'
|
|
+ this.lineTable[i][j] +'</div>'
|
|
ArryDr = ArryDr + ArrHtml
|
|
}
|
|
|
|
if (i == 0) {
|
|
listHNem =
|
|
'<div style="display: flex;border-top: 2px solid #333333;border-bottom: 1px solid #333333;padding: 10px 0;font-weight: bold;margin-bottom: 20px;">' +
|
|
ArryDr + '</div>'
|
|
} else if (i == this.lineTable.length - 1) {
|
|
listHNem =
|
|
'<div style="display: flex;border-bottom: 2px solid #333333;padding:0 0 20px 0;">' +
|
|
ArryDr + '</div>'
|
|
ArryDr = ArryDr + listHNem
|
|
} else {
|
|
listHNem = '<div style="display: flex;padding:20px 0;">' + ArryDr + '</div>'
|
|
}
|
|
|
|
dataTable = dataTable + listHNem
|
|
}
|
|
dataTable = '<div style="width:' + this.lineStyle.tabwith + '%">' + dataTable + '</div>'
|
|
|
|
if (this.lineStyle.titleTop != '') {
|
|
dataTable = '<p style="text-align: center;margin: 0 0 10px 0;font-size: 12px;color: #006699;"><b>' +
|
|
this.lineStyle.titleTop + '</b></p>' + dataTable
|
|
}
|
|
|
|
if (this.lineStyle.titleBot != '') {
|
|
dataTable = dataTable+'<p style="text-align: center;margin: 10px 0 0 0;font-size: 12px;">' +
|
|
this.lineStyle.titleBot + '</p>'
|
|
}
|
|
|
|
|
|
console.log(dataTable)
|
|
},
|
|
|
|
|
|
// 上传图片
|
|
handleAvatarSuccess(res, file) {
|
|
if (res.code == 0) {
|
|
this.picStyle.picUrl = res.upurl;
|
|
} else {
|
|
this.$message.error(res.msg);
|
|
}
|
|
this.picStyle.imageUrl = URL.createObjectURL(file.raw);
|
|
},
|
|
handleAvatarError(res, file) {
|
|
|
|
},
|
|
beforeAvatarUpload(file) {
|
|
const isLt2M = file.size / 1024 / 1024 < 1;
|
|
if (!isLt2M) {
|
|
this.$message.error('Picture size cannot exceed 1M!');
|
|
}
|
|
return isLt2M;
|
|
},
|
|
|
|
|
|
},
|
|
|
|
};
|
|
</script>
|
|
|
|
<style scoped>
|
|
.lineStyle {
|
|
border-top: 1px solid #0066994d;
|
|
padding: 20px 20px 40px 20px;
|
|
}
|
|
|
|
.lineStyle>div {}
|
|
|
|
.lineStyle>div span.title {
|
|
font-size: 14px;
|
|
color: #606266;
|
|
margin: 0px 10px 0px 0px;
|
|
}
|
|
|
|
.lineStyle>div font.mark {
|
|
font-size: 14px;
|
|
color: #606266;
|
|
margin: 0px 0px 0px 10px;
|
|
}
|
|
|
|
.lineStyle .styArry {
|
|
display: inline-block;
|
|
margin: 15px 40px 0 0;
|
|
}
|
|
|
|
.lineStyle .styArry:nth-last-child(1) {
|
|
margin-right: 0;
|
|
}
|
|
|
|
.lineAll {
|
|
margin: 0 auto;
|
|
|
|
}
|
|
|
|
.lineAll .lineTit {
|
|
padding: 0 0 20px 0;
|
|
font-size: 14px;
|
|
}
|
|
|
|
.lineAll .lineTit:nth-child(1) {
|
|
border-top: 2px solid #333333;
|
|
border-bottom: 1px solid #333333;
|
|
padding: 10px 0;
|
|
font-weight: bold;
|
|
}
|
|
|
|
.lineAll .lineTit:nth-child(2) {
|
|
padding-top: 20px;
|
|
}
|
|
|
|
.lineAll .lineTit:nth-last-child(1) {
|
|
border-bottom: 2px solid #333333;
|
|
}
|
|
|
|
.lineAll .lineTit>div {
|
|
line-height: 22px;
|
|
vertical-align: middle;
|
|
display: inline-block;
|
|
padding: 0 1%;
|
|
}
|
|
|
|
|
|
|
|
.type_MTxt {
|
|
background-color: #fff;
|
|
padding: 0 10px;
|
|
box-shadow: 0 1px 3px rgb(16 17 19 / 6%);
|
|
border-radius: 12px;
|
|
height: 99%;
|
|
overflow-y: scroll;
|
|
position: relative;
|
|
}
|
|
|
|
|
|
.type_MTxt .man_Title {
|
|
margin: 0 -10px 20px -25px;
|
|
border-bottom: 1px solid #dde1eb;
|
|
box-shadow: 0 5px 5px -2px rgb(134 134 134);
|
|
padding: 12px 25px 8px 35px;
|
|
font-size: 15px;
|
|
line-height: 20px;
|
|
color: #333;
|
|
}
|
|
|
|
.type_MTxt>div>div {
|
|
position: relative;
|
|
padding: 10px 10px 10px 40px;
|
|
min-height: 22px;
|
|
border: 2px dashed #fff;
|
|
border-radius: 5px;
|
|
margin-bottom: 5px;
|
|
color: #606266;
|
|
}
|
|
|
|
|
|
.type_MTxt>div>div:hover {
|
|
background-color: #eaf3fe;
|
|
border: 2px dashed rgb(0 102 153 / 80%);
|
|
}
|
|
|
|
.type_MTxt>div>div.C_style {
|
|
background-color: rgb(0 102 153 / 10%);
|
|
border: 2px dashed rgb(0 102 153 / 10%);
|
|
color: #000;
|
|
}
|
|
|
|
.type_MTxt>div>div>.checkMain {
|
|
position: absolute;
|
|
left: 10px;
|
|
top: 12px;
|
|
}
|
|
|
|
.type_MTxt>div>div>p {
|
|
font-size: 14px;
|
|
line-height: 22px;
|
|
|
|
}
|
|
|
|
.type_MTxt>div>div .chNumer {
|
|
position: absolute;
|
|
top: -2px;
|
|
right: -1px;
|
|
border-radius: 3px;
|
|
font-size: 10px;
|
|
background-color: rgb(0 102 153 / 85%);
|
|
color: #fff;
|
|
padding: 0 6px;
|
|
}
|
|
|
|
.type_MTxt>div>div .MaxBtn {
|
|
position: absolute;
|
|
right: 0;
|
|
top: -1px;
|
|
color: #fff;
|
|
border-radius: 50px;
|
|
font-size: 15.5px;
|
|
padding: 5px 6px;
|
|
display: none;
|
|
opacity: 0.7;
|
|
}
|
|
|
|
.type_MTxt>div>div:hover .MaxBtn {
|
|
display: block;
|
|
}
|
|
|
|
.type_MTxt>div>div .MaxBtn:hover {
|
|
opacity: 1;
|
|
cursor: pointer;
|
|
}
|
|
|
|
.type_Gbtn {
|
|
color: #fff;
|
|
border-color: #006699;
|
|
background: #006699;
|
|
width: 100%;
|
|
height: 34px;
|
|
line-height: 34px;
|
|
text-align: center;
|
|
padding: 10px 0;
|
|
font-size: 17px;
|
|
border-radius: 8px;
|
|
font-weight: 500;
|
|
}
|
|
|
|
.type_Gbtn:hover {
|
|
box-shadow: 0 4px 14px rgb(0 102 153 / 30%);
|
|
cursor: pointer;
|
|
}
|
|
|
|
.type_CHar {
|
|
border-left: 4px solid rgba(0 102 153 / 20%);
|
|
border-radius: 5px;
|
|
padding: 10px 25px 10px 20px;
|
|
background-color: #fff;
|
|
margin: 15px 0 0 0;
|
|
font-size: 14px;
|
|
line-height: 22px;
|
|
position: relative;
|
|
}
|
|
|
|
.type_CHar .chNumer {
|
|
position: absolute;
|
|
top: 1px;
|
|
right: 5px;
|
|
border-radius: 3px;
|
|
font-size: 10px;
|
|
background-color: rgb(0 102 153 / 85%);
|
|
color: #fff;
|
|
padding: 0 6px;
|
|
}
|
|
|
|
.type_CHar .chReple {
|
|
position: absolute;
|
|
top: 1px;
|
|
right: 40px;
|
|
border-radius: 3px;
|
|
font-size: 10px;
|
|
background-color: rgb(223 109 11);
|
|
opacity: 0.85;
|
|
color: #fff;
|
|
padding: 0 6px;
|
|
display: none;
|
|
}
|
|
|
|
.type_CHar:hover .chReple {
|
|
display: block;
|
|
}
|
|
|
|
.type_CHar .chReple:hover {
|
|
opacity: 1;
|
|
cursor: pointer;
|
|
}
|
|
|
|
|
|
|
|
.avatar-uploader .el-upload {
|
|
border: 1px dashed #d9d9d9;
|
|
border-radius: 6px;
|
|
cursor: pointer;
|
|
position: relative;
|
|
overflow: hidden;
|
|
width: 100px;
|
|
height: 100px;
|
|
}
|
|
|
|
.avatar-uploader_small {
|
|
height: 100px;
|
|
}
|
|
|
|
.avatar-uploader .el-upload:hover {
|
|
border-color: #409EFF;
|
|
}
|
|
|
|
.avatar-uploader-icon {
|
|
font-size: 28px;
|
|
color: #8c939d;
|
|
width: 120px;
|
|
height: 120px;
|
|
line-height: 120px;
|
|
text-align: center;
|
|
}
|
|
|
|
.avatar-uploader_small .el-upload {
|
|
width: 80px;
|
|
height: 80px;
|
|
}
|
|
|
|
.avatar-uploader_small .avatar-uploader-icon {
|
|
line-height: 80px;
|
|
margin-left: -30px;
|
|
}
|
|
|
|
.avatar {
|
|
width: 120px;
|
|
height: 120px;
|
|
display: block;
|
|
}
|
|
</style>
|