|
|
@@ -0,0 +1,762 @@
|
|
|
+<template>
|
|
|
+ <div>
|
|
|
+ <main-top :crumb="crumbData">
|
|
|
+ <div slot="con">
|
|
|
+ <div style="display: flex; align-items: center">
|
|
|
+ <el-button
|
|
|
+ style="margin-left: 20px"
|
|
|
+ type="primary"
|
|
|
+ @click="show({}, 'add')"
|
|
|
+ >新增语音</el-button
|
|
|
+ >
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </main-top>
|
|
|
+ <div class="table-interface">
|
|
|
+ <div class="top-body">
|
|
|
+ <div class="info-top">
|
|
|
+ <div class="info-left">
|
|
|
+ <span>音频名称：</span>
|
|
|
+ <el-input
|
|
|
+ class="elInput"
|
|
|
+ v-model="inputKey"
|
|
|
+ placeholder="请输入音频名称"
|
|
|
+ ></el-input>
|
|
|
+ <span style="margin-left: 1.25rem">新建时间：</span>
|
|
|
+ <el-date-picker
|
|
|
+ v-model="time"
|
|
|
+ type="daterange"
|
|
|
+ range-separator="-"
|
|
|
+ value-format="yyyy-MM-dd hh:mm:ss"
|
|
|
+ start-placeholder="开始日期"
|
|
|
+ end-placeholder="结束日期"
|
|
|
+ >
|
|
|
+ </el-date-picker>
|
|
|
+ <el-button
|
|
|
+ style="margin-left: 1.25rem"
|
|
|
+ type="primary"
|
|
|
+ @click="getInformation"
|
|
|
+ >查询</el-button
|
|
|
+ >
|
|
|
+ <el-button @click="reset">重置</el-button>
|
|
|
+ </div>
|
|
|
+ <div class="info-right"></div>
|
|
|
+ </div>
|
|
|
+ <el-table
|
|
|
+ :data="tableData"
|
|
|
+ height="61vh"
|
|
|
+ class="collection-con"
|
|
|
+ :tree-props="{ children: 'children' }"
|
|
|
+ row-key="id"
|
|
|
+ style="width: 100%"
|
|
|
+ >
|
|
|
+ <el-table-column type="index" label="序号"></el-table-column>
|
|
|
+ <el-table-column prop="name" label="音频名称"></el-table-column>
|
|
|
+ <el-table-column label="所属展区">
|
|
|
+ <template slot-scope="scope">
|
|
|
+ <span>{{ exhibitionAreaType[scope.row.type] }}</span>
|
|
|
+ </template>
|
|
|
+ </el-table-column>
|
|
|
+ <el-table-column label="音频图标">
|
|
|
+ <template slot-scope="scope">
|
|
|
+ <!-- 加个data才能访问 -->
|
|
|
+ <img :src="'/data/' + scope.row.icon" />
|
|
|
+ </template>
|
|
|
+ </el-table-column>
|
|
|
+ <el-table-column width="300" label="音频二维码">
|
|
|
+ <template slot-scope="scope">
|
|
|
+ <!-- 加个data才能访问 -->
|
|
|
+ <img :src="'/data/' + scope.row.qrCode" />
|
|
|
+ </template>
|
|
|
+ </el-table-column>
|
|
|
+ <el-table-column prop="createTime" label="新建时间"></el-table-column>
|
|
|
+
|
|
|
+ <el-table-column label="操作">
|
|
|
+ <template slot-scope="scope">
|
|
|
+ <span
|
|
|
+ class="o-span"
|
|
|
+ v-if="$role == 'sys_admin' || $role == 'sys_high'"
|
|
|
+ @click="show(scope.row, 'edit')"
|
|
|
+ >编辑</span
|
|
|
+ >
|
|
|
+ <span
|
|
|
+ class="o-span"
|
|
|
+ v-if="scope.row.isIndex != '1' && ($role == 'sys_admin' || $role == 'sys_high')"
|
|
|
+ @click="del(scope.row)"
|
|
|
+ >删除</span
|
|
|
+ >
|
|
|
+ </template>
|
|
|
+ </el-table-column>
|
|
|
+ </el-table>
|
|
|
+ <div class="e-pagination">
|
|
|
+ <el-pagination
|
|
|
+ @current-change="handleCurrentChange"
|
|
|
+ :current-page.sync="currentPage"
|
|
|
+ @size-change="handleSizeChange"
|
|
|
+ :page-size="size"
|
|
|
+ :page-sizes="PAGESIZES"
|
|
|
+ layout="total, sizes, prev, pager, next, jumper"
|
|
|
+ :total="total"
|
|
|
+ ></el-pagination>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <!-- 弹框 -->
|
|
|
+ <el-dialog :title="editTitle" :visible.sync="dialogFormVisible" width="60%">
|
|
|
+ <div class="add-con" v-if="dialogFormVisible && changeType">
|
|
|
+ <div class="add-left">
|
|
|
+ <el-form :model="form" ref="fodderform">
|
|
|
+ <el-form-item
|
|
|
+ label="音频名称："
|
|
|
+ :label-width="formLabelWidth"
|
|
|
+ prop="name"
|
|
|
+ :rules="{
|
|
|
+ required: true,
|
|
|
+ message: '音频名称不能为空',
|
|
|
+ trigger: 'blur',
|
|
|
+ }"
|
|
|
+ >
|
|
|
+ <el-input
|
|
|
+ v-model="form.name"
|
|
|
+ placeholder="请输入音频名称"
|
|
|
+ autocomplete="off"
|
|
|
+ maxlength="50"
|
|
|
+ class="paddingmore"
|
|
|
+ show-word-limit
|
|
|
+ ></el-input>
|
|
|
+ </el-form-item>
|
|
|
+
|
|
|
+ <el-form-item
|
|
|
+ label="所属展区："
|
|
|
+ :label-width="formLabelWidth"
|
|
|
+ :rules="{
|
|
|
+ required: true,
|
|
|
+ message: '所属展区不能为空',
|
|
|
+ trigger: 'change',
|
|
|
+ }"
|
|
|
+ >
|
|
|
+ <el-select
|
|
|
+ style="width: 100%"
|
|
|
+ v-model="form.type"
|
|
|
+ placeholder="请选择所属展区"
|
|
|
+ >
|
|
|
+ <el-option
|
|
|
+ v-for="(item, i) in typeli"
|
|
|
+ :key="i"
|
|
|
+ :label="item.label"
|
|
|
+ :value="item.value"
|
|
|
+ ></el-option>
|
|
|
+ </el-select>
|
|
|
+ </el-form-item>
|
|
|
+
|
|
|
+ <el-form-item label="音频图标：" :label-width="formLabelWidth">
|
|
|
+ <el-upload
|
|
|
+ class="avatar-uploader"
|
|
|
+ ref="upload"
|
|
|
+ accept=".jpg,.png"
|
|
|
+ :headers="{ token }"
|
|
|
+ :action="uploadUrl"
|
|
|
+ :on-error="handleError"
|
|
|
+ :show-file-list="false"
|
|
|
+ :on-success="handleIconSuccess"
|
|
|
+ :before-upload="beforeIconUpload"
|
|
|
+ :on-change="handleChange"
|
|
|
+ :on-remove="handleRemove"
|
|
|
+ >
|
|
|
+ <img
|
|
|
+ v-if="form.icon"
|
|
|
+ :src="'/data/' + form.icon"
|
|
|
+ class="avatar"
|
|
|
+ />
|
|
|
+ <i v-else class="el-icon-plus avatar-uploader-icon"></i>
|
|
|
+ </el-upload>
|
|
|
+ <div>
|
|
|
+ <p style="color: #999">格式要求：</p>
|
|
|
+ <p style="color: #999; line-height: 1">
|
|
|
+ 1、支持png,jpeg的图片格式
|
|
|
+ </p>
|
|
|
+ <p style="color: #999">2、最大可支持50M</p>
|
|
|
+ <p style="color: #999">3、建议分辨率：50*50</p>
|
|
|
+ </div>
|
|
|
+ </el-form-item>
|
|
|
+ <el-form-item :label="'音频文件：'" :label-width="formLabelWidth">
|
|
|
+ <el-upload
|
|
|
+ :file-list="audioFileList"
|
|
|
+ class="upload-demo"
|
|
|
+ accept=".mp3,.wav,.flac,.m4a"
|
|
|
+ :action="uploadFlieUrl"
|
|
|
+ :headers="{ token }"
|
|
|
+ :on-success="handleFileSuccess"
|
|
|
+ :on-error="handleError"
|
|
|
+ :before-upload="beforefileUpload"
|
|
|
+ :on-change="handleAudioFilesChange"
|
|
|
+ :on-remove="handleAudioFilesRemove"
|
|
|
+ >
|
|
|
+ <el-button size="small" type="primary">点击上传</el-button>
|
|
|
+ </el-upload>
|
|
|
+ <p v-if="form.audio" style="color: #999">
|
|
|
+ <a target="_blank" :href="'/data/' + form.audio">{{ form.fileName }}</a>
|
|
|
+ </p>
|
|
|
+ <div>
|
|
|
+ <p style="color: #999">格式要求：</p>
|
|
|
+ <p style="color: #999; line-height: 1">
|
|
|
+ 1、支持WAV,FLAC,MP3音频文件格式
|
|
|
+ </p>
|
|
|
+ <p style="color: #999">2、最大可支持500M</p>
|
|
|
+ </div>
|
|
|
+ </el-form-item>
|
|
|
+
|
|
|
+ <el-form-item
|
|
|
+ v-if="form.qrCode"
|
|
|
+ label="音频二维码："
|
|
|
+ :label-width="formLabelWidth"
|
|
|
+ >
|
|
|
+ <img :src="'/data/' + form.qrCode" class="avatar" />
|
|
|
+ </el-form-item>
|
|
|
+ </el-form>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <div slot="footer" class="dialog-footer">
|
|
|
+ <el-button type="primary" @click="save">保 存</el-button>
|
|
|
+ <el-button @click="dialogFormVisible = false">取 消</el-button>
|
|
|
+ </div>
|
|
|
+ </el-dialog>
|
|
|
+ </div>
|
|
|
+</template>
|
|
|
+
|
|
|
+<script>
|
|
|
+// 这里可以导入其他文件（比如：组件，工具js，第三方插件js，json文件，图片文件等等）
|
|
|
+// 例如：import 《组件名称》 from '《组件路径》';
|
|
|
+
|
|
|
+import MainTop from "@/components/main-top";
|
|
|
+import { changeState } from "@/util/commonfn.js";
|
|
|
+const exhibitionAreaType = {
|
|
|
+ 1: "主厅",
|
|
|
+ 2: "附厅",
|
|
|
+ 3: "序厅",
|
|
|
+};
|
|
|
+
|
|
|
+const crumbData = [
|
|
|
+ {
|
|
|
+ name: "场景音频管理",
|
|
|
+ id: 12,
|
|
|
+ },
|
|
|
+];
|
|
|
+
|
|
|
+let typeli = [
|
|
|
+ { label: "主厅", value: 1 },
|
|
|
+ { label: "附厅", value: 2 },
|
|
|
+ { label: "序厅", value: 3 },
|
|
|
+];
|
|
|
+
|
|
|
+export default {
|
|
|
+ // import引入的组件需要注入到对象中才能使用
|
|
|
+ components: {
|
|
|
+ MainTop,
|
|
|
+ },
|
|
|
+ data() {
|
|
|
+ return {
|
|
|
+ fileList: [],
|
|
|
+ audioFileList: [],
|
|
|
+ duoci: 0,
|
|
|
+ crumbData,
|
|
|
+ time: "",
|
|
|
+ tableData: [],
|
|
|
+ inputKey: "",
|
|
|
+ currentPage: 1,
|
|
|
+ size: 25,
|
|
|
+ total: 0,
|
|
|
+ loading: false,
|
|
|
+ form: {
|
|
|
+ id: "",
|
|
|
+ name: "",
|
|
|
+ type: 2,
|
|
|
+ icon: "",
|
|
|
+ audio: "",
|
|
|
+ fileName:""
|
|
|
+ },
|
|
|
+ changeType: true,
|
|
|
+ dialogFormVisible: false,
|
|
|
+ showType: "",
|
|
|
+ formLabelWidth: "120px",
|
|
|
+ token: window.localStorage.getItem("token"),
|
|
|
+ uploadUrl: `${this.$serverName}manage/sceneAudio/material/upload/img`,
|
|
|
+ uploadFlieUrl: `${this.$serverName}manage/sceneAudio/material/upload/audio`,
|
|
|
+ typeli,
|
|
|
+ exhibitionAreaType,
|
|
|
+ };
|
|
|
+ },
|
|
|
+ computed: {
|
|
|
+ editTitle() {
|
|
|
+ return this.showType === "edit" ? "编辑场景音频" : "新增场景音频";
|
|
|
+ },
|
|
|
+ },
|
|
|
+ watch: {
|
|
|
+ currentPage() {
|
|
|
+ this.refresh();
|
|
|
+ },
|
|
|
+ size() {
|
|
|
+ this.refresh();
|
|
|
+ },
|
|
|
+ type() {
|
|
|
+ this.refresh();
|
|
|
+ },
|
|
|
+ "form.type": function () {
|
|
|
+ if (this.showType != "edit") {
|
|
|
+ this.changeType = false;
|
|
|
+ this.form.fileUrl = "";
|
|
|
+ this.form.fileName = "";
|
|
|
+ this.form.fileId = "";
|
|
|
+ setTimeout(() => {
|
|
|
+ this.changeType = true;
|
|
|
+ });
|
|
|
+ }
|
|
|
+ },
|
|
|
+ },
|
|
|
+ mounted() {
|
|
|
+ this.refresh();
|
|
|
+ },
|
|
|
+
|
|
|
+ methods: {
|
|
|
+ handleChange(file) {
|
|
|
+ this.fileList = this.fileList.length === 0 ? this.fileList : [];
|
|
|
+ this.fileList.push(file["raw"]);
|
|
|
+ },
|
|
|
+ handleRemove(file) {
|
|
|
+ let index = this.fileList.findIndex((item) => {
|
|
|
+ return item.uid === file.uid;
|
|
|
+ });
|
|
|
+ this.fileList.splice(index, 1);
|
|
|
+ },
|
|
|
+ handleAudioFilesRemove() {
|
|
|
+ this.audioFileList = [];
|
|
|
+ this.form.audio = "";
|
|
|
+ this.form.fileName = "";
|
|
|
+ },
|
|
|
+ handleAudioFilesChange(file) {
|
|
|
+ this.audioFileList = [];
|
|
|
+ this.audioFileList.push(file);
|
|
|
+ this.form.audio = file.response && file.response.data && file.response.data.path;
|
|
|
+ this.form.fileName = file.response && file.response.data && file.response.data.fileName;
|
|
|
+ },
|
|
|
+ changeState(item) {
|
|
|
+ changeState(item, "fodder", () => {
|
|
|
+ this.refresh();
|
|
|
+ });
|
|
|
+ },
|
|
|
+ reset() {
|
|
|
+ this.inputKey = "";
|
|
|
+ this.time = "";
|
|
|
+ },
|
|
|
+ handleIconSuccess(res) {
|
|
|
+ this.loading.close();
|
|
|
+ let { data } = res;
|
|
|
+ this.form.icon = data.path;
|
|
|
+ },
|
|
|
+ handleError() {
|
|
|
+ this.$alert("上传失败,请稍后再试", "提示", {
|
|
|
+ confirmButtonText: "确定",
|
|
|
+ callback: () => {
|
|
|
+ this.loading.close();
|
|
|
+ },
|
|
|
+ });
|
|
|
+ },
|
|
|
+ handleFileSuccess(res) {
|
|
|
+ this.loading.close();
|
|
|
+ let { data } = res;
|
|
|
+ this.form.audio = data.path;
|
|
|
+ },
|
|
|
+ beforefileUpload(file) {
|
|
|
+ // console.log('file',file)
|
|
|
+ // let typeArr = ["mp4"]
|
|
|
+ // console.log('this',this)
|
|
|
+ // let type = this.isTypeBySend(file.name, typeArr);
|
|
|
+ // if (!type) {
|
|
|
+ // this.$message.error("只允许指定文件格式的文件");
|
|
|
+ // return type;
|
|
|
+ // }
|
|
|
+
|
|
|
+ let size = 500;
|
|
|
+ const isLt = file.size / 1024 / 1024 < size;
|
|
|
+
|
|
|
+ if (!isLt) {
|
|
|
+ this.$message.error(`上传文件大小不能超过 ${size}MB!`);
|
|
|
+ return isLt;
|
|
|
+ }
|
|
|
+ this.loading = this.$loading(this.loadOption);
|
|
|
+ },
|
|
|
+ beforeIconUpload(file) {
|
|
|
+ // let type = this.isImage(file.name);
|
|
|
+ // if (!type) {
|
|
|
+ // this.$message.error("只允许上传图片");
|
|
|
+ // return type;
|
|
|
+ // }
|
|
|
+ let size = 50;
|
|
|
+ const isLt = file.size / 1024 / 1024 < size;
|
|
|
+
|
|
|
+ if (!isLt) {
|
|
|
+ this.$message.error(`上传头像图片大小不能超过 ${size}MB!`);
|
|
|
+ return isLt;
|
|
|
+ }
|
|
|
+ this.loading = this.$loading(this.loadOption);
|
|
|
+ },
|
|
|
+ show(item = {}, type) {
|
|
|
+ console.log("item", item);
|
|
|
+ this.dialogFormVisible = true;
|
|
|
+ this.showType = type;
|
|
|
+ this.form = { id: "", name: "", icon: "", audio: "",fileName:'' };
|
|
|
+ if (type === "add") {
|
|
|
+ console.log("add");
|
|
|
+ this.audioFileList = [];
|
|
|
+ }
|
|
|
+ if (type === "edit") {
|
|
|
+ this.form = { ...item };
|
|
|
+ let file = { name: item.fileName, url: `/${this.form.audio}` };
|
|
|
+ this.audioFileList = [file];
|
|
|
+ }
|
|
|
+ },
|
|
|
+ del(item) {
|
|
|
+ this.$confirm("删除后，信息将无法恢复，是否继续？", "提示", {
|
|
|
+ confirmButtonText: "确定",
|
|
|
+ cancelButtonText: "取消",
|
|
|
+ type: "warning",
|
|
|
+ })
|
|
|
+ .then(() => {
|
|
|
+ this.$http
|
|
|
+ .get(`/manage/sceneAudio/remove/${item.id}`, {})
|
|
|
+ .then((res) => {
|
|
|
+ if (res.code === 0) {
|
|
|
+ this.$alert("删除成功", "提示", {
|
|
|
+ confirmButtonText: "确定",
|
|
|
+ callback: () => {
|
|
|
+ this.getInformation();
|
|
|
+ },
|
|
|
+ });
|
|
|
+ } else {
|
|
|
+ this.$notify.error({
|
|
|
+ title: "错误",
|
|
|
+ message: res.msg,
|
|
|
+ });
|
|
|
+ }
|
|
|
+ });
|
|
|
+ })
|
|
|
+ .catch(() => {
|
|
|
+ this.$message({
|
|
|
+ type: "info",
|
|
|
+ message: "已取消删除",
|
|
|
+ });
|
|
|
+ });
|
|
|
+ },
|
|
|
+ tipError(msg) {
|
|
|
+ this.$notify.error({
|
|
|
+ title: "错误",
|
|
|
+ message: msg,
|
|
|
+ });
|
|
|
+ },
|
|
|
+ async save() {
|
|
|
+ this.$refs["fodderform"].validate(async (valid) => {
|
|
|
+ if (valid) {
|
|
|
+ let { id, name, type, icon, audio,fileName } = this.form;
|
|
|
+ let data = {
|
|
|
+ id,
|
|
|
+ name,
|
|
|
+ type,
|
|
|
+ icon,
|
|
|
+ audio,
|
|
|
+ fileName
|
|
|
+ };
|
|
|
+ if (!data.icon) {
|
|
|
+ this.tipError("音频图标不能为空");
|
|
|
+ return;
|
|
|
+ }
|
|
|
+ if (!data.audio) {
|
|
|
+ this.tipError("音频不能为空");
|
|
|
+ return;
|
|
|
+ }
|
|
|
+ let result = await this.$http({
|
|
|
+ method: "post",
|
|
|
+ data,
|
|
|
+ url: `/manage/sceneAudio/save`,
|
|
|
+ });
|
|
|
+ if (result.code === 0) {
|
|
|
+ this.$alert("保存成功", "提示", {
|
|
|
+ confirmButtonText: "确定",
|
|
|
+ callback: () => {
|
|
|
+ this.getInformation();
|
|
|
+ },
|
|
|
+ });
|
|
|
+ } else if (result.code === 60005) {
|
|
|
+ return;
|
|
|
+ } else {
|
|
|
+ this.$notify.error({
|
|
|
+ title: "错误",
|
|
|
+ message: result.msg,
|
|
|
+ });
|
|
|
+ }
|
|
|
+ }
|
|
|
+ });
|
|
|
+ },
|
|
|
+
|
|
|
+ refresh() {
|
|
|
+ this.loading = true;
|
|
|
+ this.getInformation();
|
|
|
+ this.loading = false;
|
|
|
+ },
|
|
|
+ handleCurrentChange(val) {
|
|
|
+ this.currentPage = val;
|
|
|
+ },
|
|
|
+ handleSizeChange(val) {
|
|
|
+ this.size = val;
|
|
|
+ },
|
|
|
+ async getInformation() {
|
|
|
+ this.dialogFormVisible = false;
|
|
|
+ let params = {
|
|
|
+ pageNum: this.currentPage,
|
|
|
+ pageSize: this.size,
|
|
|
+ searchKey: this.inputKey,
|
|
|
+ startTime: this.time ? this.time[0].split(" ")[0] + " 00:00:00" : "",
|
|
|
+ endTime: this.time ? this.time[1].split(" ")[0] + " 23:59:59" : "",
|
|
|
+ };
|
|
|
+
|
|
|
+ let result = await this.$http({
|
|
|
+ method: "post",
|
|
|
+ data: params,
|
|
|
+ headers: {
|
|
|
+ token: window.localStorage.getItem("token"),
|
|
|
+ },
|
|
|
+ url: "/manage/sceneAudio/list",
|
|
|
+ });
|
|
|
+ if (result.code !== 0) {
|
|
|
+ return;
|
|
|
+ }
|
|
|
+ this.tableData = result.data.list;
|
|
|
+ this.total = result.data.total;
|
|
|
+ },
|
|
|
+ },
|
|
|
+};
|
|
|
+</script>
|
|
|
+
|
|
|
+<style lang="less" scoped>
|
|
|
+.top-body {
|
|
|
+ border-top: 0.0625rem solid #e6e6e6;
|
|
|
+ line-height: 1.5;
|
|
|
+ padding: 0 1.25rem 1.25rem;
|
|
|
+ align-items: center;
|
|
|
+ box-sizing: border-box;
|
|
|
+ background: #fff;
|
|
|
+ margin: 1rem 0;
|
|
|
+}
|
|
|
+
|
|
|
+.top-body .top-con {
|
|
|
+ font-weight: bold;
|
|
|
+}
|
|
|
+.table-title {
|
|
|
+ padding: 1rem 1rem 1rem 0;
|
|
|
+ font-size: 1rem;
|
|
|
+ color: #2d2d2d;
|
|
|
+ border-bottom: 0.0625rem solid #ccc;
|
|
|
+ display: flex;
|
|
|
+ justify-content: space-between;
|
|
|
+}
|
|
|
+
|
|
|
+.more {
|
|
|
+ color: #ec652d;
|
|
|
+ cursor: pointer;
|
|
|
+}
|
|
|
+
|
|
|
+.top-right {
|
|
|
+ background-color: #ec652d;
|
|
|
+ height: 3.5625rem;
|
|
|
+ line-height: 3.5625rem;
|
|
|
+ color: #fff;
|
|
|
+ padding: 0 1.875rem;
|
|
|
+ border-radius: 0.3125rem;
|
|
|
+ font-size: 1.125rem;
|
|
|
+ font-weight: bold;
|
|
|
+}
|
|
|
+
|
|
|
+.search-body {
|
|
|
+ background-color: #fff;
|
|
|
+ margin: 1.25rem 0;
|
|
|
+}
|
|
|
+
|
|
|
+.interface-table {
|
|
|
+ height: calc(100% - 17.1875rem);
|
|
|
+ overflow-x: hidden;
|
|
|
+ background-color: #fff;
|
|
|
+ padding: 0 1.125rem 2.375rem;
|
|
|
+ box-sizing: border-box;
|
|
|
+}
|
|
|
+
|
|
|
+.zan-con {
|
|
|
+ display: flex;
|
|
|
+ width: 100%;
|
|
|
+ justify-content: space-around;
|
|
|
+ margin-top: 1.5rem;
|
|
|
+ text-align: center;
|
|
|
+ font-size: 1.125rem;
|
|
|
+}
|
|
|
+
|
|
|
+.zan-con .line {
|
|
|
+ height: 8rem;
|
|
|
+ width: 0.0625rem;
|
|
|
+ background: #ccc;
|
|
|
+}
|
|
|
+
|
|
|
+.zan-con .zan-contain {
|
|
|
+ display: flex;
|
|
|
+ justify-content: space-between;
|
|
|
+ flex-direction: column;
|
|
|
+}
|
|
|
+
|
|
|
+.zan-con .zan-contain p {
|
|
|
+ font-size: 2.25rem;
|
|
|
+}
|
|
|
+
|
|
|
+.zan-con .zan-contain p:first-child {
|
|
|
+ font-size: 0.875rem;
|
|
|
+ line-height: 1.5;
|
|
|
+}
|
|
|
+
|
|
|
+.zan-sub {
|
|
|
+ text-align: right;
|
|
|
+ margin-top: 1.25rem;
|
|
|
+ color: #a5a5a5;
|
|
|
+ font-size: 0.875rem;
|
|
|
+}
|
|
|
+
|
|
|
+.table-interface {
|
|
|
+ height: calc(100% - 3rem);
|
|
|
+}
|
|
|
+
|
|
|
+.info-top {
|
|
|
+ padding: 1.25rem 0;
|
|
|
+ display: flex;
|
|
|
+ justify-content: space-between;
|
|
|
+ border-bottom: 0.0625rem #a5a5a5 solid;
|
|
|
+}
|
|
|
+
|
|
|
+.o-span {
|
|
|
+ cursor: pointer;
|
|
|
+ color: rgb(7, 152, 244);
|
|
|
+}
|
|
|
+
|
|
|
+.collection-con {
|
|
|
+ width: 100%;
|
|
|
+ overflow-x: hidden;
|
|
|
+ overflow-y: auto;
|
|
|
+ height: 60vh;
|
|
|
+}
|
|
|
+
|
|
|
+.collection-con ul {
|
|
|
+ display: flex;
|
|
|
+ flex-wrap: wrap;
|
|
|
+ margin-top: 1.25rem;
|
|
|
+}
|
|
|
+
|
|
|
+.collection-con ul li {
|
|
|
+ width: 24%;
|
|
|
+ margin-right: 1%;
|
|
|
+ cursor: pointer;
|
|
|
+ font-size: 0.8rem;
|
|
|
+ color: #2d2d2d;
|
|
|
+ margin-bottom: 1.25rem;
|
|
|
+}
|
|
|
+
|
|
|
+.collection-con ul .li-img {
|
|
|
+ position: relative;
|
|
|
+ height: 250px;
|
|
|
+ font-size: 0;
|
|
|
+}
|
|
|
+
|
|
|
+.collection-con ul .elchbox {
|
|
|
+ position: absolute;
|
|
|
+ left: 10px;
|
|
|
+ top: 5px;
|
|
|
+}
|
|
|
+
|
|
|
+.collection-con ul .li-img div span {
|
|
|
+ margin-right: 0.625rem;
|
|
|
+}
|
|
|
+
|
|
|
+.collection-con ul img {
|
|
|
+ width: 100%;
|
|
|
+}
|
|
|
+
|
|
|
+.collection-con {
|
|
|
+ li {
|
|
|
+ position: relative;
|
|
|
+ .li-txt {
|
|
|
+ display: flex;
|
|
|
+ justify-content: center;
|
|
|
+ align-items: center;
|
|
|
+ background: #dedede;
|
|
|
+ font-size: 16px;
|
|
|
+ line-height: 2;
|
|
|
+ }
|
|
|
+ .oper {
|
|
|
+ position: absolute;
|
|
|
+ top: 10px;
|
|
|
+ right: 10px;
|
|
|
+ display: none;
|
|
|
+ > img {
|
|
|
+ width: 40px;
|
|
|
+ height: 40px;
|
|
|
+ background: #b63c25;
|
|
|
+ margin-left: 20px;
|
|
|
+ border-radius: 4px;
|
|
|
+ padding: 5px;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ &:hover {
|
|
|
+ .oper {
|
|
|
+ display: block;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+}
|
|
|
+
|
|
|
+.add-con {
|
|
|
+ display: flex;
|
|
|
+ justify-content: space-between;
|
|
|
+}
|
|
|
+
|
|
|
+.add-left {
|
|
|
+ flex: 1;
|
|
|
+}
|
|
|
+
|
|
|
+.add-right {
|
|
|
+ flex: 1;
|
|
|
+ margin-left: 10%;
|
|
|
+}
|
|
|
+</style>
|
|
|
+
|
|
|
+<style>
|
|
|
+.avatar-uploader .el-upload {
|
|
|
+ border: 1px dashed #d9d9d9;
|
|
|
+ border-radius: 6px;
|
|
|
+ cursor: pointer;
|
|
|
+ position: relative;
|
|
|
+ overflow: hidden;
|
|
|
+}
|
|
|
+.avatar-uploader .el-upload:hover {
|
|
|
+ border-color: #409eff;
|
|
|
+}
|
|
|
+.avatar-uploader-icon {
|
|
|
+ font-size: 28px;
|
|
|
+ color: #8c939d;
|
|
|
+ width: 178px;
|
|
|
+ height: 178px;
|
|
|
+ line-height: 178px;
|
|
|
+ text-align: center;
|
|
|
+}
|
|
|
+.avatar {
|
|
|
+ width: 178px;
|
|
|
+ /* height: 178px; */
|
|
|
+ display: block;
|
|
|
+}
|
|
|
+
|
|
|
+.el-textarea__inner {
|
|
|
+ padding-right: 60px !important;
|
|
|
+}
|
|
|
+</style>
|
