0
点赞
收藏
分享

微信扫一扫

elment-ui 文件上传

我是芄兰 2022-12-17 阅读 56


 

 

<template>
<div>
<el-upload
ref="upload"
:action="action"
:limit="1"
:file-list="fileList"
:on-exceed="handleExceed"
:on-remove="handleRemove"
:on-success="handleSuccess"
:before-upload="beforeUpload"
:disabled="disabled"
:on-preview="hanleOnpreview"
>
<el-button size="small" type="primary">点击上传</el-button>
<div slot="tip" class="el-upload__tip">
<!-- 可以上传jpg/png/Jpeg/word/pdf/excel等格式文件,单个文件不可超过5M,附件不可超过5个 -->
</div>
</el-upload>
</div>
</template>

<script>
// /file/download
// 下载

// import { fileDownload } from "@/api/announcement-manage";
export default {
props: {
file: {
type: Array,
default: () => {
return [];
},
},
uploadType: {
type: String,
default: () => {
return "";
},
},
disabled: {
type: Boolean,
default: () => {
return false;
},
},
},
data() {
return {
// action: "https://www.xwqyy.com/filemanage/file/upload?project=customer",
action: `${this.$util.uploadUrl}/file/uploadImage`,
fileList: [],
};
},
mounted() {
this.fileList = this.file.length > 0 ? this.file : [];
},
watch: {
file: {
handler(newData, oldData) {
this.fileList = newData.length > 0 ? newData : [];
},
deep: true,
},
},
methods: {
handleRemove(file, fileList) {
console.log("删除file", file);
console.log("删除fileList", fileList);

// for (let item of fileList) {
// item.fileName = item.name;
// item.filePath = item.url;
// }
if (this.uploadType == "fileList") {
this.$emit("getFileListdel", fileList);
}
},
handleSuccess(res, file, fileList) {
// res.data.name = res.data.fileName;
// res.data.url = res.data.filePath;
// this.fileList.push(res.data);
let imgarr = [];
for (let item of fileList) {
item.fileName = res.data.fileName;
item.filePath = res.data.filePath;
imgarr = fileList;
}
if (this.uploadType == "fileList") {
this.$emit("getFileListup", imgarr);
}
},
beforeUpload(file) {
let fileType = file.name.split(".");
fileType = fileType[fileType.length - 1].toLowerCase();
const isMps = fileType === "mp3";
const isLt5M = file.size / 1024 / 1024 < 5;
if (!isMps) {
this.$message.error("上传文件只能是mp3格式!");
}
if (!isLt5M) {
this.$message.error("上传文件大小不能超过 5MB!");
}
return isMps && isLt5M;
},
handleExceed(files, fileList) {
this.$message.warning("附件不能超过1个");
},
//点击下载
hanleOnpreview(file) {
// fileDownload({
// filePath: file.url,
// }).then((res) => {
// this.downFile(res.data, file.name);
// });
window.open(file.url);
},
//下载乱码转换
downFile(content, fileName) {
const dom = document.createElement("a"); // 隐藏的a标签,href为输出流
const blob = new Blob([content], {
type: "application/vnd.ms-excel", // 创建一个类文件对象:Blob对象表示一个不可变的、原始数据的类文件对象
});
const url = window.URL.createObjectURL(blob); // 生成一个Blob对象
dom.style.display = "none";
dom.href = url;
document.body.appendChild(dom);
dom.setAttribute("download", fileName);
dom.click();
document.body.removeChild(dom);
URL.revokeObjectURL(url);
},
},
};
</script>

<style lang="less">
.disabled .el-upload--picture-card {
display: none;
}
</style>

