|
|
@@ -1,387 +1,442 @@
|
|
|
<template>
|
|
|
- <el-container class="chatBox">
|
|
|
- <el-header height='80px'>
|
|
|
- <el-row type="flex" justify='space-between' align = 'middle' style="height:100%;">
|
|
|
- <el-col class="tit nopd">
|
|
|
- <span @click="back()" class="back pointer"></span>
|
|
|
- <span>我要留言</span>
|
|
|
- </el-col>
|
|
|
- <el-col>
|
|
|
- </el-col>
|
|
|
- </el-row>
|
|
|
- </el-header>
|
|
|
- <div class="cationer">
|
|
|
-
|
|
|
- <el-main>
|
|
|
- <form action="">
|
|
|
- <div class="call">
|
|
|
- <label for="">
|
|
|
- <span>您的称呼</span>
|
|
|
- <span class="star"> *</span>
|
|
|
- </label>
|
|
|
- <el-input v-model="call" placeholder="请输入内容" style="paddiing:0 9px;"></el-input>
|
|
|
- </div>
|
|
|
- <div class="phone">
|
|
|
- <label for="">
|
|
|
- <span>您的手机号</span>
|
|
|
- <span class="star"> *</span>
|
|
|
- <span class="tips" v-if="error">(请输入正确的手机号)</span>
|
|
|
- </label>
|
|
|
- <el-input v-model="phone" @blur='sureinfor(1)' placeholder="请输入手机号" style="paddiing:0 9px;"></el-input>
|
|
|
- </div>
|
|
|
- <div class="qq">
|
|
|
- <label for="">
|
|
|
- <span>您的QQ号</span>
|
|
|
- </label>
|
|
|
- <el-input v-model="QQ" type="number" placeholder="请输入QQ号" style="paddiing:0 9px;"></el-input>
|
|
|
- </div>
|
|
|
- <div class="wx">
|
|
|
- <label for="">
|
|
|
- <span>您的微信号</span>
|
|
|
- </label>
|
|
|
- <el-input v-model="WX" placeholder="请输入微信号" style="paddiing:0 9px;"></el-input>
|
|
|
- </div>
|
|
|
- <div class="eMail">
|
|
|
- <label for="">
|
|
|
- <span>您的邮箱地址</span>
|
|
|
- <span class="star"> </span>
|
|
|
- <span class="tips" v-if="emailError">(请输入正确的邮箱地址)</span>
|
|
|
- </label>
|
|
|
- <el-input v-model="eMail" @blur='sureinfor(10)' placeholder="请输入邮箱地址" style="paddiing:0 9px;"></el-input>
|
|
|
- </div>
|
|
|
- <div class="leaveMsg">
|
|
|
- <label for="">
|
|
|
- <span>您的留言信息</span>
|
|
|
- <span class="star"> *</span>
|
|
|
- </label>
|
|
|
- <el-input type="textarea" placeholder="比赛中遇到作弊怎么办？" v-model="leaveInfor"></el-input>
|
|
|
- </div>
|
|
|
- <!-- 上传图片 -->
|
|
|
- <div class="addPhoto">
|
|
|
- <label for="">
|
|
|
- <span>上传图片</span>
|
|
|
- </label>
|
|
|
- <!-- :on-preview="handlePictureCardPreview" :on-remove="handleRemove" -->
|
|
|
- <el-upload style="margin-top:14px;"
|
|
|
- action="/api/index/upload/uploadImg"
|
|
|
- :before-upload ="beforeAvatarUpload"
|
|
|
- :on-progress="onProgress"
|
|
|
- :on-change ='uploadChange'
|
|
|
- :on-success ='uploadSuccess'
|
|
|
- :on-error="uploadError"
|
|
|
- :on-remove="handleRemove"
|
|
|
- :auto-upload="false"
|
|
|
- list-type="picture-card"
|
|
|
- ref="upload"
|
|
|
- >
|
|
|
- <!-- :file-list="uploadImg"
|
|
|
+ <el-container class="chatBox">
|
|
|
+ <el-header height='80px'>
|
|
|
+ <el-row type="flex" justify='space-between' align='middle' style="height:100%;">
|
|
|
+ <el-col class="tit nopd">
|
|
|
+ <span @click="back()" class="back pointer"></span>
|
|
|
+ <span>我要留言</span>
|
|
|
+ </el-col>
|
|
|
+ <el-col>
|
|
|
+ </el-col>
|
|
|
+ </el-row>
|
|
|
+ </el-header>
|
|
|
+ <div class="cationer">
|
|
|
+
|
|
|
+ <el-main>
|
|
|
+ <form action="">
|
|
|
+ <div class="call">
|
|
|
+ <label for="">
|
|
|
+ <span>您的称呼</span>
|
|
|
+ <span class="star"> *</span>
|
|
|
+ </label>
|
|
|
+ <el-input v-model="call" placeholder="请输入内容" style="paddiing:0 9px;"></el-input>
|
|
|
+ </div>
|
|
|
+ <div class="phone">
|
|
|
+ <label for="">
|
|
|
+ <span>您的手机号</span>
|
|
|
+ <span class="star"> *</span>
|
|
|
+ <span class="tips" v-if="error">(请输入正确的手机号)</span>
|
|
|
+ </label>
|
|
|
+ <el-input v-model="phone" @blur='sureinfor(1)' placeholder="请输入手机号"
|
|
|
+ style="paddiing:0 9px;"></el-input>
|
|
|
+ </div>
|
|
|
+ <div class="qq">
|
|
|
+ <label for="">
|
|
|
+ <span>您的QQ号</span>
|
|
|
+ </label>
|
|
|
+ <el-input v-model="QQ" type="number" placeholder="请输入QQ号" style="paddiing:0 9px;"></el-input>
|
|
|
+ </div>
|
|
|
+ <div class="wx">
|
|
|
+ <label for="">
|
|
|
+ <span>您的微信号</span>
|
|
|
+ </label>
|
|
|
+ <el-input v-model="WX" placeholder="请输入微信号" style="paddiing:0 9px;"></el-input>
|
|
|
+ </div>
|
|
|
+ <div class="eMail">
|
|
|
+ <label for="">
|
|
|
+ <span>您的邮箱地址</span>
|
|
|
+ <span class="star"> </span>
|
|
|
+ <span class="tips" v-if="emailError">(请输入正确的邮箱地址)</span>
|
|
|
+ </label>
|
|
|
+ <el-input v-model="eMail" @blur='sureinfor(10)' placeholder="请输入邮箱地址"
|
|
|
+ style="paddiing:0 9px;"></el-input>
|
|
|
+ </div>
|
|
|
+ <div class="leaveMsg">
|
|
|
+ <label for="">
|
|
|
+ <span>您的留言信息</span>
|
|
|
+ <span class="star"> *</span>
|
|
|
+ </label>
|
|
|
+ <el-input type="textarea" @blur="widthCheck($event.target, 100)" placeholder="比赛中遇到作弊怎么办？"
|
|
|
+ v-model="leaveInfor"></el-input>
|
|
|
+ </div>
|
|
|
+ <!-- 上传图片 -->
|
|
|
+ <div class="addPhoto">
|
|
|
+ <label for="">
|
|
|
+ <span>上传图片</span>
|
|
|
+ </label>
|
|
|
+ <!-- :on-preview="handlePictureCardPreview" :on-remove="handleRemove" -->
|
|
|
+ <el-upload style="margin-top:14px;"
|
|
|
+ action="/api/index/upload/uploadImg"
|
|
|
+ :before-upload="beforeAvatarUpload"
|
|
|
+ :on-progress="onProgress"
|
|
|
+ :on-change='uploadChange'
|
|
|
+ :on-success='uploadSuccess'
|
|
|
+ :on-error="uploadError"
|
|
|
+ :on-remove="handleRemove"
|
|
|
+ :auto-upload="false"
|
|
|
+ list-type="picture-card"
|
|
|
+ ref="upload"
|
|
|
+ >
|
|
|
+ <!-- :file-list="uploadImg"
|
|
|
-->
|
|
|
- <i slot="default" class="el-icon-plus"></i>
|
|
|
- </el-upload>
|
|
|
- <!-- :visible.sync="dialogVisible" -->
|
|
|
- <el-dialog >
|
|
|
- <img width="100%" :src="dialogImageUrl" alt="">
|
|
|
- </el-dialog>
|
|
|
- </div>
|
|
|
- <!-- 按钮 -->
|
|
|
- <div class="btn">
|
|
|
- <el-button type="primary" @click='sub()'>提交留言</el-button>
|
|
|
- </div>
|
|
|
- </form>
|
|
|
- </el-main>
|
|
|
- </div>
|
|
|
- </el-container>
|
|
|
+ <i slot="default" class="el-icon-plus"></i>
|
|
|
+ </el-upload>
|
|
|
+ <!-- :visible.sync="dialogVisible" -->
|
|
|
+ <el-dialog>
|
|
|
+ <img width="100%" :src="dialogImageUrl" alt="">
|
|
|
+ </el-dialog>
|
|
|
+ </div>
|
|
|
+ <!-- 按钮 -->
|
|
|
+ <div class="btn">
|
|
|
+ <el-button type="primary" @click='sub()'>提交留言</el-button>
|
|
|
+ </div>
|
|
|
+ </form>
|
|
|
+ </el-main>
|
|
|
+ </div>
|
|
|
+ </el-container>
|
|
|
</template>
|
|
|
<script>
|
|
|
-import '../css/index.css'
|
|
|
-export default {
|
|
|
- name:'leaveMsg',
|
|
|
- data(){
|
|
|
- return{
|
|
|
- call : '', //称呼
|
|
|
- error :false, //手机号错误提示
|
|
|
- leaveInfor :'', // 留言信息
|
|
|
- phone : '', //手机信息
|
|
|
- leaveMsg : '', // 留言信息
|
|
|
- eMail :'' ,
|
|
|
- dialogImageUrl:'',
|
|
|
- emailError:false,
|
|
|
- QQ:"",
|
|
|
- WX:'',
|
|
|
- uploadImg:[] //上传图片的数据集合
|
|
|
- }
|
|
|
- },
|
|
|
- methods:{
|
|
|
- // 返回传值到父组件
|
|
|
- back(){
|
|
|
- this.$emit('value',100)
|
|
|
- },
|
|
|
- // 提交
|
|
|
- sub(){
|
|
|
- if(this.call == ''){
|
|
|
- this.$message.error('请填写称呼!');
|
|
|
- }else if(this.phone == ''){
|
|
|
- this.$message.error('请填写手机号!');
|
|
|
- }else if( this.leaveInfor == '' ){
|
|
|
- this.$message.error('请填写留言信息!');
|
|
|
- }
|
|
|
- else{
|
|
|
- // 手动上传
|
|
|
- this.$refs.upload.submit();
|
|
|
- let _this = this;
|
|
|
- setTimeout(function(){
|
|
|
- let params = {'name' : _this.call,'email':_this.eMail,'content':_this.leaveInfor,'phone':_this.phone,'qq':_this.QQ,'wechat':_this.WX,'file':_this.uploadImg.join(',')}
|
|
|
- _this.$axios.post('/api/index/User/LeavingMessage',params).then(res =>{
|
|
|
- console.log('res',res)
|
|
|
- if(res.data.code == 1){
|
|
|
- _this.$message.success('留言成功')
|
|
|
- _this.$emit('value',10);
|
|
|
- }
|
|
|
- })
|
|
|
- },500)
|
|
|
- }
|
|
|
- },
|
|
|
- // 失去焦点时验证
|
|
|
- sureinfor(type){
|
|
|
- if(type == 1){
|
|
|
- if(!/^1[34578]\d{9}$/.test(this.phone)){
|
|
|
- this.error = true;
|
|
|
- this.phone = '';
|
|
|
- }else{
|
|
|
- this.error = false;
|
|
|
- }
|
|
|
- }else if(type == 10){
|
|
|
- if(!/^([a-zA-Z]|[0-9])(\w|\-)+@[a-zA-Z0-9]+\.([a-zA-Z]{2,4})$/.test(this.eMail)){
|
|
|
- this.emailError = true;
|
|
|
- this.eMail = '';
|
|
|
- }else{
|
|
|
- this.emailError = false;
|
|
|
- }
|
|
|
- }
|
|
|
- },
|
|
|
- // 上传之前
|
|
|
- beforeAvatarUpload(file){
|
|
|
- const isJPG = file.type =='image/jpeg'||'image/jpg'||'image/png'||'image/svg';
|
|
|
- if (!isJPG) {
|
|
|
- this.$message.error('上传只能是图片格式!');
|
|
|
- }
|
|
|
- return isJPG
|
|
|
- },
|
|
|
- // 上传成功时的回调
|
|
|
- uploadSuccess(res,file){
|
|
|
- // console.log('res',file)
|
|
|
- this.uploadImg.push(URL.createObjectURL(file.raw))
|
|
|
- // console.log(this.uploadImg)
|
|
|
- return this.uploadImg
|
|
|
- },
|
|
|
- // 发送中
|
|
|
- onProgress(){
|
|
|
-
|
|
|
- },
|
|
|
- // 上传失败
|
|
|
- uploadError(){
|
|
|
- this.$message.error('上传失败，请重新上传')
|
|
|
- },
|
|
|
- handleRemove(file, fileList) {
|
|
|
- // console.log('123',fileList)
|
|
|
- // 重置为空数组赋值
|
|
|
- // this.uploadImg = []
|
|
|
- // fileList.forEach((res,index) => {
|
|
|
- // this.uploadImg.push(URL.createObjectURL(res.raw))
|
|
|
- // });
|
|
|
- // console.log(this.uploadImg)
|
|
|
- },
|
|
|
- // 每次改变图片状态返回的回调
|
|
|
- uploadChange(file,fileList){
|
|
|
- console.log('`112321',fileList)
|
|
|
- },
|
|
|
- }
|
|
|
-}
|
|
|
+ import '../css/index.css'
|
|
|
+
|
|
|
+ export default {
|
|
|
+ name: 'leaveMsg',
|
|
|
+ data() {
|
|
|
+ return {
|
|
|
+ call: '', //称呼
|
|
|
+ error: false, //手机号错误提示
|
|
|
+ leaveInfor: '', // 留言信息
|
|
|
+ phone: '', //手机信息
|
|
|
+ leaveMsg: '', // 留言信息
|
|
|
+ eMail: '',
|
|
|
+ dialogImageUrl: '',
|
|
|
+ emailError: false,
|
|
|
+ QQ: "",
|
|
|
+ WX: '',
|
|
|
+ uploadImg: [] //上传图片的数据集合
|
|
|
+ }
|
|
|
+ },
|
|
|
+ methods: {
|
|
|
+ // 返回传值到父组件
|
|
|
+ back() {
|
|
|
+ this.$emit('value', 100)
|
|
|
+ },
|
|
|
+ // 提交
|
|
|
+ sub() {
|
|
|
+ if (this.call == '') {
|
|
|
+ this.$message.error('请填写称呼!');
|
|
|
+ } else if (this.phone == '') {
|
|
|
+ this.$message.error('请填写手机号!');
|
|
|
+ } else if (this.leaveInfor == '') {
|
|
|
+ this.$message.error('请填写留言信息!');
|
|
|
+ } else {
|
|
|
+ // 手动上传
|
|
|
+ this.$refs.upload.submit();
|
|
|
+ let _this = this;
|
|
|
+ setTimeout(function () {
|
|
|
+ let params = {
|
|
|
+ 'name': _this.call,
|
|
|
+ 'email': _this.eMail,
|
|
|
+ 'content': _this.leaveInfor,
|
|
|
+ 'phone': _this.phone,
|
|
|
+ 'qq': _this.QQ,
|
|
|
+ 'wechat': _this.WX,
|
|
|
+ 'file': _this.uploadImg.join(',')
|
|
|
+ }
|
|
|
+ _this.$axios.post('/api/index/User/LeavingMessage', params).then(res => {
|
|
|
+ console.log('res', res)
|
|
|
+ if (res.data.code == 1) {
|
|
|
+ _this.$message.success('留言成功')
|
|
|
+ _this.$emit('value', 10);
|
|
|
+ }
|
|
|
+ })
|
|
|
+ }, 500)
|
|
|
+ }
|
|
|
+ },
|
|
|
+ widthCheck(str, len) {
|
|
|
+ var temp = 0
|
|
|
+ for (var i = 0; i < str.value.length; i++) {
|
|
|
+ if (str.value.length < 4) {
|
|
|
+ str.value = ''
|
|
|
+ }
|
|
|
+ }
|
|
|
+ },
|
|
|
+
|
|
|
+ // 失去焦点时验证
|
|
|
+ sureinfor(type) {
|
|
|
+ if (type == 1) {
|
|
|
+ if (!/^1[34578]\d{9}$/.test(this.phone)) {
|
|
|
+ this.error = true;
|
|
|
+ this.phone = '';
|
|
|
+ } else {
|
|
|
+ this.error = false;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ else if (type == 10) {
|
|
|
+ if (!/^([a-zA-Z]|[0-9])(\w|\-)+@[a-zA-Z0-9]+\.([a-zA-Z]{2,4})$/.test(this.eMail)) {
|
|
|
+ this.emailError = true;
|
|
|
+ this.eMail = '';
|
|
|
+ } else {
|
|
|
+ this.emailError = false;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ },
|
|
|
+ // 上传之前
|
|
|
+ beforeAvatarUpload(file) {
|
|
|
+ const isJPG = file.type == 'image/jpeg' || 'image/jpg' || 'image/png' || 'image/svg';
|
|
|
+ if (!isJPG) {
|
|
|
+ this.$message.error('上传只能是图片格式!');
|
|
|
+ }
|
|
|
+ return isJPG
|
|
|
+ },
|
|
|
+ // 上传成功时的回调
|
|
|
+ uploadSuccess(res, file) {
|
|
|
+ // console.log('res',file)
|
|
|
+ this.uploadImg.push(URL.createObjectURL(file.raw))
|
|
|
+ // console.log(this.uploadImg)
|
|
|
+ return this.uploadImg
|
|
|
+ },
|
|
|
+ // 发送中
|
|
|
+ onProgress() {
|
|
|
+
|
|
|
+ },
|
|
|
+ // 上传失败
|
|
|
+ uploadError() {
|
|
|
+ this.$message.error('上传失败，请重新上传')
|
|
|
+ },
|
|
|
+ handleRemove(file, fileList) {
|
|
|
+ // console.log('123',fileList)
|
|
|
+ // 重置为空数组赋值
|
|
|
+ // this.uploadImg = []
|
|
|
+ // fileList.forEach((res,index) => {
|
|
|
+ // this.uploadImg.push(URL.createObjectURL(res.raw))
|
|
|
+ // });
|
|
|
+ // console.log(this.uploadImg)
|
|
|
+ },
|
|
|
+ // 每次改变图片状态返回的回调
|
|
|
+ uploadChange(file, fileList) {
|
|
|
+ console.log('`112321', fileList)
|
|
|
+ },
|
|
|
+ }
|
|
|
+ }
|
|
|
</script>
|
|
|
<style scoped>
|
|
|
- .chatBox{
|
|
|
- width: 700px;
|
|
|
- }
|
|
|
-
|
|
|
- .el-header{
|
|
|
- background:linear-gradient(90deg,rgba(22,84,209,1) 0%,rgba(9,52,173,1) 100%);
|
|
|
- box-shadow:0px 3px 3px rgba(0,0,0,0.2);
|
|
|
- }
|
|
|
- .tit{
|
|
|
- height: 100%;
|
|
|
- line-height: 80px;
|
|
|
- text-align: left;
|
|
|
- padding-left: 20px;
|
|
|
- }
|
|
|
- .tit span{
|
|
|
- font-size: 18px;
|
|
|
- }
|
|
|
- .el-col span{
|
|
|
- font-size: 18px;
|
|
|
- color: #FFFFFF;
|
|
|
- }
|
|
|
- .imgBox{
|
|
|
- text-align: right;
|
|
|
- }
|
|
|
- .imgBox img{
|
|
|
- margin-right: 20px;
|
|
|
- }
|
|
|
- .imgBox img:nth-last-child(1){
|
|
|
- margin-right: 0
|
|
|
- }
|
|
|
- .el-main{
|
|
|
- background: #fff;
|
|
|
- width: 445px;
|
|
|
- padding: 0;
|
|
|
- }
|
|
|
- .el-aside{
|
|
|
- background: #F5F5F5;
|
|
|
- width: 255px;
|
|
|
- }
|
|
|
- .cationer,.artificial{
|
|
|
- display: flex;
|
|
|
- justify-content: space-between;
|
|
|
- /* align-items: center; */
|
|
|
- }
|
|
|
- .rt{
|
|
|
- width: 255px;
|
|
|
- box-sizing:inherit;
|
|
|
- }
|
|
|
- .artificial{
|
|
|
- /* width: 150px; */
|
|
|
- /* padding:0 20px; */
|
|
|
- margin-top: 23px;
|
|
|
- margin-bottom: 9px;
|
|
|
- vertical-align: middle;
|
|
|
- /* flex-direction: column;*/
|
|
|
-
|
|
|
- }
|
|
|
- .infor div{
|
|
|
- margin-bottom: 3px;
|
|
|
- }
|
|
|
- .infor div span,.autograph span{
|
|
|
- color: #999999;
|
|
|
- font-size: 14px;
|
|
|
- font-weight:400;
|
|
|
- }
|
|
|
- .infor div span:nth-child(2),.autograph span:nth-child(2){
|
|
|
- color: #666666;
|
|
|
- margin-left: 4px;
|
|
|
- }
|
|
|
- .headPortrait{
|
|
|
- width: 100px;
|
|
|
- height: 100px;
|
|
|
- }
|
|
|
- .autograph{
|
|
|
- margin-bottom: 11px;
|
|
|
- }
|
|
|
- .advent{
|
|
|
- border-top: 1px solid #DDDDDD;
|
|
|
- padding: 20px;
|
|
|
- }
|
|
|
- .advent img{
|
|
|
- width: 215px;
|
|
|
- height: 350px;
|
|
|
- }
|
|
|
- .pd{
|
|
|
- padding: 20px;
|
|
|
- }
|
|
|
- .pd20{
|
|
|
- padding: 0 20px;
|
|
|
- }
|
|
|
-/* 留言框 */
|
|
|
-.el-main{
|
|
|
- padding: 20px 20px 23px 20px;
|
|
|
- position: relative;
|
|
|
- height: 600px;
|
|
|
- overflow: auto;
|
|
|
-}
|
|
|
-
|
|
|
-label{
|
|
|
- font-size: 14px;
|
|
|
- color: #666666;
|
|
|
-
|
|
|
-}
|
|
|
-.el-input{
|
|
|
- margin: 10px 0 20px;
|
|
|
- color: #333333;
|
|
|
-}
|
|
|
-
|
|
|
-.star{
|
|
|
- color: #F04992;
|
|
|
- vertical-align: middle;
|
|
|
-
|
|
|
-}
|
|
|
-.tips{
|
|
|
- font-size: 12px;
|
|
|
- color: #F04992;
|
|
|
- margin-left: 20px;
|
|
|
-}
|
|
|
-.addPhoto{
|
|
|
- margin: 20px 0 0;
|
|
|
-}
|
|
|
-.addPhoto label{
|
|
|
- margin-bottom: 14px;
|
|
|
-}
|
|
|
-.el-textarea{
|
|
|
- margin-top: 10px;
|
|
|
-}
|
|
|
-.btn{
|
|
|
- position: absolute;
|
|
|
- /* bottom: 23px; */
|
|
|
- right: 20px;
|
|
|
-}
|
|
|
-.el-button{
|
|
|
- width: 120px;
|
|
|
- height: 48px;
|
|
|
- background:linear-gradient(90deg,rgba(22,84,209,1) 0%,rgba(9,52,173,1) 100%);
|
|
|
- box-shadow:0px 3px 3px rgba(0,0,0,0.2);
|
|
|
- border-radius:10px;
|
|
|
-}
|
|
|
-.back{
|
|
|
- display: inline-block;
|
|
|
- width: 25px;
|
|
|
- height: 25px;
|
|
|
- background: url("./../assets/st-img/back.png") no-repeat;
|
|
|
- background-size: 100% 100%;
|
|
|
- vertical-align: middle;
|
|
|
-}
|
|
|
-.nopd{
|
|
|
- padding: 0;
|
|
|
-}
|
|
|
- /* 顶部三个图标 */
|
|
|
- .imgBox i{
|
|
|
- display: inline-block;
|
|
|
- width: 25px;
|
|
|
- height: 25px;
|
|
|
- margin-right: 20px;
|
|
|
- background: url("./../assets/st-img/pj.png") no-repeat;
|
|
|
- background-size: 100% 100%;
|
|
|
- vertical-align: middle;
|
|
|
- }
|
|
|
-
|
|
|
- i.scActy{
|
|
|
- background: #1654D1 url("./../assets/st-img/pjhover.png") no-repeat;
|
|
|
- width: 33px;
|
|
|
- height: 33px;
|
|
|
-
|
|
|
- background-position: 5px;
|
|
|
- }
|
|
|
- .imgBox .syActy{
|
|
|
- background:#1654D1 url("./../assets/st-img/jzsy.png") no-repeat;
|
|
|
- width: 33px;
|
|
|
- height: 33px;
|
|
|
- background-position: 5px;
|
|
|
- }
|
|
|
- .imgBox .sqActy{
|
|
|
- background: #1654D1 url("./../assets/st-img/sq2.png") no-repeat;
|
|
|
- width: 33px;
|
|
|
- height: 33px;
|
|
|
- transform: rotate(180deg);
|
|
|
- background-position: 5px;
|
|
|
- }
|
|
|
- .pointer{
|
|
|
- cursor: pointer;
|
|
|
- }
|
|
|
+ .chatBox {
|
|
|
+ width: 700px;
|
|
|
+ }
|
|
|
+
|
|
|
+ .el-header {
|
|
|
+ background: linear-gradient(90deg, rgba(22, 84, 209, 1) 0%, rgba(9, 52, 173, 1) 100%);
|
|
|
+ box-shadow: 0px 3px 3px rgba(0, 0, 0, 0.2);
|
|
|
+ }
|
|
|
+
|
|
|
+ .tit {
|
|
|
+ height: 100%;
|
|
|
+ line-height: 80px;
|
|
|
+ text-align: left;
|
|
|
+ padding-left: 20px;
|
|
|
+ }
|
|
|
+
|
|
|
+ .tit span {
|
|
|
+ font-size: 18px;
|
|
|
+ }
|
|
|
+
|
|
|
+ .el-col span {
|
|
|
+ font-size: 18px;
|
|
|
+ color: #FFFFFF;
|
|
|
+ }
|
|
|
+
|
|
|
+ .imgBox {
|
|
|
+ text-align: right;
|
|
|
+ }
|
|
|
+
|
|
|
+ .imgBox img {
|
|
|
+ margin-right: 20px;
|
|
|
+ }
|
|
|
+
|
|
|
+ .imgBox img:nth-last-child(1) {
|
|
|
+ margin-right: 0
|
|
|
+ }
|
|
|
+
|
|
|
+ .el-main {
|
|
|
+ background: #fff;
|
|
|
+ width: 445px;
|
|
|
+ padding: 0;
|
|
|
+ }
|
|
|
+
|
|
|
+ .el-aside {
|
|
|
+ background: #F5F5F5;
|
|
|
+ width: 255px;
|
|
|
+ }
|
|
|
+
|
|
|
+ .cationer, .artificial {
|
|
|
+ display: flex;
|
|
|
+ justify-content: space-between;
|
|
|
+ /* align-items: center; */
|
|
|
+ }
|
|
|
+
|
|
|
+ .rt {
|
|
|
+ width: 255px;
|
|
|
+ box-sizing: inherit;
|
|
|
+ }
|
|
|
+
|
|
|
+ .artificial {
|
|
|
+ /* width: 150px; */
|
|
|
+ /* padding:0 20px; */
|
|
|
+ margin-top: 23px;
|
|
|
+ margin-bottom: 9px;
|
|
|
+ vertical-align: middle;
|
|
|
+ /* flex-direction: column;*/
|
|
|
+
|
|
|
+ }
|
|
|
+
|
|
|
+ .infor div {
|
|
|
+ margin-bottom: 3px;
|
|
|
+ }
|
|
|
+
|
|
|
+ .infor div span, .autograph span {
|
|
|
+ color: #999999;
|
|
|
+ font-size: 14px;
|
|
|
+ font-weight: 400;
|
|
|
+ }
|
|
|
+
|
|
|
+ .infor div span:nth-child(2), .autograph span:nth-child(2) {
|
|
|
+ color: #666666;
|
|
|
+ margin-left: 4px;
|
|
|
+ }
|
|
|
+
|
|
|
+ .headPortrait {
|
|
|
+ width: 100px;
|
|
|
+ height: 100px;
|
|
|
+ }
|
|
|
+
|
|
|
+ .autograph {
|
|
|
+ margin-bottom: 11px;
|
|
|
+ }
|
|
|
+
|
|
|
+ .advent {
|
|
|
+ border-top: 1px solid #DDDDDD;
|
|
|
+ padding: 20px;
|
|
|
+ }
|
|
|
+
|
|
|
+ .advent img {
|
|
|
+ width: 215px;
|
|
|
+ height: 350px;
|
|
|
+ }
|
|
|
+
|
|
|
+ .pd {
|
|
|
+ padding: 20px;
|
|
|
+ }
|
|
|
+
|
|
|
+ .pd20 {
|
|
|
+ padding: 0 20px;
|
|
|
+ }
|
|
|
+
|
|
|
+ /* 留言框 */
|
|
|
+ .el-main {
|
|
|
+ padding: 20px 20px 23px 20px;
|
|
|
+ position: relative;
|
|
|
+ height: 600px;
|
|
|
+ overflow: auto;
|
|
|
+ }
|
|
|
+
|
|
|
+ label {
|
|
|
+ font-size: 14px;
|
|
|
+ color: #666666;
|
|
|
+
|
|
|
+ }
|
|
|
+
|
|
|
+ .el-input {
|
|
|
+ margin: 10px 0 20px;
|
|
|
+ color: #333333;
|
|
|
+ }
|
|
|
+
|
|
|
+ .star {
|
|
|
+ color: #F04992;
|
|
|
+ vertical-align: middle;
|
|
|
+
|
|
|
+ }
|
|
|
+
|
|
|
+ .tips {
|
|
|
+ font-size: 12px;
|
|
|
+ color: #F04992;
|
|
|
+ margin-left: 20px;
|
|
|
+ }
|
|
|
+
|
|
|
+ .addPhoto {
|
|
|
+ margin: 20px 0 0;
|
|
|
+ }
|
|
|
+
|
|
|
+ .addPhoto label {
|
|
|
+ margin-bottom: 14px;
|
|
|
+ }
|
|
|
+
|
|
|
+ .el-textarea {
|
|
|
+ margin-top: 10px;
|
|
|
+ }
|
|
|
+
|
|
|
+ .btn {
|
|
|
+ position: absolute;
|
|
|
+ /* bottom: 23px; */
|
|
|
+ right: 20px;
|
|
|
+ }
|
|
|
+
|
|
|
+ .el-button {
|
|
|
+ width: 120px;
|
|
|
+ height: 48px;
|
|
|
+ background: linear-gradient(90deg, rgba(22, 84, 209, 1) 0%, rgba(9, 52, 173, 1) 100%);
|
|
|
+ box-shadow: 0px 3px 3px rgba(0, 0, 0, 0.2);
|
|
|
+ border-radius: 10px;
|
|
|
+ }
|
|
|
+
|
|
|
+ .back {
|
|
|
+ display: inline-block;
|
|
|
+ width: 25px;
|
|
|
+ height: 25px;
|
|
|
+ background: url("./../assets/st-img/back.png") no-repeat;
|
|
|
+ background-size: 100% 100%;
|
|
|
+ vertical-align: middle;
|
|
|
+ }
|
|
|
+
|
|
|
+ .nopd {
|
|
|
+ padding: 0;
|
|
|
+ }
|
|
|
+
|
|
|
+ /* 顶部三个图标 */
|
|
|
+ .imgBox i {
|
|
|
+ display: inline-block;
|
|
|
+ width: 25px;
|
|
|
+ height: 25px;
|
|
|
+ margin-right: 20px;
|
|
|
+ background: url("./../assets/st-img/pj.png") no-repeat;
|
|
|
+ background-size: 100% 100%;
|
|
|
+ vertical-align: middle;
|
|
|
+ }
|
|
|
+
|
|
|
+ i.scActy {
|
|
|
+ background: #1654D1 url("./../assets/st-img/pjhover.png") no-repeat;
|
|
|
+ width: 33px;
|
|
|
+ height: 33px;
|
|
|
+
|
|
|
+ background-position: 5px;
|
|
|
+ }
|
|
|
+
|
|
|
+ .imgBox .syActy {
|
|
|
+ background: #1654D1 url("./../assets/st-img/jzsy.png") no-repeat;
|
|
|
+ width: 33px;
|
|
|
+ height: 33px;
|
|
|
+ background-position: 5px;
|
|
|
+ }
|
|
|
+
|
|
|
+ .imgBox .sqActy {
|
|
|
+ background: #1654D1 url("./../assets/st-img/sq2.png") no-repeat;
|
|
|
+ width: 33px;
|
|
|
+ height: 33px;
|
|
|
+ transform: rotate(180deg);
|
|
|
+ background-position: 5px;
|
|
|
+ }
|
|
|
+
|
|
|
+ .pointer {
|
|
|
+ cursor: pointer;
|
|
|
+ }
|
|
|
|
|
|
</style>
|
