1234567891011121314151617181920212223242526272829303132333435363738394041424344454647484950515253545556575859606162636465666768697071727374757677787980818283848586878889909192939495969798991001011021031041051061071081091101111121131141151161171181191201211221231241251261271281291301311321331341351361371381391401411421431441451461471481491501511521531541551561571581591601611621631641651661671681691701711721731741751761771781791801811821831841851861871881891901911921931941951961971981992002012022032042052062072082092102112122132142152162172182192202212222232242252262272282292302312322332342352362372382392402412422432442452462472482492502512522532542552562572582592602612622632642652662672682692702712722732742752762772782792802812822832842852862872882892902912922932942952962972982993003013023033043053063073083093103113123133143153163173183193203213223233243253263273283293303313323333343353363373383393403413423433443453463473483493503513523533543553563573583593603613623633643653663673683693703713723733743753763773783793803813823833843853863873883893903913923933943953963973983994004014024034044054064074084094104114124134144154164174184194204214224234244254264274284294304314324334344354364374384394404414424434444454464474484494504514524534544554564574584594604614624634644654664674684694704714724734744754764774784794804814824834844854864874884894904914924934944954964974984995005015025035045055065075085095105115125135145155165175185195205215225235245255265275285295305315325335345355365375385395405415425435445455465475485495505515525535545555565575585595605615625635645655665675685695705715725735745755765775785795805815825835845855865875885895905915925935945955965975985996006016026036046056066076086096106116126136146156166176186196206216226236246256266276286296306316326336346356366376386396406416426436446456466476486496506516526536546556566576586596606616626636646656666676686696706716726736746756766776786796806816826836846856866876886896906916926936946956966976986997007017027037047057067077087097107117127137147157167177187197207217227237247257267277287297307317327337347357367377387397407417427437447457467477487497507517527537547557567577587597607617627637647657667677687697707717727737747757767777787797807817827837847857867877887897907917927937947957967977987998008018028038048058068078088098108118128138148158168178188198208218228238248258268278288298308318328338348358368378388398408418428438448458468478488498508518528538548558568578588598608618628638648658668678688698708718728738748758768778788798808818828838848858868878888898908918928938948958968978988999009019029039049059069079089099109119129139149159169179189199209219229239249259269279289299309319329339349359369379389399409419429439449459469479489499509519529539549559569579589599609619629639649659669679689699709719729739749759769779789799809819829839849859869879889899909919929939949959969979989991000100110021003100410051006100710081009101010111012101310141015101610171018101910201021102210231024102510261027102810291030103110321033103410351036103710381039104010411042104310441045104610471048104910501051105210531054105510561057 |
- <template>
- <div class="p-image-upload">
- <div
- v-if="!previewMode && (disabledStatus ? showTrigger : true)"
- :class="[
- 'p-image-upload-centent',
- disabledStatus ? 'p-image-upload-disabled' : '',
- ]"
- >
- <!-- <Add /> -->
- <img
- src="../static/iconSvg/add.svg"
- style="width: 20px; height: 20px"
- alt=""
- />
- <input
- class="p-add-image-input"
- type="file"
- :multiple="multiple"
- :accept="acceptExtend"
- :disabled="disabledStatus"
- @dragenter="inputDrag"
- @change="changeFileChose"
- />
- <span class="p-label">添加图片</span>
- <span class="p-number">{{
- `${renderImageList.length}/${limitMaxNumber}`
- }}</span>
- </div>
- <div
- :class="['p-image-list', `p-image-list-${item.status}`]"
- v-for="(item, index) in renderImageList"
- :key="index"
- >
- <!-- <Delete v-if="!previewMode" @click="deleteImage(item)" class="p-delete-icon" />-->
- <!-- <Delete
- v-if="!previewMode"
- @click.native="deleteImage(item)"
- class="p-delete-icon"
- /> -->
- <img
- v-if="!previewMode"
- @click="deleteImage(item)"
- class="p-delete-icon"
- src="../static/iconSvg/clear2.svg"
- alt=""
- />
- <template v-if="item.status === 'pending'">
- <span class="p-list-label">上传中</span>
- <div class="p-progress-bar">
- <div
- class="p-progress-rate"
- :style="{ width: item.progressRate + '%' }"
- ></div>
- </div>
- </template>
- <template v-if="item.status === 'done'">
- <div class="p-small-image-box">
- <img
- @click="showBigImage(item)"
- class="p-list-image"
- :src="hosts + item.id"
- alt="image"
- />
- </div>
- </template>
- <template v-if="item.status === 'fail'">
- <!-- <FailImg class="p-fail-icon" /> -->
- <span class="p-fail-text">上传图片失败</span>
- </template>
- </div>
- <div class="p-image-modal" v-show="displayModal">
- <div class="p-image-modal-back"></div>
- <div class="p-image-header">
- <div class="p-size-box">
- <!-- <OriginalSize v-if="!isZoomImage" />
- <SmallImage v-else /> -->
- <!-- <img
- v-if="!isZoomImage"
- @click="deleteImage(item)"
- src="../static/iconSvg/original_size.svg"
- alt=""
- />
- <img
- v-else
- @click="deleteImage(item)"
- src="../static/iconSvg/small_image.svg"
- /> -->
- <span
- class="p-size-label"
- @click="resetOriginSize"
- v-if="!isZoomImage"
- >原始尺寸</span
- >
- <span class="p-size-label" @click="adaptionScreen" v-else
- >适应屏幕</span
- >
- </div>
- <div class="p-download-box" @click="downloadFile">
- <!-- <Download /> -->
- <span class="p-size-label">下载原图</span>
- </div>
- <div class="p-close-box">
- <!-- <Close @click.native="closeImageModal" /> -->
- <img
- @click.stop="closeImageModal(item)"
- src="../static/iconSvg/close.svg"
- />
- </div>
- </div>
- <div class="p-image-content">
- <span
- v-if="changeLimit !== 'first' && changeLimit !== 'all'"
- class="p-control p-control-left"
- @click="changeCurrentImage('prev')"
- >
- <!-- <Left /> -->
- </span>
- <div
- ref="imageBox"
- class="p-image-box"
- @mousewheel="zoomImage"
- @DOMMouseScroll="zoomImage"
- >
- <img
- ref="scaleImage"
- @mousedown="imageChosed"
- @mousemove="imageMove"
- @mouseup="imageUp"
- @mouseleave="imageLeave"
- @drop="defaultDrag"
- @dragstart="defaultDrag"
- class="p-big-image"
- :src="hosts + currentImageId"
- alt="图片名字"
- />
- </div>
- <span
- @click="changeCurrentImage('next')"
- v-if="changeLimit !== 'last' && changeLimit !== 'all'"
- class="p-control p-control-right"
- >
- <!-- <Left /> -->
- </span>
- </div>
- </div>
- </div>
- </template>
- <script>
- import Add from "../static/iconSvg/add.svg";
- import Delete from "../static/iconSvg/clear2.svg";
- import Close from "../static/iconSvg/close.svg";
- import FailImg from "../static/iconSvg/fail_img.svg";
- import Left from "../static/iconSvg/left.svg";
- import Download from "../static/iconSvg/download.svg";
- import OriginalSize from "../static/iconSvg/original_size.svg";
- import SmallImage from "../static/iconSvg/small_image.svg";
- import FileController from "@/controller/fileController";
- // import {Message} from '../Message';
- // import ajax from '../static/utils/Ajax';
- export default {
- name: "ImageUpload",
- components: {
- Add,
- Delete,
- FailImg,
- Close,
- Download,
- OriginalSize,
- SmallImage,
- Left,
- },
- data() {
- return {
- changeLimit: "", // 切换图片限制
- currentImageId: "", // 当前大图显示的id
- currentImageName: "", // 当前大图显示的name
- displayModal: false, // 查看大图的弹窗状态
- isDrop: false, // 设置文件输入框的改变
- currentChoseImages: [], // 当前选中的文件暂存
- renderImageList: [], // 显示上传的文件列表
- // 大图缩放和拖动的数据
- params: {
- zoomVal: 1,
- left: 0,
- top: 0,
- currentX: 0,
- currentY: 0,
- flag: false,
- },
- };
- },
- props: {
- /**
- * 文件服务器根
- */
- hosts: {
- type: String,
- required: false,
- default: "",
- },
- /**
- * 可上传的文件数
- */
- maxNumber: {
- type: Number,
- default: 10,
- },
- /**
- * 接受上传的文件类型
- */
- accept: {
- type: Array,
- default: () => ["gjf", "jpeg", "jpe", "jpg", "png"],
- },
- /**
- * 上传请求的地址
- */
- action: {
- type: String,
- required: false,
- },
- /**
- * 上传是否可以选择多个
- */
- multiple: {
- type: Boolean,
- default: true,
- },
- /**
- * 回显 change事件返回的数据结构
- */
- defaultFileList: {
- type: Array,
- default: () => [],
- },
- /**
- * 预览模式,为true则只做预览
- */
- previewMode: {
- type: Boolean,
- default: false,
- },
- /**
- * 超出最大限制数量后,以哪种模式显示触发器
- */
- showTrigger: {
- type: Boolean,
- default: true,
- },
- initValue: {
- type: [String, Number, Array, Object],
- default: () => {
- return [];
- },
- },
- formItemObj: {
- type: Object,
- default: () => {
- return { isMultiple: false };
- },
- },
- info: {
- type: Object,
- default: () => {
- return {};
- },
- },
- },
- computed: {
- // 限制上传
- disabledStatus() {
- return this.renderImageList.length >= this.limitMaxNumber;
- },
- // 允许上传的文件类型
- acceptExtend() {
- return this.accept.map((x) => `.${x}`).join(",");
- },
- // 最大限制数
- limitMaxNumber() {
- return this.maxNumber >= 10 ? 10 : this.maxNumber;
- },
- // 是否缩放了图片
- isZoomImage() {
- return this.params.zoomVal === 1;
- },
- },
- watch: {
- defaultFileList: {
- handler(newVal, oldVal) {
- const templateList = JSON.parse(JSON.stringify(this.defaultFileList)),
- flag = !this.previewMode
- ? this.defaultFileList.length > this.limitMaxNumber
- : false;
- if (flag)
- templateList.splice(this.limitMaxNumber, templateList.length - 1);
- this.renderImageList = templateList;
- },
- deep: true,
- },
- },
- mounted() {
- if (!Array.isArray(this.defaultFileList)) {
- this.renderImageList = [];
- } else {
- const templateList = JSON.parse(JSON.stringify(this.defaultFileList)),
- flag = !this.previewMode
- ? this.defaultFileList.length > this.limitMaxNumber
- : false;
- if (flag)
- templateList.splice(this.limitMaxNumber, templateList.length - 1);
- this.renderImageList = templateList;
- }
- },
- methods: {
- // 图片缩放
- zoomImage(event) {
- // var targetImage = document.querySelector(".p-big-image")
- const targetImage = this.$refs.scaleImage;
- this.params.zoomVal += (event.wheelDelta || event.detail * 24) / 1200;
- if (this.params.zoomVal >= 0.2) {
- targetImage.style.transform = `scale(${this.params.zoomVal})`;
- } else {
- this.params.zoomVal = 0.2;
- targetImage.style.transform = `scale(${this.params.zoomVal})`;
- return false;
- }
- },
- // 按住鼠标选择中图片事件
- imageChosed(event) {
- this.params.flag = true;
- if (!event) {
- event = window.event;
- // 防止IE文字选中
- event.target.onselectstart = function () {
- return false;
- };
- }
- if (
- event.target.style.left !== "auto" &&
- event.target.style.left !== ""
- ) {
- this.params.left = event.target.style.left;
- }
- if (event.target.style.top !== "auto" && event.target.style.top !== "") {
- this.params.top = event.target.style.top;
- }
- this.params.currentX = event.clientX;
- this.params.currentY = event.clientY;
- },
- // 鼠标离开图片区域
- imageLeave(event) {
- this.params.flag = false;
- },
- // 阻止默认的拖动事件
- defaultDrag(event) {
- event.stopPropagation();
- event.preventDefault();
- },
- // 松开鼠标事件
- imageUp(event) {
- this.params.flag = false;
- },
- // 鼠标移动事件
- imageMove(event) {
- event.preventDefault();
- if (this.params.flag) {
- const nowX = event.clientX,
- nowY = event.clientY,
- disX = nowX - this.params.currentX,
- disY = nowY - this.params.currentY;
- event.target.style.left = `${parseInt(this.params.left) + disX}px`;
- event.target.style.top = `${parseInt(this.params.top) + disY}px`;
- }
- },
- // 点击显示大图预览
- showBigImage(data) {
- const _index = this.renderImageList.findIndex(
- (item) => item.id === data.id
- );
- if (this.renderImageList.length === 1) {
- this.changeLimit = "all";
- } else if (_index === 0) {
- // 第一张图片
- this.changeLimit = "first";
- } else if (_index === this.renderImageList.length - 1) {
- // 最后一张图片
- this.changeLimit = "last";
- } else {
- this.changeLimit = "";
- }
- this.currentImageId = data.id;
- this.currentImageName = data.name;
- this.displayModal = true;
- const bigImage = this.$refs.scaleImage;
- bigImage.style.width = "auto";
- this.adaptionScreen();
- },
- // 重置图片的原始比例
- resetOriginSize() {
- // let bigImage = document.querySelector('.p-big-image'),
- const bigImage = this.$refs.scaleImage,
- bigImageBox = this.$refs.imageBox;
- bigImage.style.width = "auto";
- bigImage.style.left = "auto";
- bigImage.style.top = "0";
- bigImage.style.transform = "scale(1)";
- this.params.zoomVal = 1;
- },
- // 适应屏幕
- adaptionScreen() {
- this.$nextTick(() => {
- const bigImage = this.$refs.scaleImage,
- bigImageBox = this.$refs.imageBox,
- boxHeight = bigImageBox.clientHeight,
- imageTest = new Image();
- imageTest.src = bigImage.src;
- imageTest.onload = () => {
- const imageHeight = imageTest.naturalHeight;
- bigImage.style.width = "auto";
- bigImage.style.left = "auto";
- bigImage.style.top = "auto";
- const scaleNumber = Number((boxHeight / imageHeight).toFixed(3));
- if (scaleNumber < 1) {
- bigImage.style.transform = `scale(${scaleNumber})`;
- this.params.zoomVal = scaleNumber;
- } else {
- bigImage.style.transform = "scale(1)";
- this.params.zoomVal = 1;
- }
- };
- });
- },
- // 关闭图片预览弹窗
- closeImageModal() {
- this.params.zoomVal = 1;
- this.displayModal = false;
- },
- // 切换大图
- changeCurrentImage(flag) {
- const _index = this.renderImageList.findIndex(
- (item) => item.id === this.currentImageId
- );
- if (flag === "prev") {
- this.currentImageId = this.renderImageList[_index - 1].id;
- if (_index === 1) {
- // 第一张图片
- this.changeLimit = "first";
- } else {
- this.changeLimit = "";
- }
- } else {
- this.currentImageId = this.renderImageList[_index + 1].id;
- if (_index === this.renderImageList.length - 2) {
- // 最后一张图片
- this.changeLimit = "last";
- } else {
- this.changeLimit = "";
- }
- }
- this.adaptionScreen();
- },
- // 文件上传框的拖拽事件
- inputDrag(evt) {
- this.isDrop = true;
- return false;
- },
- // 检查拖拽上传的文件是否符合accept限制的文件类型
- checkFileType(files) {
- let flag = true;
- for (let i = 0; i < files.length; i++) {
- const item = files[i],
- fileType = item.name.split(".").pop();
- if (
- this.accept.findIndex(
- (item) => item.toLocaleLowerCase() === fileType.toLocaleLowerCase()
- ) === -1
- ) {
- this.$message.error("含有非支持文件格式");
- flag = false;
- return false;
- }
- }
- return flag;
- },
- // 文件上传事件
- changeFileChose(evt) {
- console.log(
- "%c [ evt ]: ",
- "color: #bf2c9f; background: pink; font-size: 13px;",
- evt
- );
- if (this.isDrop) {
- document.querySelector(".p-add-image-input").value = null;
- this.isDrop = false;
- return false;
- }
- let { files } = evt.target;
- if (!this.checkFileType(files)) {
- return false;
- }
- // 上传文件加上当前上传文件数已经大于等于限制上传数
- if (this.renderImageList.length + files.length >= this.limitMaxNumber) {
- const templateFiles = [];
- for (
- let i = 0;
- i < this.limitMaxNumber - this.renderImageList.length;
- i++
- ) {
- templateFiles.push(files[i]);
- }
- files = templateFiles;
- }
- if (files) this.fileReader(files);
- document.querySelector(".p-add-image-input").value = null;
- },
- /**
- * 文件上传读取的处理
- *
- */
- fileReader(files) {
- for (let index = 0; index < files.length; index++) {
- const item = files[index];
- this.featchUpload(item);
- }
- },
- /**
- * 上传文
- */
- async featchUpload(fileItem) {
- console.log(this.renderImageList, " 22");
- const _currentIndex = this.renderImageList.findIndex(
- (item) => item.name === fileItem.name
- );
- if (_currentIndex !== -1) {
- this.renderImageList.splice(_currentIndex, 1, {
- status: "pending",
- name: fileItem.name,
- progressRate: 0,
- });
- } else {
- this.renderImageList.push({
- status: "pending",
- name: fileItem.name,
- progressRate: 0,
- });
- }
- const _this = this,
- formData = new FormData();
- formData.append("file", fileItem);
- console.log(
- "%c [ formData ]: ",
- "color: #bf2c9f; background: pink; font-size: 13px;",
- fileItem
- );
- const uploadResult = await FileController.uploadFiles({
- uploadProgressCall: function (_obj) {
- console.log("uploadProgressCall", _obj);
- },
- oneUploadedCall: async (_obj) => {
- console.log("oneUploadedCall", _obj);
- const viewUrl = await FileController.getImgViewUrl(_obj.fileId);
- console.log(viewUrl);
- const _data = {
- url: viewUrl,
- fileId: _obj.fileId,
- };
- // const _data =
- // typeof response === "string" ? JSON.parse(response) : response;
- _this.handleData(fileItem, _data, "done");
- },
- files: [
- {
- fileName: fileItem.name,
- file: fileItem,
- },
- ],
- });
- console.log(
- "%c [ 上传完成 ]: ",
- "color: #bf2c9f; background: pink; font-size: 13px;",
- uploadResult
- );
- // ajax({
- // type: 'POST',
- // url: `${this.hosts}${this.action}`,
- // onprogress: (event) => {
- // _this.setProgress(event, fileItem);
- // },
- // dataType: 'json',
- // data: formData,
- // success(response) {
- // const _data = typeof response === 'string' ? JSON.parse(response) : response;
- // _this.handleData(fileItem, _data, 'done');
- // },
- // error(error) {
- // _this.handleData(fileItem, error, 'fail');
- // }
- // });
- },
- // 文件上传的进度处理
- setProgress(event, file) {
- const _index = this.renderImageList.findIndex(
- (item) => item.name === file.name
- );
- const loading = Math.round((event.loaded / event.total) * 100);
- this.renderImageList.splice(_index, 1, {
- status: "pending",
- name: file.name,
- progressRate: loading,
- });
- },
- /**
- * 处理上传返回的数据
- * 参数 【当前上传文件,当前返回值,上传状态】
- */
- handleData(fileItem, response, status) {
- const _this = this,
- _currentIndex = _this.renderImageList.findIndex(
- (item) => item.name === fileItem.name
- );
- if (_currentIndex !== -1) {
- // 判断上传是否成功
- if (status === "done") {
- const templateFile = {
- id: response.url, // 唯一标识,使用接口返回的url
- name: fileItem.name, // 文件名
- status, // 上传状态
- url: response.url, // 文件的url
- suffix: fileItem.type, // 文件格式
- progressRate: 100, // 上传进度
- size: fileItem.size,
- fileId: response.fileId,
- };
- _this.renderImageList.splice(_currentIndex, 1, templateFile);
- } else {
- // 上传不成功
- const templateFile = {
- id: "", // 唯一标识,使用接口返回的url
- name: fileItem.name, // 文件名
- status, // 上传状态
- url: "", // 文件的url
- suffix: "", // 文件格式
- progressRate: 0, // 上传进度
- size: 0,
- };
- _this.renderImageList.splice(_currentIndex, 1, templateFile);
- }
- }
- this.$emit("change", this.renderImageList);
- },
- // 删除当前项,并返回改变的数据
- deleteImage(data) {
- const currentIndex = this.renderImageList.findIndex(
- (item) => item.name === data.name
- );
- this.renderImageList.splice(currentIndex, 1);
- this.$emit("change", this.renderImageList);
- },
- // 下载
- async downloadFile() {
- // 下载资源方法
- const url = `${this.hosts}${this.currentImageId}`;
- const response = await fetch(url),
- blob = await response.blob(),
- objectUrl = window.URL.createObjectURL(blob),
- aTag = document.createElement("a");
- aTag.href = objectUrl;
- aTag.download = this.currentImageName;
- aTag.click();
- aTag.remove();
- },
- },
- };
- </script>
- <style lang="less">
- // Width variables (appears count calculates by raw css)
- @width1: 112px; // Appears 2 times
- @width2: 100%; // Appears 9 times
- @width3: 16px; // Appears 4 times
- // Height variables (appears count calculates by raw css)
- @height0: calc(100% - 56px); // Appears 2 times
- @height1: 112px; // Appears 2 times
- @height2: 100%; // Appears 5 times
- @height3: 16px; // Appears 4 times
- @height8: 4px; // Appears 2 times
- @grey-50: #f8f9fa;
- @grey-300: #e4e5e7;
- @grey-400: #c3c7cb;
- @grey-500: #8d9399;
- @grey-600: #646c73;
- @grey-900: #1f2429;
- @blue-500: #0091ff;
- @theme: #fff;
- .p-image-upload {
- display: inline-flex;
- flex-wrap: wrap;
- font-size: 0;
- width: @width2;
- .p-image-upload-centent {
- align-items: center;
- background: @grey-50;
- border-radius: 4px;
- border: 1px dashed @grey-400;
- cursor: pointer;
- display: flex;
- flex-direction: column;
- height: @height1;
- margin-bottom: 20px;
- margin-right: 12px;
- padding-bottom: 12px;
- padding-top: 20px;
- position: relative;
- transition: all 0.36s;
- width: @width1;
- .p-add-image-input {
- background: none;
- cursor: pointer;
- height: @height2;
- left: 0;
- opacity: 0;
- position: absolute;
- top: 0;
- width: @width2;
- }
- .p-label {
- color: @grey-900;
- cursor: pointer;
- font-size: 14px;
- font-weight: 400;
- line-height: 22px;
- margin-bottom: 4px;
- margin-top: 8px;
- }
- .p-number {
- color: @grey-500;
- font-size: 14px;
- font-weight: 400;
- line-height: 22px;
- }
- &:hover {
- border-color: @blue-500;
- }
- }
- .p-image-upload-disabled {
- cursor: default;
- .p-add-image-input {
- cursor: default;
- }
- .p-label {
- color: @grey-400;
- cursor: not-allowed;
- }
- .p-number {
- color: @grey-400;
- }
- svg {
- rect {
- fill: @grey-400;
- }
- }
- &:hover {
- border-color: @grey-400;
- }
- }
- .p-image-list {
- align-items: center;
- background: @grey-50;
- border-radius: 4px;
- border: 1px dashed @grey-400;
- cursor: pointer;
- display: flex;
- flex-direction: column;
- height: @height1;
- margin-bottom: 20px;
- margin-right: 12px;
- position: relative;
- width: @width1;
- .p-delete-icon {
- height: @height3;
- opacity: 0;
- position: absolute;
- right: 8px;
- top: 8px;
- transition: opacity 0.3s;
- width: @width3;
- path {
- transition: fill 0.36s;
- }
- &:hover {
- path {
- fill: @blue-500;
- }
- }
- }
- }
- .p-image-list-done {
- background: @theme;
- border-radius: 4px;
- border: 1px solid @grey-400;
- padding: 4px;
- .p-small-image-box {
- align-items: center;
- display: flex;
- height: @height2;
- justify-content: center;
- overflow: hidden;
- width: @width2;
- .p-list-image {
- height: @height2;
- }
- }
- &:hover {
- .p-delete-icon {
- opacity: 1;
- }
- }
- }
- .p-image-list-fail {
- background: @grey-50;
- border-radius: 4px;
- border: 1px solid @grey-400;
- .p-fail-icon {
- margin-bottom: 4px;
- margin-top: 28px;
- }
- .p-fail-text {
- color: @grey-500;
- font-size: 14px;
- font-weight: 400;
- line-height: 22px;
- }
- &:hover {
- .p-delete-icon {
- opacity: 1;
- }
- }
- }
- .p-image-list-pending {
- &:hover {
- .p-delete-icon {
- opacity: 1;
- }
- }
- .p-list-label {
- color: @grey-500;
- display: inline-block;
- font-size: 14px;
- font-weight: 400;
- line-height: 22px;
- margin-top: 36px;
- }
- .p-progress-bar {
- background: @grey-300;
- border-radius: 2px;
- height: @height8;
- margin-top: 8px;
- width: calc(@width2 - 16px);
- .p-progress-rate {
- background: @blue-500;
- border-radius: 2px;
- height: @height8;
- transition: width 2s;
- width: 0;
- }
- }
- }
- .p-image-modal {
- background: @theme;
- height: @height2;
- left: 0;
- position: fixed;
- top: 0;
- width: @width2;
- z-index: 7000;
- .p-image-modal-back {
- background: @grey-600;
- height: calc(@height2 - 56px);
- opacity: 0.5;
- position: fixed;
- top: 56px;
- width: @width2;
- }
- .p-image-header {
- align-items: center;
- background: @grey-50;
- display: flex;
- height: 56px;
- justify-content: flex-end;
- padding-left: 32px;
- padding-right: 32px;
- width: @width2;
- span {
- font-size: 14px;
- line-height: 22px;
- }
- div {
- align-items: center;
- cursor: pointer;
- display: flex;
- margin-left: 24px;
- }
- .p-size-box {
- svg {
- height: @height3;
- width: @width3;
- rect {
- transition: all 0.36s;
- }
- circle {
- transition: all 0.36s;
- }
- }
- svg > g > path {
- transition: all 0.36s;
- }
- .p-size-label {
- display: inline-block;
- margin-left: 4px;
- transition: all 0.36s;
- }
- &:hover {
- color: @blue-500;
- svg > g {
- path {
- &:first-child {
- fill: @blue-500;
- }
- &:last-child {
- stroke: @blue-500;
- }
- }
- rect {
- fill: @blue-500;
- }
- circle {
- fill: @blue-500;
- }
- }
- }
- }
- .p-download-box {
- .p-size-label {
- display: inline-block;
- margin-left: 4px;
- transition: all 0.36s;
- }
- svg {
- height: @height3;
- width: @width3;
- }
- svg > g > path {
- transition: all 0.36s;
- }
- &:hover {
- color: @blue-500;
- svg > g > path {
- fill: @blue-500;
- }
- }
- }
- .p-close-box {
- position: relative;
- img {
- height: @height3;
- width: @width3;
- path {
- transition: all 0.36s;
- }
- rect {
- transition: all 0.36s;
- }
- }
- &:before {
- background: @grey-400;
- content: "";
- height: 22px;
- left: -12px;
- position: absolute;
- width: 1px;
- }
- &:hover {
- img {
- path {
- fill: @blue-500;
- }
- rect {
- fill: @blue-500;
- }
- }
- }
- }
- }
- .p-image-content {
- align-items: center;
- display: flex;
- height: calc(@height2 - 56px);
- justify-content: space-between;
- padding-left: 32px;
- padding-right: 32px;
- position: relative;
- width: @width2;
- .p-image-box {
- align-items: center;
- display: flex;
- height: @height2;
- justify-content: center;
- overflow: hidden;
- position: relative;
- width: @width2;
- .p-big-image {
- cursor: move;
- position: relative;
- user-select: none;
- width: @width2;
- }
- }
- .p-control {
- align-items: center;
- background: @grey-50;
- border-radius: 20px;
- border: 1px solid @grey-50;
- cursor: pointer;
- display: flex;
- height: 40px;
- justify-content: center;
- position: absolute;
- transition: all 1s;
- width: 40px;
- z-index: 1000;
- svg {
- height: 20px;
- width: 20px;
- }
- &:hover {
- svg {
- path {
- stroke: @blue-500;
- }
- }
- }
- }
- .p-control-right {
- right: 32px;
- transform: rotate(180deg);
- }
- }
- }
- }
- </style>
|