<template>
<div class="yun-container">
<div class="yun-container-content">
<Spin size="large" fix v-if="loadInfo"></Spin>
<Form
ref="addform"
:model="info"
:rules="rules"
:label-width="85"
label-position="right"
>
<Row :gutter="16">
<Col span="14">
<FormItem label="名称:" prop="name">
<Input
type="text"
v-model="info.name"
placeholder="请输入名称"
></Input>
</FormItem>
</Col>
<Col span="14">
<FormItem label="类型:" prop="type">
<Select v-model="info.type" clearable>
<Option
v-for="item in typeList"
:value="item.value"
:key="item.value"
>{{ item.label }}
</Option>
</Select>
</FormItem>
</Col>
<Col span="14">
<FormItem label="介绍:" prop="intro">
<Input
type="textarea"
maxlength="1000"
show-word-limit
:autosize="{ minRows: 8, maxRows: 20 }"
v-model="info.intro"
placeholder="请输入介绍"
></Input>
</FormItem>
</Col>
<Col span="24">
<FormItem label="上传照片:" prop="pic_url">
<div
class="demo-upload-list"
v-for="(item, index) in uploadList_img"
:key="item.url"
>
<template v-if="item.status === 'finished'">
<img :src="item.url" />
<div class="demo-upload-list-cover">
<Icon
type="md-eye"
@click.native="handleView(item.url)"
></Icon>
<Icon
type="ios-trash-outline"
@click.native="handleRemove(item, index)"
></Icon>
</div>
</template>
<template v-else>
<Progress
v-if="item.showProgress"
:percent="item.percentage"
hide-info
></Progress>
</template>
</div>
<Upload
ref="upload"
name="file"
:default-file-list="defaultList_img"
:show-upload-list="false"
accept=".jpg, .jpeg, .png"
:format="['jpg', 'jpeg', 'png']"
:max-size="5120"
:on-format-error="handleFormatError"
:on-exceeded-size="handleMaxSize"
:on-success="handleImgSuccess"
:before-upload="handleBeforeUpload"
multiple
type="drag"
:headers="headers"
:action="action"
style="display: inline-block; width: 88px"
>
<div style="width: 88px; height: 88px; line-height: 88px">
<Icon type="md-add" size="20"></Icon>
</div>
</Upload>
<span class="note">图片上传上限5张,每张图片限5M</span>
</FormItem>
</Col>
<Col span="14">
<FormItem label="上传音频:">
<UploadFile
uploadType="fileList"
@getFileListdel="getFileListdel"
@getFileListup="getFileListup"
:file="filearr"
>
</UploadFile
></FormItem>
</Col>
<!-- <Col span="24">
<FormItem label="上传视频:" prop="videoUrl">
<div
class="demo-upload-list"
v-for="item in uploadList_vod"
:key="item.url"
>
<template v-if="item.status === 'finished'">
<img :src="baseImg" />
<div class="demo-upload-list-cover">
<Icon
type="md-videocam"
@click.native="handleViewVod(item.url)"
></Icon>
<Icon
type="ios-trash-outline"
@click.native="handleRemoveVod(item)"
></Icon>
</div>
</template>
<template v-else>
<Progress
v-if="item.showProgress"
:percent="item.percentage"
hide-info
></Progress>
</template>
</div>
<Upload
ref="uploadvod"
name="file"
:default-file-list="defaultList_vod"
:show-upload-list="false"
accept=".mp4"
:format="['mp4']"
:max-size="30720"
:on-format-error="handleFormatErrorVod"
:on-exceeded-size="handleMaxSizeVod"
:on-success="handleImgSuccessVod"
:before-upload="handleBeforeUploadVod"
multiple
type="drag"
:headers="headers"
:action="actionVod"
style="display: inline-block; width: 88px"
>
<div style="width: 88px; height: 88px; line-height: 88px">
<Icon type="md-add" size="20"></Icon>
</div>
</Upload>
<span class="note">视频上传上限3个,每个视频限30M</span>
</FormItem>
</Col> -->
<Col span="24">
<div class="lat-wrap">
<div class="lat-wrap-title">地图位置:</div>
<div class="lat-wrap-form">
<FormItem label="经度:" prop="lng">
<Input
type="text"
class="w150"
v-model="info.lng"
placeholder="经度"
:disabled="true"
></Input>
</FormItem>
<FormItem label="纬度:" prop="lat">
<Input
type="text"
class="w150"
v-model="info.lat"
placeholder="纬度"
:disabled="true"
></Input>
</FormItem>
</div>
</div>
</Col>
<Col span="22">
<FormItem label="">
<div class="map" id="baiduMap" ref="baiduMap"></div>
<div id="r-result" class="r-result">
<div class="input-group">
<div class="input-group-prepend">
<span class="input-group-text">搜索地址:</span>
</div>
<input
type="text"
id="suggestId"
class="suggestId"
placeholder=""
/>
</div>
</div>
<div
id="searchResultPanel"
style="
border: 1px solid #c0c0c0;
width: 150px;
height: auto;
display: none;
"
></div>
</FormItem>
</Col>

