|
|
@@ -0,0 +1,613 @@
|
|
|
+<template>
|
|
|
+ <div class="tab4-0">
|
|
|
+ <div class="search" @keyup.enter="mySearch" v-show="!details">
|
|
|
+ <el-input placeholder="请输入关键词..." suffix-icon="el-icon-search" v-model="formData.searchKey">
|
|
|
+ </el-input>
|
|
|
+ <span class="btn" @click="mySearch"></span>
|
|
|
+ </div>
|
|
|
+
|
|
|
+ <!-- 内容 -->
|
|
|
+ <template>
|
|
|
+ <div class="collapse" v-if="myArr?.length > 0">
|
|
|
+ <el-collapse v-model="activeName" accordion>
|
|
|
+ <el-collapse-item title="学校宣传片" name="1">
|
|
|
+ <div class="noData" v-if="VideoUrl?.length === 0 || VideoUrl?.length === undefined">没有找到</div>
|
|
|
+ <div class="name">
|
|
|
+ <div class="imgBox" v-for="(item, index) in VideoUrl" :key="item.id">
|
|
|
+ <video :src="item.filePath" style="width: 275px; height: 150px; cursor: pointer;" controls></video>
|
|
|
+ <div class="imgName">{{ item.name }}</div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </el-collapse-item>
|
|
|
+ <el-collapse-item title="美丽校园" name="2">
|
|
|
+ <div class="noData" v-if="ImgUrl?.length === 0 || ImgUrl?.length === undefined">没有找到</div>
|
|
|
+ <div class="name" @click="lookBigImg(item, index)">
|
|
|
+ <div class="imgBox" v-for="(item, index) in ImgUrl" :key="item.id">
|
|
|
+ <el-image :src="item.thumb" style="width: 275px; height: 150px; cursor: pointer;"
|
|
|
+ :preview-src-list="[item.thumb]">
|
|
|
+ </el-image>
|
|
|
+ <div class="imgName">{{ item.name }}</div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </el-collapse-item>
|
|
|
+ <el-collapse-item title="军歌嘹亮" name="3">
|
|
|
+ <div class="noData" v-if="MusicUrl?.length === 0 || MusicUrl?.length === undefined">没有找到</div>
|
|
|
+ <div class="name" style="flex-direction: column;">
|
|
|
+ <div class="musicBox" v-for="(item, index) in MusicUrl" :key="item.id">
|
|
|
+ <div class="triangle"></div>
|
|
|
+ <div class="musicIndex">{{ index + 1 }}</div>
|
|
|
+ <div class="musicName" @click="playMusic(item)">{{ item.name }}</div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </el-collapse-item>
|
|
|
+ <el-collapse-item title="学籍查询" name="4">
|
|
|
+ <div class="noData" v-if="StudentUrl?.length === 0 || StudentUrl?.length === undefined">没有找到</div>
|
|
|
+ <div class="name">
|
|
|
+ <div class="imgBox" style="width: 200px; height: 233px;" v-for="(item, index) in StudentUrl"
|
|
|
+ :key="item.id">
|
|
|
+ <el-image :src="baseURL + item.thumb" @click.native="(e) => lookStudent(e, item)"
|
|
|
+ style=" width: 200px; height: 233px; cursor: pointer;">
|
|
|
+ </el-image>
|
|
|
+ <div class="imgName">{{ item.name }}</div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </el-collapse-item>
|
|
|
+ </el-collapse>
|
|
|
+ </div>
|
|
|
+ </template>
|
|
|
+ <!-- <div class="conten" v-if="myArr?.length !== 0">
|
|
|
+ <div class="videoType">
|
|
|
+ <div class="title1">学校宣传片：</div>
|
|
|
+ <div class="row1" v-for="(item, index) in VideoUrl" :key="item.id">
|
|
|
+ <video :src="item.filePath" controls style="width: 220px; height: 140px"></video>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <div class="imgType">
|
|
|
+ <div class="title2">美丽校园：</div>
|
|
|
+ </div>
|
|
|
+ <div class="musicType">
|
|
|
+ <div class="title3">军歌嘹亮：</div>
|
|
|
+ </div>
|
|
|
+ <div class="studentType">
|
|
|
+ <div class="title4">学籍查询：</div>
|
|
|
+ </div>
|
|
|
+ <div class="row" v-for="(item, index) in myArr" :key="item.id">
|
|
|
+
|
|
|
+ <div class="name" :title="item.name">{{ item.name }}</div>
|
|
|
+ </div>
|
|
|
+ </div> -->
|
|
|
+ <div class="tab4-0 conNull" v-if="myArr?.length === 0 || myArr?.length === undefined">
|
|
|
+ <img src="@/assets/img/nullData.png" alt="">
|
|
|
+ <p>暂无查询数据</p>
|
|
|
+ </div>
|
|
|
+ <!-- 分页 -->
|
|
|
+ <!-- <div class="paging">
|
|
|
+ <el-pagination layout="prev,pager,next,jumper" :total="total" :current-page="formData.pageNum"
|
|
|
+ @current-change="currentChange" @size-change="sizeChange">
|
|
|
+ </el-pagination>
|
|
|
+ </div> -->
|
|
|
+ <!-- 大图预览里面的文字显示 -->
|
|
|
+ <div class="imgBigShow" v-if="imgBigShow">{{ imgBigTxt }}</div>
|
|
|
+
|
|
|
+ <StudentDetails :details.sync="details" :baseURL="baseURL" :txtObj="txtObj" />
|
|
|
+ <div class="audioBox" v-if="MusicUrl && musicShow">
|
|
|
+ <div class="closeBtn" @click="closeAudio">✖</div>
|
|
|
+ <div class="audioDia">
|
|
|
+ <Audio :audioSrc="musicItem.filePath" :title="musicItem.name" />
|
|
|
+ </div>
|
|
|
+
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+</template>
|
|
|
+<script>
|
|
|
+import StudentDetails from "./StudentDetails.vue"
|
|
|
+import Audio from "./audio.vue"
|
|
|
+import axios from "@/utils/request"
|
|
|
+import { getAllListPage, webVisit, studentList } from "@/utils/api"
|
|
|
+export default {
|
|
|
+ name: "tab4-0",
|
|
|
+ components: { StudentDetails, Audio },
|
|
|
+ data() {
|
|
|
+ // 这里存放数据
|
|
|
+ return {
|
|
|
+ musicShow: false,
|
|
|
+ musicItem: {},
|
|
|
+ details: false,
|
|
|
+ txtObj: {},
|
|
|
+ tempNum: 0,
|
|
|
+ imgBigTxt: "",
|
|
|
+ imgBigShow: false,
|
|
|
+ myArr: [],
|
|
|
+ total: 0,
|
|
|
+ formData: {
|
|
|
+ pageNum: 1,
|
|
|
+ pageSize: 999,
|
|
|
+ searchKey: "",
|
|
|
+ },
|
|
|
+ activeName: "1",
|
|
|
+ baseURL: "",
|
|
|
+ ImgUrl: [""],
|
|
|
+ VideoUrl: [""],
|
|
|
+ MusicUrl: [""],
|
|
|
+ StudentUrl: [""],
|
|
|
+ }
|
|
|
+ },
|
|
|
+ // 监听属性 类似于data概念
|
|
|
+ computed: {},
|
|
|
+ // 监控data中的数据变化
|
|
|
+ watch: {
|
|
|
+ },
|
|
|
+ // 方法集合
|
|
|
+ methods: {
|
|
|
+ //点击图片，查看大图
|
|
|
+ async lookBigImg(item, index) {
|
|
|
+ this.imgBigTxt = item.name
|
|
|
+ this.tempNum = index
|
|
|
+ this.$nextTick(() => {
|
|
|
+ setTimeout(() => {
|
|
|
+ this.imgBigShow = true
|
|
|
+ //因为污染自己写滚轮缩放
|
|
|
+ document
|
|
|
+ .querySelector(".el-image-viewer__wrapper")
|
|
|
+ .addEventListener("mousewheel", (event) => {
|
|
|
+ let delta = 0
|
|
|
+ if (!event) event = window.event
|
|
|
+ if (event.wheelDelta) {
|
|
|
+ delta = event.wheelDelta / 120
|
|
|
+ if (window.opera) delta = -delta
|
|
|
+ } else if (event.detail) {
|
|
|
+ delta = -event.detail / 3
|
|
|
+ }
|
|
|
+ let img = document.querySelector(".el-image-viewer__img")
|
|
|
+ if (delta > 0) {
|
|
|
+ let width = img.width
|
|
|
+ img.width = width * 1.1
|
|
|
+ } else if (delta < 0) {
|
|
|
+ let width = img.width
|
|
|
+ if (width > 100) {
|
|
|
+ img.width = width * 0.9
|
|
|
+ }
|
|
|
+ }
|
|
|
+ })
|
|
|
+ const myTemp = document.querySelector(".el-image-viewer__mask")
|
|
|
+ myTemp.addEventListener("click", () => {
|
|
|
+ this.imgBigShow = false
|
|
|
+ })
|
|
|
+ const temp = document.querySelector(".el-image-viewer__close")
|
|
|
+ temp.addEventListener("click", () => {
|
|
|
+ this.imgBigShow = false
|
|
|
+ // console.log('我点了里面的关闭')
|
|
|
+ })
|
|
|
+ // 左按钮
|
|
|
+ const tempLeft = document.querySelector(".el-image-viewer__prev")
|
|
|
+ tempLeft.addEventListener("click", () => {
|
|
|
+ this.tempNum--
|
|
|
+ if (this.tempNum < 0) this.tempNum = this.myArr.length - 1
|
|
|
+ this.imgBigTxt = this.myArr[this.tempNum].name
|
|
|
+ })
|
|
|
+ // 右按钮
|
|
|
+ const tempRight = document.querySelector(".el-image-viewer__next")
|
|
|
+ tempRight.addEventListener("click", () => {
|
|
|
+ this.tempNum++
|
|
|
+ if (this.tempNum === this.myArr.length) this.tempNum = 0
|
|
|
+ this.imgBigTxt = this.myArr[this.tempNum].name
|
|
|
+ })
|
|
|
+ }, 100)
|
|
|
+ })
|
|
|
+ // 记录访问量
|
|
|
+ await webVisit("img", item.id)
|
|
|
+ },
|
|
|
+ async lookStudent(e, val) {
|
|
|
+ e.stopPropagation()
|
|
|
+ e.preventDefault()
|
|
|
+ if (val.type === "student") {
|
|
|
+ this.details = true
|
|
|
+ this.txtObj = val
|
|
|
+ // 记录访问量
|
|
|
+ await webVisit("student", val.id)
|
|
|
+ }
|
|
|
+ },
|
|
|
+ playMusic(item) {
|
|
|
+ this.musicShow = true
|
|
|
+ this.musicItem = item
|
|
|
+ },
|
|
|
+ closeAudio() {
|
|
|
+ this.musicShow = false
|
|
|
+ },
|
|
|
+ // 分页器方法
|
|
|
+ currentChange(val) {
|
|
|
+ // console.log('当前页改变了', val)
|
|
|
+ this.formData.pageNum = val
|
|
|
+ this.getAllListPage(this.formData)
|
|
|
+ },
|
|
|
+ sizeChange(val) {
|
|
|
+ // console.log('条数改变了', val)
|
|
|
+ this.formData.pageNum = 1
|
|
|
+ this.formData.pageSize = val
|
|
|
+ this.getAllListPage(this.formData)
|
|
|
+ },
|
|
|
+ mySearch() {
|
|
|
+ // console.log("点击了搜索");
|
|
|
+ this.formData.pageNum = 1
|
|
|
+ this.getAllListPage(this.formData)
|
|
|
+ },
|
|
|
+ // 封装获取列表函数
|
|
|
+ async getAllListPage(data) {
|
|
|
+ const res = await getAllListPage(data)
|
|
|
+ const studentData = await studentList(data)
|
|
|
+ this.total = res.data.total
|
|
|
+ this.myArr = res.data.records
|
|
|
+ this.type = res.data.type
|
|
|
+ let tempImg = []
|
|
|
+ let tempVideo = []
|
|
|
+ let tempMusic = []
|
|
|
+ let tempStudent = []
|
|
|
+ res.data.records?.filter((record) => {
|
|
|
+ switch (record.type) {
|
|
|
+ case 'img':
|
|
|
+ tempImg.push({ id: record.id, name: record.name, thumb: this.baseURL + record.thumb })
|
|
|
+ break
|
|
|
+ case 'video':
|
|
|
+ tempVideo.push({ id: record.id, name: record.name, filePath: this.baseURL + record.filePath })
|
|
|
+ break
|
|
|
+ case 'music':
|
|
|
+ tempMusic.push({ id: record.id, name: record.name, filePath: this.baseURL + record.filePath })
|
|
|
+ break
|
|
|
+ }
|
|
|
+ })
|
|
|
+ tempStudent.push(...studentData.data.records.map(item => ({ ...item, type: "student" })))
|
|
|
+
|
|
|
+ this.ImgUrl = tempImg
|
|
|
+ this.VideoUrl = tempVideo
|
|
|
+ this.MusicUrl = tempMusic
|
|
|
+ this.StudentUrl = tempStudent
|
|
|
+ console.log(this.MusicUrl)
|
|
|
+ },
|
|
|
+ },
|
|
|
+ // 生命周期 - 创建完成（可以访问当前this实例）
|
|
|
+ created() {
|
|
|
+ // 获取服务器前缀地址
|
|
|
+ this.baseURL = axios.defaults.baseURL
|
|
|
+ this.getAllListPage(this.formData)
|
|
|
+ },
|
|
|
+ // 生命周期 - 挂载完成（可以访问DOM元素）
|
|
|
+ mounted() { },
|
|
|
+ beforeCreate() { }, // 生命周期 - 创建之前
|
|
|
+ beforeMount() { }, // 生命周期 - 挂载之前
|
|
|
+ beforeUpdate() { }, // 生命周期 - 更新之前
|
|
|
+ updated() { }, // 生命周期 - 更新之后
|
|
|
+ beforeDestroy() { }, // 生命周期 - 销毁之前
|
|
|
+ destroyed() { }, // 生命周期 - 销毁完成
|
|
|
+ activated() { }, // 如果页面有keep-alive缓存功能，这个函数会触发
|
|
|
+}
|
|
|
+</script>
|
|
|
+<style lang='less' scoped>
|
|
|
+.conNull {
|
|
|
+ display: block !important;
|
|
|
+ height: 500px !important;
|
|
|
+ & > img {
|
|
|
+ margin: 100px auto 30px;
|
|
|
+ display: block;
|
|
|
+ width: 150px;
|
|
|
+ height: 150px;
|
|
|
+ }
|
|
|
+ & > p {
|
|
|
+ text-align: center;
|
|
|
+ font-size: 18px;
|
|
|
+ color: #AC1D29;
|
|
|
+ }
|
|
|
+}
|
|
|
+.tab4-0 {
|
|
|
+ position: relative;
|
|
|
+ /*修改提示文字的颜色*/
|
|
|
+ /deep/input::-webkit-input-placeholder {
|
|
|
+ /* WebKit browsers */
|
|
|
+ color: #b9412e;
|
|
|
+ }
|
|
|
+ /deep/input:-moz-placeholder {
|
|
|
+ /* Mozilla Firefox 4 to 18 */
|
|
|
+ color: #b9412e;
|
|
|
+ }
|
|
|
+ /deep/input::-moz-placeholder {
|
|
|
+ /* Mozilla Firefox 19+ */
|
|
|
+ color: #b9412e;
|
|
|
+ }
|
|
|
+ /deep/input:-ms-input-placeholder {
|
|
|
+ /* Internet Explorer 10+ */
|
|
|
+ color: #b9412e;
|
|
|
+ }
|
|
|
+ // position: relative;
|
|
|
+ padding: 30px 200px;
|
|
|
+ display: flex;
|
|
|
+ width: 100%;
|
|
|
+ height: 660px;
|
|
|
+ color: black;
|
|
|
+
|
|
|
+ .search {
|
|
|
+ z-index: 10;
|
|
|
+ /*修改提示文字的颜色*/
|
|
|
+ /deep/input::-webkit-input-placeholder {
|
|
|
+ /* WebKit browsers */
|
|
|
+ color: #be1220;
|
|
|
+ }
|
|
|
+ /deep/input:-moz-placeholder {
|
|
|
+ /* Mozilla Firefox 4 to 18 */
|
|
|
+ color: #be1220;
|
|
|
+ }
|
|
|
+ /deep/input::-moz-placeholder {
|
|
|
+ /* Mozilla Firefox 19+ */
|
|
|
+ color: #be1220;
|
|
|
+ }
|
|
|
+ /deep/input:-ms-input-placeholder {
|
|
|
+ /* Internet Explorer 10+ */
|
|
|
+ color: #be1220;
|
|
|
+ }
|
|
|
+
|
|
|
+ width: 700px;
|
|
|
+ height: 50px;
|
|
|
+ position: absolute;
|
|
|
+ top: -25px;
|
|
|
+ left: 50%;
|
|
|
+ transform: translateX(-50%);
|
|
|
+ /deep/.el-input__suffix {
|
|
|
+ width: 50px;
|
|
|
+ height: 50px;
|
|
|
+ font-size: 20px;
|
|
|
+ right: 0;
|
|
|
+ }
|
|
|
+ /deep/.el-input__inner {
|
|
|
+ border-radius: 50px;
|
|
|
+ height: 50px;
|
|
|
+ border: 1px solid #be1220;
|
|
|
+ }
|
|
|
+ .btn {
|
|
|
+ cursor: pointer;
|
|
|
+ position: absolute;
|
|
|
+ right: 0;
|
|
|
+ top: 0;
|
|
|
+ height: 50px;
|
|
|
+ width: 50px;
|
|
|
+ border-radius: 50%;
|
|
|
+ background-color: transparent;
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ .collapse {
|
|
|
+ width: 100%;
|
|
|
+ height: 100%;
|
|
|
+ .el-collapse {
|
|
|
+ height: 97%;
|
|
|
+ padding: 0 16px;
|
|
|
+ background: white;
|
|
|
+ border-radius: 10px;
|
|
|
+ border: 1px solid #dfdada;
|
|
|
+ display: flex;
|
|
|
+ flex-direction: column;
|
|
|
+ gap: 4px;
|
|
|
+ }
|
|
|
+ .el-collapse-item {
|
|
|
+ height: 100%;
|
|
|
+ }
|
|
|
+ /deep/.el-collapse-item__header {
|
|
|
+ font-size: 24px;
|
|
|
+ height: 100%;
|
|
|
+ font-weight: 600;
|
|
|
+ color: #6d0e0e;
|
|
|
+
|
|
|
+ }
|
|
|
+ /deep/.el-collapse-item__wrap {
|
|
|
+ height: fit-content;
|
|
|
+ max-height: 300px;
|
|
|
+ overflow: auto;
|
|
|
+ }
|
|
|
+ .noData {
|
|
|
+ font-size: 20px;
|
|
|
+ color: #be1220;
|
|
|
+ text-align: center;
|
|
|
+ }
|
|
|
+ .name {
|
|
|
+ width: 100%;
|
|
|
+ font-size: 20px;
|
|
|
+ display: flex;
|
|
|
+ flex-wrap: wrap;
|
|
|
+ gap: 4px;
|
|
|
+ color: #be1220;
|
|
|
+
|
|
|
+ .imgBox {
|
|
|
+ width: 275px;
|
|
|
+ height: 170px;
|
|
|
+ opacity: 0.95;
|
|
|
+ display: flex;
|
|
|
+ flex-direction: column;
|
|
|
+ justify-content: center;
|
|
|
+ align-items: center;
|
|
|
+ &:hover {
|
|
|
+ opacity: 1;
|
|
|
+ .imgName {
|
|
|
+ background: linear-gradient(to top, rgba(190, 18, 32, 1), rgba(190, 18, 32, 0.8));
|
|
|
+ color: #fff;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ .imgName {
|
|
|
+ pointer-events: none;
|
|
|
+ width: 100%;
|
|
|
+ height: 20px;
|
|
|
+ color: #000;
|
|
|
+ text-align: center;
|
|
|
+ font-size: 14px;
|
|
|
+ line-height: 20px;
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ .musicBox {
|
|
|
+ width: 500px;
|
|
|
+ height: 50px;
|
|
|
+ display: flex;
|
|
|
+ justify-content: left;
|
|
|
+ align-items: center;
|
|
|
+ cursor: pointer;
|
|
|
+ &:hover {
|
|
|
+ color: #b9412e;
|
|
|
+ .triangle {
|
|
|
+ border-left: 10px solid #b9412e;
|
|
|
+ width: 0;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ .triangle {
|
|
|
+ width: 10px;
|
|
|
+ height: 0;
|
|
|
+ border-top: 10px solid transparent;
|
|
|
+ border-bottom: 10px solid transparent;
|
|
|
+ }
|
|
|
+ .musicIndex {
|
|
|
+ padding-left: 10px;
|
|
|
+ width: 40px;
|
|
|
+ }
|
|
|
+
|
|
|
+
|
|
|
+ }
|
|
|
+
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ .conten {
|
|
|
+ width: 100%;
|
|
|
+ height: 530px;
|
|
|
+ display: flex;
|
|
|
+ flex-direction: column;
|
|
|
+ gap: 4px;
|
|
|
+ .videoType,
|
|
|
+ .imgType,
|
|
|
+ .musicType,
|
|
|
+ .studentType {
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ gap: 4px;
|
|
|
+ }
|
|
|
+ .title1,
|
|
|
+ .title2,
|
|
|
+ .title3,
|
|
|
+ .title4 {
|
|
|
+ width: 130px;
|
|
|
+ height: 140px;
|
|
|
+ font-size: 18px;
|
|
|
+ color: #be1220;
|
|
|
+ }
|
|
|
+ .row {
|
|
|
+ position: relative;
|
|
|
+ display: flex;
|
|
|
+ flex-direction: column;
|
|
|
+ align-self: start;
|
|
|
+ justify-content: center;
|
|
|
+ color: #626260;
|
|
|
+ background-color: #fff;
|
|
|
+ box-shadow: 1px 1px 2px 2px #ccc;
|
|
|
+ cursor: pointer;
|
|
|
+ width: 200px;
|
|
|
+ height: 145px;
|
|
|
+ /deep/.el-image__preview {
|
|
|
+ object-fit: cover;
|
|
|
+ }
|
|
|
+ & > img {
|
|
|
+ width: 100%;
|
|
|
+ height: 120px;
|
|
|
+ }
|
|
|
+ .name {
|
|
|
+ align-self: center;
|
|
|
+ position: absolute;
|
|
|
+ top: 90.3%;
|
|
|
+ left: 50%;
|
|
|
+ transform: translate(-50%, -50%);
|
|
|
+ width: 100%;
|
|
|
+ height: 24px;
|
|
|
+ background-color: rgba(255, 255, 255, 0.5);
|
|
|
+ color: #fff;
|
|
|
+ padding: 0 5px;
|
|
|
+ overflow: hidden;
|
|
|
+ text-overflow: ellipsis;
|
|
|
+ white-space: nowrap;
|
|
|
+ font-size: 14px;
|
|
|
+ text-align: center;
|
|
|
+ }
|
|
|
+ & > p {
|
|
|
+ padding: 0 5px;
|
|
|
+ overflow: hidden;
|
|
|
+ text-overflow: ellipsis;
|
|
|
+ white-space: nowrap;
|
|
|
+ font-size: 14px;
|
|
|
+ text-align: center;
|
|
|
+ }
|
|
|
+ &:hover {
|
|
|
+ background-color: #be1220;
|
|
|
+ color: #fff;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ .row:nth-of-type(4n) {
|
|
|
+ margin-right: 0;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ .paging {
|
|
|
+ position: absolute;
|
|
|
+ left: 50%;
|
|
|
+ bottom: 10px;
|
|
|
+ transform: translateX(-50%);
|
|
|
+ /deep/.el-input__inner {
|
|
|
+ width: 30px;
|
|
|
+ height: 30px !important;
|
|
|
+ background-color: transparent;
|
|
|
+ border-radius: 50%;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ .imgBigShow {
|
|
|
+ padding: 3px 5px;
|
|
|
+ background-color: rgba(0, 0, 0, 0.7);
|
|
|
+ font-size: 18px;
|
|
|
+ z-index: 9999;
|
|
|
+ position: fixed;
|
|
|
+ left: 50%;
|
|
|
+ transform: translateX(-50%);
|
|
|
+ bottom: 100px;
|
|
|
+ color: #fff;
|
|
|
+ }
|
|
|
+
|
|
|
+ .audioBox {
|
|
|
+ position: absolute;
|
|
|
+ top: 40%;
|
|
|
+ left: 50%;
|
|
|
+ transform: translate(-50%, -50%);
|
|
|
+ width: 40%;
|
|
|
+ height: 30%;
|
|
|
+ background-color: rgba(0, 0, 0, 0.7);
|
|
|
+ .closeBtn {
|
|
|
+ position: absolute;
|
|
|
+ right: 10px;
|
|
|
+ top: 10px;
|
|
|
+ color: #fff;
|
|
|
+ cursor: pointer;
|
|
|
+ font-size: 20px;
|
|
|
+ }
|
|
|
+ .audioDia {
|
|
|
+ display: flex;
|
|
|
+ justify-content: center;
|
|
|
+ align-items: center;
|
|
|
+
|
|
|
+ width: 100%;
|
|
|
+ height: 70px;
|
|
|
+ margin: 40px 0;
|
|
|
+ position: fixed;
|
|
|
+ left: 50%;
|
|
|
+ transform: translateX(-50%);
|
|
|
+ top: 20%;
|
|
|
+ /deep/.audiocon {
|
|
|
+ width: 70%;
|
|
|
+ margin: 0;
|
|
|
+ .adcon {
|
|
|
+ left: 155px;
|
|
|
+ right: 0;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+}
|
|
|
+</style>
|
lanxin