|
|
@@ -0,0 +1,594 @@
|
|
|
+<template>
|
|
|
+ <div class="SignAcontract">
|
|
|
+ <div class="SignAcontract-content">
|
|
|
+ <div class="SignAcontract-content-right">
|
|
|
+ <div class="button-background" @click="control(0)"><el-button :disabled='index==1'>上一步</el-button></div>
|
|
|
+ <el-steps :active="index" align-center style="width: calc(100% - 212px);">
|
|
|
+ <el-step title="明细单"></el-step>
|
|
|
+ <el-step title="征迁协议"></el-step>
|
|
|
+ <el-step title="上传文件"></el-step>
|
|
|
+ <el-step title="完成"></el-step>
|
|
|
+ </el-steps>
|
|
|
+ <div class="button-background" @click="control(1)"><el-button>下一步</el-button></div>
|
|
|
+ </div>
|
|
|
+ <div class="SignAcontract-content-lent">
|
|
|
+ <div click="printContent">
|
|
|
+
|
|
|
+ </div>
|
|
|
+ <div class="Upload" v-if="index==3">
|
|
|
+ <div class="Upload-butom">
|
|
|
+ <div class="Upload-butom-tow">
|
|
|
+ <h3>补偿款领款日期：</h3>
|
|
|
+ <el-date-picker value-format="yyyy-MM-dd" type="date" placeholder="选择日期" v-model="payDate"
|
|
|
+ style="width: 250px;"></el-date-picker>
|
|
|
+ </div>
|
|
|
+ <div class="Upload-butom-ont" v-for="(item,index) in fileListindex" :key="index">
|
|
|
+ <div class="tc-middle-add">
|
|
|
+ <h3>打款凭证：</h3>
|
|
|
+ </div>
|
|
|
+ <div class="tc-middle-name">
|
|
|
+ <ul>
|
|
|
+ <li v-for="itemid in item.tree" @click="nodeClic(itemid)">
|
|
|
+ <i class="el-icon-error" @click.stop="deleteFile(itemid)"></i>
|
|
|
+ <img v-if="itemid.name.split('.').pop().toLowerCase()=='pdf'"
|
|
|
+ src="../../../../../assets/file-pdf.png" alt="">
|
|
|
+ <img v-else-if="itemid.name.split('.').pop().toLowerCase()=='png'||itemid.name.split('.').pop().toLowerCase()=='jpg'"
|
|
|
+ src="../../../../../assets/file-img.png" alt="">
|
|
|
+ <img v-else-if="itemid.name.split('.').pop().toLowerCase()=='text'"
|
|
|
+ src="../../../../../assets/file-excel.png" alt="">
|
|
|
+ <img v-else src="../../../../../assets/file-other.png">
|
|
|
+ <div>
|
|
|
+ <Tooltip :text="itemid.name"></Tooltip>
|
|
|
+ </div>
|
|
|
+ </li>
|
|
|
+ <el-upload action='' :auto-upload="false" :headers="tokenData"
|
|
|
+ :on-change="handleChang" :show-file-list="false">
|
|
|
+ <li @click="selectFile()">
|
|
|
+ <div class="add">
|
|
|
+ <div class="add-top">
|
|
|
+ <span class="el-icon-plus"></span>
|
|
|
+ </div>
|
|
|
+ <div class="add-buttom">
|
|
|
+ 添加文件
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </li>
|
|
|
+ </el-upload>
|
|
|
+ </ul>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <div class="Upload-butom-ont">
|
|
|
+ <div class="tc-middle-add">
|
|
|
+ <h4>情况说明：</h4>
|
|
|
+ </div>
|
|
|
+ <div class="tc-middle-name">
|
|
|
+ <div class="form" style="padding: 0;">
|
|
|
+ <el-form>
|
|
|
+ <el-form-item label="情况说明" label-width="130px" style="width: 100%;">
|
|
|
+ <el-input v-model='Reremar' type="textarea" :rows="4" placeholder="请输入情况说明"
|
|
|
+ style="width: 100%;"></el-input>
|
|
|
+ </el-form-item>
|
|
|
+ </el-form>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+
|
|
|
+ </div>
|
|
|
+</template>
|
|
|
+
|
|
|
+<script>
|
|
|
+ import Tooltip from '../../../../assembly/tooltip.vue'
|
|
|
+ export default {
|
|
|
+ name: "survey",
|
|
|
+ props: ['strpdetails', 'datahouseholdmax'],
|
|
|
+ components: {
|
|
|
+ Tooltip
|
|
|
+ },
|
|
|
+ data() {
|
|
|
+ return {
|
|
|
+ index: 1,
|
|
|
+
|
|
|
+ uuid: '',
|
|
|
+ payDate: '',
|
|
|
+ fileListindex: [],
|
|
|
+ defaultOpen: require("../../../../../assets/file-plus.png"),
|
|
|
+ defaultClose: require("../../../../../assets/file-reduce.png"),
|
|
|
+ Reremar: '',
|
|
|
+ tokenData: {
|
|
|
+ token: window.sessionStorage.getItem('token')
|
|
|
+ },
|
|
|
+ datahousehold: {}
|
|
|
+ }
|
|
|
+ },
|
|
|
+ computed: {},
|
|
|
+ mounted() {
|
|
|
+ this.datahousehold = this.datahouseholdmax
|
|
|
+ },
|
|
|
+ methods: {
|
|
|
+ control(row) {
|
|
|
+ var Positive = this.index
|
|
|
+ if(row){Positive++}else{Positive--}
|
|
|
+ if (Positive <= 1) {
|
|
|
+ Positive = 1
|
|
|
+ this.modifyState(0,row)
|
|
|
+
|
|
|
+ } else if (Positive == 2) {
|
|
|
+ this.modifyState(1,row)
|
|
|
+ } else if (Positive == 3) {
|
|
|
+ this.modifyState(2,row)
|
|
|
+ // this.getUid()
|
|
|
+ // this.getgetexaminefile()
|
|
|
+ } else if (Positive >= 4) {
|
|
|
+ this.$emit('getlist',3)
|
|
|
+ this.modifyState(3,row)
|
|
|
+ Positive = 4
|
|
|
+ }
|
|
|
+ },
|
|
|
+ modifyState(index,type){
|
|
|
+ var lint=['明细单','征迁协议','上传文件','完成']
|
|
|
+ console.log(lint[index])
|
|
|
+ if(type){this.index++}else{this.index--}
|
|
|
+ },
|
|
|
+ // 获取uuid
|
|
|
+ getUid() {
|
|
|
+ var s = [];
|
|
|
+ var hexDigits = "0123456789abcdef";
|
|
|
+ for (var i = 0; i < 30; i++) {
|
|
|
+ s[i] = hexDigits.substr(Math.floor(Math.random() * 0x10), 1);
|
|
|
+ }
|
|
|
+ s[14] = "4";
|
|
|
+ s[19] = hexDigits.substr((s[19] & 0x3) | 0x8, 1);
|
|
|
+ var uuid = s.join("");
|
|
|
+ this.uuid = uuid;
|
|
|
+ return uuid;
|
|
|
+ },
|
|
|
+ // 上传文件按钮
|
|
|
+ selectFile() {
|
|
|
+ this.selectFileName = '3、审批后资料/5、打款凭证' + '/' + this.uuid;
|
|
|
+ },
|
|
|
+ // 上传文件
|
|
|
+ handleChang(file) {
|
|
|
+ let that = this;
|
|
|
+ let formData = new FormData();
|
|
|
+ formData.append('file', file.raw);
|
|
|
+ formData.append('type', 2);
|
|
|
+ formData.append('id', this.datahousehold.id);
|
|
|
+ formData.append('destfolder', this.selectFileName);
|
|
|
+ that.$http.post('api/auth/file/upload', formData).then((res) => {
|
|
|
+ if (res.status == 200 && res.data.code == 0) {
|
|
|
+ that.$message.success("上传文件成功!");
|
|
|
+ this.getgetexaminefile();
|
|
|
+ } else {
|
|
|
+ that.$message.error("上传文件失败!");
|
|
|
+ }
|
|
|
+ });
|
|
|
+ },
|
|
|
+ //获取文件
|
|
|
+ getgetexaminefile() {
|
|
|
+ this.$http.get('api/auth/file/fileList?type=' + 2 + '&id=' + this.datahousehold.id, null).then((res) => {
|
|
|
+ if (res.status == 200 && res.data.code == 0) {
|
|
|
+ this.fileListindex = res.data.list
|
|
|
+ var data = [{
|
|
|
+ name: '5、打款凭证',
|
|
|
+ empty: false,
|
|
|
+ type: "folder",
|
|
|
+ url: '5、打款凭证',
|
|
|
+ tree: []
|
|
|
+ }, ]
|
|
|
+ if (this.fileListindex) {
|
|
|
+ this.fileListindex.forEach((item, index) => {
|
|
|
+ if (item.empty == false) {
|
|
|
+ if (item.name == '3、审批后资料') {
|
|
|
+ item.tree.forEach((nale, ixde) => {
|
|
|
+ if (nale.name == '5、打款凭证') {
|
|
|
+ if (nale.tree != null && nale.tree.length != 0) {
|
|
|
+ nale.tree.forEach((nana, ixde) => {
|
|
|
+ if (nana.name == this.uuid) {
|
|
|
+ data[0] = nana
|
|
|
+ }
|
|
|
+ })
|
|
|
+ }
|
|
|
+ }
|
|
|
+ })
|
|
|
+ }
|
|
|
+ }
|
|
|
+ })
|
|
|
+ }
|
|
|
+ this.fileListindex = data
|
|
|
+ } else {
|
|
|
+ this.$message.error("查找文件列表失败!");
|
|
|
+ }
|
|
|
+ });
|
|
|
+ },
|
|
|
+ //删除文件
|
|
|
+ deleteFile(item) {
|
|
|
+ var data = new FormData;
|
|
|
+ data.append("delFileUri", item.url);
|
|
|
+ data.append("id", this.datahousehold.id);
|
|
|
+ data.append("type", 2);
|
|
|
+ this.$confirm('确定要删除该文件吗？').then(_ => {
|
|
|
+ this.$http.post('api/auth/file/removeFile', data).then((res) => {
|
|
|
+ if (res.status == 200 && res.data.code == 0) {
|
|
|
+ this.$message.success('删除该文件成功!');
|
|
|
+ this.getgetexaminefile();
|
|
|
+ } else {
|
|
|
+ this.$message.error('删除该文件失败!');
|
|
|
+ }
|
|
|
+ })
|
|
|
+ })
|
|
|
+ },
|
|
|
+ nodeClic(val) {
|
|
|
+ this.dataurl = ''
|
|
|
+ var data = new FormData;
|
|
|
+ data.append("downloadFileUri", val.url);
|
|
|
+ data.append("id", this.datahousehold.id);
|
|
|
+ data.append("type", 2);
|
|
|
+ this.$http.post('api/auth/file/download', data, {
|
|
|
+ responseType: 'blob'
|
|
|
+ }).then((res) => {
|
|
|
+ if (res.headers['content-type'] == "application/octet-stream;charset=utf-8" || res.headers[
|
|
|
+ 'content-type'] == "application/octet-stream;charset=UTF-8") {
|
|
|
+ //此处有个坑。这里用content保存文件流，最初是content=res，
|
|
|
+ //检查了下才发现，后端对文件流做了一层封装，所以将content指向res.data即可
|
|
|
+ //另外，流的转储属于浅拷贝，所以此处的content转储仅仅是便于理解，并没有实际作用=_=
|
|
|
+ const content = res.data
|
|
|
+ const type = {
|
|
|
+ xml: 'text/xml',
|
|
|
+ zip: 'application/zip',
|
|
|
+ doc: 'application/msword',
|
|
|
+ bin: 'application/octet-stream',
|
|
|
+ exe: 'application/octet-stream',
|
|
|
+ so: 'application/octet-stream',
|
|
|
+ dll: 'application/octet-stream',
|
|
|
+ pdf: 'application/pdf',
|
|
|
+ ai: 'application/postscript',
|
|
|
+ xls: 'application/vnd.ms-excel',
|
|
|
+ ppt: 'application/vnd.ms-powerpoint',
|
|
|
+ dir: 'application/x-director',
|
|
|
+ js: 'application/x-javascript',
|
|
|
+ swf: 'application/x-shockwave-flash',
|
|
|
+ xhtml: 'application/xhtml+xml',
|
|
|
+ xht: 'application/xhtml+xml',
|
|
|
+ mid: 'audio/midi',
|
|
|
+ midi: 'audio/midi',
|
|
|
+ mp3: 'audio/mpeg',
|
|
|
+ rm: 'audio/x-pn-realaudio',
|
|
|
+ rpm: 'audio/x-pn-realaudio-plugin',
|
|
|
+ wav: 'audio/x-wav',
|
|
|
+ bmp: 'image/bmp',
|
|
|
+ gif: 'image/gif',
|
|
|
+ jpeg: 'image/jpeg',
|
|
|
+ jpg: 'image/jpeg',
|
|
|
+ png: 'image/png',
|
|
|
+ css: 'text/css',
|
|
|
+ html: 'text/html',
|
|
|
+ htm: 'text/html',
|
|
|
+ txt: 'text/plain',
|
|
|
+ xsl: 'text/xml',
|
|
|
+ mpeg: 'video/mpeg',
|
|
|
+ mpg: 'video/mpeg',
|
|
|
+ avi: 'video/x-msvideo',
|
|
|
+ movie: 'video/x-sgi-movie',
|
|
|
+ xlsx: 'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet'
|
|
|
+ }
|
|
|
+ const blob = new Blob([content], { // 关键代码
|
|
|
+ type: type[val.url.split('.').pop().toLowerCase()]
|
|
|
+ }) //构造一个blob对象来处理数据
|
|
|
+ this.dataurl = window.URL.createObjectURL(blob)
|
|
|
+ this.Examine = true
|
|
|
+ }
|
|
|
+ });
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+</script>
|
|
|
+
|
|
|
+<style scoped lang="less">
|
|
|
+ .button-background .el-button {
|
|
|
+ border-radius: 5px;
|
|
|
+ }
|
|
|
+
|
|
|
+ .SignAcontract {
|
|
|
+ position: absolute;
|
|
|
+ top: 0;
|
|
|
+ right: 0;
|
|
|
+ width: 100%;
|
|
|
+ height: 100%;
|
|
|
+
|
|
|
+ .indexbutton {
|
|
|
+ position: absolute;
|
|
|
+ top: 0;
|
|
|
+ right: 0;
|
|
|
+ width: 100%;
|
|
|
+ height: 100%;
|
|
|
+ background-color: #00000050;
|
|
|
+
|
|
|
+ ul {
|
|
|
+ position: fixed;
|
|
|
+ z-index: 11;
|
|
|
+ top: 40%;
|
|
|
+ left: 25%;
|
|
|
+ width: 50%;
|
|
|
+ display: flex;
|
|
|
+ justify-content: space-evenly;
|
|
|
+
|
|
|
+ li {
|
|
|
+ width: 100px;
|
|
|
+ height: 150px;
|
|
|
+ // background-image: linear-gradient(-225deg, #7DE2FC 0%, #B9B6E5 100%);
|
|
|
+ background-image: linear-gradient(15deg, #13547a 0%, #80d0c7 100%);
|
|
|
+ border-radius: 20px;
|
|
|
+ line-height: 150px;
|
|
|
+ color: #fff;
|
|
|
+ font-size: 18px;
|
|
|
+ text-align: center;
|
|
|
+ cursor: pointer;
|
|
|
+
|
|
|
+ &:nth-child(2) {
|
|
|
+ background-image: linear-gradient(to left, #BDBBBE 0%, #9D9EA3 100%), radial-gradient(88% 271%, rgba(255, 255, 255, 0.25) 0%, rgba(254, 254, 254, 0.25) 1%, rgba(0, 0, 0, 0.25) 100%), radial-gradient(50% 100%, rgba(255, 255, 255, 0.30) 0%, rgba(0, 0, 0, 0.30) 100%);
|
|
|
+ background-blend-mode: normal, lighten, soft-light;
|
|
|
+ }
|
|
|
+
|
|
|
+ &:nth-child(3) {
|
|
|
+ background-image: linear-gradient(to top, #505285 0%, #585e92 12%, #65689f 25%, #7474b0 37%, #7e7ebb 50%, #8389c7 62%, #9795d4 75%, #a2a1dc 87%, #b5aee4 100%);
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ .SignAcontract-content {
|
|
|
+ position: fixed;
|
|
|
+ top: 20%;
|
|
|
+ right: 25%;
|
|
|
+ z-index: 11;
|
|
|
+ display: flex;
|
|
|
+ justify-content: space-between;
|
|
|
+ flex-wrap: wrap;
|
|
|
+ width: 50%;
|
|
|
+ height: 60%;
|
|
|
+
|
|
|
+ .SignAcontract-content-right {
|
|
|
+ border-radius: 5px;
|
|
|
+ width: 100%;
|
|
|
+ height: 100px;
|
|
|
+ background-color: #fff;
|
|
|
+ display: flex;
|
|
|
+ justify-content: space-between;
|
|
|
+ padding: 20px;
|
|
|
+ box-sizing: border-box;
|
|
|
+
|
|
|
+ /deep/.is-finish {
|
|
|
+ color: #439dc1;
|
|
|
+ border-color: #439dc1;
|
|
|
+ }
|
|
|
+
|
|
|
+ /deep/.is-process {
|
|
|
+ color: #c0c4cc;
|
|
|
+ border-color: #c0c4cc;
|
|
|
+ }
|
|
|
+
|
|
|
+ /deep/.el-step {
|
|
|
+ // &:nth-child(1){
|
|
|
+ // flex-basis: 25% !important;
|
|
|
+ // .el-step__line{
|
|
|
+ // right: -100%;
|
|
|
+ // }
|
|
|
+ // }
|
|
|
+ // &:nth-child(2){
|
|
|
+ // flex-basis: 50% !important;
|
|
|
+ // .el-step__line{
|
|
|
+ // right: -25%;
|
|
|
+ // }
|
|
|
+ // }
|
|
|
+ // &:nth-child(3){
|
|
|
+ // flex-basis: 25% !important;
|
|
|
+ // }
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ .SignAcontract-content-lent {
|
|
|
+ width: 100%;
|
|
|
+ height: calc(100% - 125px);
|
|
|
+ background-color: #fff;
|
|
|
+ border-radius: 5px;
|
|
|
+ padding: 20px;
|
|
|
+ box-sizing: border-box;
|
|
|
+ overflow: auto;
|
|
|
+
|
|
|
+ & {
|
|
|
+ scrollbar-width: thin;
|
|
|
+ scrollbar-color: #c1c1c1 #eee;
|
|
|
+ }
|
|
|
+
|
|
|
+ &::-webkit-scrollbar {
|
|
|
+ width: 6px;
|
|
|
+ background-color: #eee;
|
|
|
+ }
|
|
|
+
|
|
|
+ &::-webkit-scrollbar-thumb {
|
|
|
+ background-color: #c1c1c1;
|
|
|
+
|
|
|
+ &:hover {
|
|
|
+ background-color: #a8a8a8;
|
|
|
+ }
|
|
|
+
|
|
|
+ &:active {
|
|
|
+ background-color: #787878;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ .printContent{
|
|
|
+ width: 100%;
|
|
|
+ }
|
|
|
+ .Upload {
|
|
|
+ width: 100%;
|
|
|
+ height: 100%;
|
|
|
+
|
|
|
+ .Upload-top {
|
|
|
+ height: 38px;
|
|
|
+ display: flex;
|
|
|
+ justify-content: space-between;
|
|
|
+
|
|
|
+ .button-background {
|
|
|
+ margin-right: 10px;
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ .Upload-butom {
|
|
|
+ width: 100%;
|
|
|
+ height: 100%;
|
|
|
+
|
|
|
+ // height: calc(100% - 38px);
|
|
|
+ .Upload-butom-tow {
|
|
|
+ width: 100%;
|
|
|
+ height: 40px;
|
|
|
+ display: flex;
|
|
|
+
|
|
|
+ h3 {
|
|
|
+ font-size: 18px;
|
|
|
+ color: #439dc1;
|
|
|
+ line-height: 40px;
|
|
|
+
|
|
|
+ &::before {
|
|
|
+ content: "*";
|
|
|
+ color: #f56c6c;
|
|
|
+ margin-right: 5px;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ .Upload-butom-ont {
|
|
|
+ width: 100%;
|
|
|
+ height: calc(50% -20px);
|
|
|
+
|
|
|
+ .tc-middle-add {
|
|
|
+ display: flex;
|
|
|
+
|
|
|
+ h3 {
|
|
|
+ font-size: 18px;
|
|
|
+ color: #439dc1;
|
|
|
+ margin: 15px 0;
|
|
|
+
|
|
|
+ &::before {
|
|
|
+ content: "*";
|
|
|
+ color: #f56c6c;
|
|
|
+ margin-right: 5px;
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ h4 {
|
|
|
+ font-size: 18px;
|
|
|
+ color: #439dc1;
|
|
|
+ margin: 15px 0;
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ .tc-middle-empty {
|
|
|
+ width: 100%;
|
|
|
+
|
|
|
+ img {
|
|
|
+ margin: 0 auto;
|
|
|
+ display: block;
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ .tc-middle-name {
|
|
|
+ width: 100%;
|
|
|
+
|
|
|
+ ul {
|
|
|
+ width: 100%;
|
|
|
+ display: flex;
|
|
|
+
|
|
|
+ li {
|
|
|
+ width: 100px;
|
|
|
+ height: 110px;
|
|
|
+ cursor: pointer;
|
|
|
+ margin: 0 10px;
|
|
|
+ position: relative;
|
|
|
+ border: 1px solid #dedede;
|
|
|
+ border-radius: 10px;
|
|
|
+ padding: 10px;
|
|
|
+ box-sizing: border-box;
|
|
|
+
|
|
|
+ &:hover {
|
|
|
+ i {
|
|
|
+ display: block;
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ i {
|
|
|
+ position: absolute;
|
|
|
+ top: -9px;
|
|
|
+ right: -9px;
|
|
|
+ color: #FF4500;
|
|
|
+ font-size: 25px;
|
|
|
+ display: none;
|
|
|
+ }
|
|
|
+
|
|
|
+ img {
|
|
|
+ width: 55px;
|
|
|
+ margin: 0 auto;
|
|
|
+ display: block;
|
|
|
+ }
|
|
|
+
|
|
|
+ div {
|
|
|
+ width: 100%;
|
|
|
+ display: block;
|
|
|
+ text-align: center;
|
|
|
+ color: #5e5e5e;
|
|
|
+ margin: 2px;
|
|
|
+ margin-top: 8px;
|
|
|
+ overflow: hidden;
|
|
|
+ text-overflow: ellipsis;
|
|
|
+ word-break: break-all;
|
|
|
+ font-size: 14px;
|
|
|
+ display: inline-block;
|
|
|
+ display: -webkit-box !important;
|
|
|
+ -webkit-line-clamp: 1;
|
|
|
+ -webkit-box-orient: vertical;
|
|
|
+
|
|
|
+ span {
|
|
|
+ display: initial;
|
|
|
+ white-space: break-spaces;
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ .add {
|
|
|
+ width: 100%;
|
|
|
+ height: 100%;
|
|
|
+
|
|
|
+ .add-top {
|
|
|
+ margin: 0 auto;
|
|
|
+ width: 80%;
|
|
|
+ height: 60%;
|
|
|
+ border: 2px dotted #c6c6c6;
|
|
|
+ border-radius: 5px;
|
|
|
+ position: relative;
|
|
|
+
|
|
|
+ span {
|
|
|
+ display: inline;
|
|
|
+ position: absolute;
|
|
|
+ top: calc(50% - 15px);
|
|
|
+ left: calc(50% - 15px);
|
|
|
+ font-size: 30px;
|
|
|
+ color: #bbb;
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ .add-buttom {
|
|
|
+ color: #5e5e5e;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+</style>
|