<Col span="24">
<div class="submit-wrap">
<Button
type="primary"
@click="handleSubmit('')"
:loading="loading"
>提交
</Button>
<Button type="default" @click="closeMe()">返回</Button>
</div>
</Col>
</Row>
</Form>
</div>
<Modal
title="查看图片"
:styles="{ top: '20px' }"
width="50%"
v-model="IconView"
>
<div class="yun-modal-view-img">
<img :src="ViewImg" v-if="IconView" />
</div>
</Modal>
<Modal
title="播放视频"
:styles="{ top: '20px' }"
width="800"
v-model="vodView"
>
<div class="yun-modal-view-img">
<video-player :options="videoOptions" v-if="vodView" />
</div>
</Modal>
</div>
</template>

<script>
import VideoPlayer from "@/components/VideoPlayer.vue";
import { sourceget, sourceadd, sourceupdate } from "@/api/alarm";
import { BaiduMap, mapOpts } from "@/libs/map.js";
import { validDouble } from "@/libs/validator.js";
import _GLOBAL from "@/libs/config";
import UploadFile from "./UploadFile.vue";

export default {
name: "AddAlarm",
components: {
VideoPlayer,
UploadFile,
},
data() {
const validateDouble = (rule, value, callback) => {
if (!value) {
callback(new Error("经纬度不能为空"));
} else if (!validDouble(value)) {
callback(new Error("数字及小数点"));
} else {
callback();
}
};
return {
baseImg: require("@/assets/vod.png"),
ViewImg: "",
IconView: false,
vodView: false,
myValue: "",
mapSetInfo: {
centerLat: "30.679277",
centerLng: "118.140187",
mapLevel: 14,
},
editID: undefined,
loadInfo: false,
isEdit: false,
loading: false,
typeList: _GLOBAL.typeList,
headers: {
"author-token-key": localStorage.getItem("token"),
},
action: `${this.$util.uploadUrl}/file/uploadImage`,
uploadList_img: [],
defaultList_img: [],
actionVod: `${this.$util.uploadUrl}/file/uploadImage`,
uploadList_vod: [],
defaultList_vod: [],
info: {
id: "",
type: "",
name: "",
lng: "",
lat: "",
pic_url: "",
voice_url: "",
intro: "",
// left: "",
// top: "",
},
rules: {
type: [
{
required: true,
validator: "请选择",
message: "请选择类型",
trigger: "change",
},
],
name: [
{ required: true, message: "名称不能为空", trigger: "blur" },
{
type: "string",
max: 30,
message: "名称不能超过30个字符",
trigger: "blur",
},
],
// address: [
// {
// type: "string",
// max: 50,
// message: "告警地址不超过50个字符",
// trigger: "blur",
// },
// ],
intro: [
{
type: "string",
max: 400,
message: "不超过400个字符",
trigger: "blur",
},
],
lng: [{ required: true, validator: validateDouble, trigger: "blur" }],
lat: [{ required: true, validator: validateDouble, trigger: "blur" }],
},
marker: null,
videoOptions: {
autoplay: true,
controls: true,
width: "760px",
height: "400px",
sources: [
{
src: "//vjs.zencdn.net/v/oceans.mp4",
type: "video/mp4",
},
],
},
paramsId: this.$route.params.id,
filearr: [],
};
},
watch: {
defaultList_img: {
handler(val) {
// this.uploadList_img.splice(0, this.uploadList_img.length)
// console.log(val)
/* val.forEach((element) => {
this.uploadList_img.push({
name: element.name,
url: element.url,
showProgress: false,
status: 'finished'
})
}) */
},
deep: true,
},
},
created() {
let _this = this;

// 如果是编辑
if (_this.paramsId) {
_this._sourceget(); //详情
// 获取草稿
// let temp = { ..._this.$byStoreGet("hasDrafts") };
// console.log("temp=====", temp);
// _this.$Modal.confirm({
// title: "草稿箱",
// content: `<p>是否加载您在 ${temp.time} 保存的草稿?</p>`,
// okText: "确定加载",
// cancelText: "不加载并删除草稿",
// loading: true,
// onOk: () => {
// _this.$nextTick(() => {
// _this.defaultList_img = temp.img;
// _this.defaultList_vod = temp.vod;
// // _this.uploadList_img = [..._this.defaultList_img]
// delete temp.time;
// delete temp.img;
// delete temp.vod;
// _this.info = temp;
// setTimeout(() => {
// _this.$Modal.remove();
// _this.infoResource();
// _this.uploadList_img = _this.$refs.upload.fileList;
// _this.uploadList_vod = _this.$refs.uploadvod.fileList;
// }, 500);
// });
// },
// onCancel: () => {
// _this.$byStoreDelete("hasDrafts");
// _this.uploadList_img = _this.$refs.upload.fileList;
// _this.uploadList_vod = _this.$refs.uploadvod.fileList;
// },
// });
} else {
}
},
mounted() {
let _this = this;
// _this.uploadList_img = _this.$refs.upload.fileList;
// _this.uploadList_vod = _this.$refs.uploadvod.fileList;
_this.initMap(); //加载地图
},
methods: {
//详情
_sourceget() {
sourceget({ id: this.$route.params.id }).then((res) => {
if (res.data.code == "00000") {
this.info = Object.assign({}, res.data.data);
//图片回显
if (this.info.pic_url && this.info.pic_url !== null) {
this.info.pic_url = this.info.pic_url.split(",");
this.info.pic_url.forEach((element) => {
this.uploadList_img.push({
url: element,
showProgress: false,
status: "finished",
});
});
}
if (this.info.voice_url) {
// let voice_urlarr = this.info.voice_url;
// console.log("voice_urlarr", voice_urlarr);
// let darr = [];
// for (const item of voice_urlarr) {
// darr.push({
// name: item.name,
// url: item.value,
// });
// }
// console.log("darr", darr);
this.filearr = [
{
name: "音频文件",
url: this.info.voice_url,
},
];
}
this.infoResource();
}
});
},
infoResource() {
let _this = this;
if (_this.info.lng && _this.info.lat) {
_this.setInitMarker();
_this.map.centerAndZoom(
new BMap.Point(_this.info.lng, _this.info.lat),
_this.mapSetInfo.mapLevel
);
}
},
GOing(id) {
return document.getElementById(id);
},
setPlace() {
let _this = this;
_this.map.clearOverlays(); // 清除地图上所有覆盖物
function myFun() {
// 获取第一个智能搜索的结果
let pp = local.getResults().getPoi(0).point;
_this.map.centerAndZoom(pp, _this.mapSetInfo.mapLevel);
// 添加标注
_this.map.addOverlay(new BMap.Marker(pp));
_this.info.lng = pp.lng;
_this.info.lat = pp.lat;
// _this.info.address = _this.myValue;
}

// 智能搜索
let local = new BMap.LocalSearch(_this.map, {
onSearchComplete: myFun,
});
local.search(_this.myValue);
},
initMap() {
let _this = this;
BaiduMap.init().then((BMap) => {
_this.map = new BMap.Map(_this.$refs.baiduMap);
_this.map.addControl(
new BMap.MapTypeControl({
mapTypes: [BMAP_NORMAL_MAP, BMAP_HYBRID_MAP],
})
);

var top_left_navigation = new BMap.NavigationControl({
anchor: BMAP_ANCHOR_BOTTOM_RIGHT,
type: BMAP_NAVIGATION_CONTROL_SMALL,
});
_this.map.addControl(top_left_navigation);
_this.map.centerAndZoom(
new BMap.Point(
_this.mapSetInfo.centerLng,
_this.mapSetInfo.centerLat
),
_this.mapSetInfo.mapLevel
);
_this.map.enableScrollWheelZoom();
_this.map.addEventListener("click", _this.MapClick);

var ac = new BMap.Autocomplete({
input: "suggestId",
location: _this.map,
}); // 建立一个自动完成的对象
ac.addEventListener("onhighlight", (e) => {
let str = "";
let _value = e.fromitem.value;
let value = "";
if (e.fromitem.index > -1) {
value =
_value.province +
_value.city +
_value.district +
_value.street +
_value.business;
}
str =
"FromItem<br />index = " +
e.fromitem.index +
"<br />value = " +
value;
value = "";
if (e.toitem.index > -1) {
_value = e.toitem.value;
value =
_value.province +
_value.city +
_value.district +
_value.street +
_value.business;
}
str +=
"<br />ToItem<br />index = " +
e.toitem.index +
"<br />value = " +
value;
_this.GOing("searchResultPanel").innerHTML = str;
});
ac.addEventListener("onconfirm", (e) => {
let _value = e.item.value;
_this.myValue =
_value.province +
_value.city +
_value.district +
_value.street +
_value.business;
_this.GOing("searchResultPanel").innerHTML =
"onconfirm<br />index = " +
e.item.index +
"<br />this.myValue = " +
_this.myValue;
_this.setPlace();
});
});
},
setInitMarker() {
let _this = this;
_this.marker = new window.BMap.Marker(
new window.BMap.Point(_this.info.lng, _this.info.lat)
);
_this.map.addOverlay(_this.marker);
},
MapClick(e) {
let _this = this;
if (_this.marker) {
_this.map.clearOverlays();
}
const myGeo = new BMap.Geocoder();
myGeo.getLocation(e.point, (rs) => {
// _this.info.address = rs.address;
});
_this.info.lng = e.point.lng;
_this.info.lat = e.point.lat;
let newPoint = new window.BMap.Point(_this.info.lng, _this.info.lat);
_this.map.panTo(newPoint);
_this.marker = new window.BMap.Marker(newPoint);
_this.map.addOverlay(_this.marker);
},

handleSubmit() {
let _this = this;
_this.loading = true;
_this.$refs["addform"].validate((valid) => {
if (valid) {
const params = Object.assign({}, _this.info);
const _img = _this.uploadList_img.map((item, index, arr) => {
return item.url;
});
const _vod = _this.uploadList_vod.map((item, index, arr) => {
return item.url;
});
params.pic_url = _img.join(",");
// params.videoUrl = _vod.join(",");
_this.submitDetails(params);
} else {
_this.loading = false;
_this.$Message.error({
duration: 5,
closable: true,
background: true,
content: "请输入必填项!",
});
}
});
},
submitDetails(data) {
let _this = this;
let msg = _this.$Message.loading({
content: "正在提交数据",
duration: 0,
});
if (_this.paramsId) {
sourceupdate(data)
.then((res) => {
msg();
if (res.data.code === "00000") {
// _this.$byStoreDelete("hasDrafts");
_this.$Message.success({
duration: 3,
closable: true,
background: true,
content: "数据提交成功",
});
this.closeMe();
} else {
_this.$Message.warning({
duration: 3,
closable: true,
background: true,
content: res.data.desc,
});
}
})
.catch((error) => {
_this.$Message.warning({
duration: 3,
closable: true,
background: true,
content: res.data.desc,
});
})
.finally(() => {
_this.loading = false;
});
} else {
sourceadd(data)
.then((res) => {
msg();
if (res.data.code === "00000") {
// _this.$byStoreDelete("hasDrafts");
_this.$Message.success({
duration: 3,
closable: true,
background: true,
content: "数据提交成功",
});
this.closeMe();
} else {
_this.$Message.warning({
duration: 3,
closable: true,
background: true,
content: "数据提交失败",
});
}
})
.catch((error) => {
_this.$Message.warning({
duration: 3,
closable: true,
background: true,
content: "数据提交失败",
});
})
.finally(() => {
_this.loading = false;
});
}
},
handleReset() {
this.info = {
id: "",
type: "",
name: "",
lng: "",
lat: "",
pic_url: "",
voice_url: "",
intro: "",
left: "",
top: "",
};
},
handleView(src) {
this.ViewImg = src;
this.IconView = true;
},
//删除
handleRemove(file, index) {
this.uploadList_img.splice(index, 1);
},
handleViewVod(src) {
this.videoOptions.sources[0].src = src;
this.vodView = true;
},
handleRemoveVod(file) {
const fileList = this.$refs.uploadvod.fileList;
this.$refs.uploadvod.fileList.splice(fileList.indexOf(file), 1);
},
handleImgSuccessVod(res, file) {
console.log(res, file);
if (res.code === "00000") {
file.url = res.data;
} else {
this.$Message.error({
content: "上传失败",
duration: 5,
});
}
},
handleImgSuccess(res, file) {
if (res.code === "00000") {
this.uploadList_img.push({
name: file.name,
url: res.data,
showProgress: false,
status: "finished",
});
} else {
this.$Message.error({
content: "上传失败",
duration: 5,
});
}
},
handleFormatErrorVod(file) {
this.$Message.error({
content: "请上传MP4格式视频",
duration: 5,
});
},
handleFormatError(file) {
this.$Message.error({
content: "请上传png或jpg格式图片",
duration: 5,
});
},
handleMaxSizeVod(file) {
this.$Message.error({
content: "视频文件不能超过30M.",
duration: 5,
});
},
handleMaxSize(file) {
this.$Message.error({
content: "图片文件不能超过5M.",
duration: 5,
});
},
handleBeforeUploadVod() {
const check = this.uploadList_vod.length < 3;
if (!check) {
this.$Message.warning("最多上传3个视频");
}
return check;
},
handleBeforeUpload() {
const check = this.uploadList_img.length < 5;
if (!check) {
this.$Message.warning("最多上传5张照片");
}
return check;
},
closeMe() {
this.$store.commit("app/closePage", {
vm: this,
fromName: this.$route.name,
toName: "alarm",
});
},
//附件列表获取
getFileListup(data) {
let d = [];
data.map((item) => {
d.push({
name: item.fileName,
value: item.filePath,
});
});
this.info.voice_url = data[0].response.data;
},
//附件列表删除
getFileListdel(data) {
this.info.voice_url = "";
},
},
beforeDestroy() {
this.map = null;
},
};
</script>

<style lang="less" scoped>
.w350 {
width: 350px;
}

.map {
margin-bottom: 15px;
width: 100%;
height: 600px;
border: 1px solid #c30d2d;
}

.input-group {
position: relative;
display: flex;
flex-wrap: wrap;
align-items: stretch;
width: 350px;
}

.input-group-prepend {
margin-right: -1px;
}

.input-group-text {
display: flex;
align-items: center;
padding: 4px 7px;
margin-bottom: 0;
font-size: 14px;
font-weight: 400;
line-height: 1.5;
color: #495057;
text-align: center;
white-space: nowrap;
background-color: #f8f8f9;
border: 1px solid #d8d8d8;
border-radius: 5px;
border-top-right-radius: 0;
border-bottom-right-radius: 0;
}

.suggestId {
display: block;
flex: 1 1 auto;
width: 1%;
font-weight: 400;
line-height: 1.5;
color: #495057;
background-color: #fff;
background-clip: padding-box;
border: 1px solid #d8d8d8;
border-radius: 5px;
border-top-left-radius: 0;
border-bottom-left-radius: 0;
transition: border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;
}

.suggestId:hover {
border-color: #999999;
}

.suggestId:focus {
border-color: #2a89e0;
outline: 0;
box-shadow: 0 0 0 2px rgba(45, 140, 240, 0.2);
}

.r-result {
display: inline-block;
position: absolute;
left: 5px;
top: 5px;
color: #000;
font-size: 14px;
z-index: 1006;
}

.search-ResultPanel {
display: none;
position: absolute;
left: 94px;
top: 50px;
color: #000;
font-size: 16px;
z-index: 999999;
background: #fff;
border-top: 1px solid #ddd;
width: 350px;
max-height: 800px;
overflow-y: auto;
padding: 10px 20px;
}

.lat-wrap {
display: flex;

.lat-wrap-title {
width: 85px;
text-align: right;
padding: 6px 12px 10px 0;
}

.lat-wrap-form {
display: flex;
}
}

.demo-upload-list {
display: inline-block;
width: 88px;
height: 88px;
text-align: center;
line-height: 88px;
border: 1px solid transparent;
border-radius: 4px;
overflow: hidden;
background: #fff;
position: relative;
box-shadow: 0 1px 1px rgba(0, 0, 0, 0.2);
margin-right: 4px;
}

.demo-upload-list img {
width: 100%;
//height: 100%;
position: absolute;
top: 0;
left: 0;
bottom: 0;
margin: auto;
}

.demo-upload-list-cover {
display: none;
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
background: rgba(0, 0, 0, 0.6);
}

.demo-upload-list:hover .demo-upload-list-cover {
display: block;
}

.demo-upload-list-cover i {
color: #fff;
font-size: 20px;
cursor: pointer;
margin: 0 2px;
}

.note {
color: #999999;
font-size: 12px;
margin-left: 5px;
}
</style>

 



举报

相关推荐

0 条评论