给下面商品图片预览效果设置的美规一点：<template>
<div class="container">
<el-tabs type="border-card">
<el-tab-pane :label="title">
<el-form ref="form" :model="form" :rules="rules" label-width="12
0px">
<uploadForm label="介绍图片:" v-model="form.cover"
name="cover" :rules="rules.cover"
:disabled="Boolean(queryParams.type)" :limit="1"></uploadForm>
<el-row>
<el-col :span="12">
<el-form-item label="团购名称:" prop="
name">
<el-input class="input" v-model="form.
name" :disabled="Boolean(queryParams.type)"
placeholder="请输入团购名称" />
</el-form-item>
</el-col>
<el-col :span="12">
<el-form-item label="自动截止:" prop="isAutoEnd">
<el-switch v-model="form.isAutoEnd" :disabled="Boolean(queryParams.type)"
:active-value="true" :inactive-value="false" />
</el-form-item>
</el-col>
<el-col :span="12">
<el-form-item label="开始时间:" prop="startTime">
<el-date-picker clearable v-model="form.startTime" type="datetime"
default-time="12:
00:
00" :disabled="Boolean(queryParams.type)"
value-format="yyyy-MM-dd HH:mm:ss" placeholder="请选择活动开始时间">
</el-date-picker>
</el-form-item>
</el-col>
<el-col :span="12">
<el-form-item label="截止时间:" prop="endTime">
<el-date-picker clearable v-model="form.endTime" type="datetime" default-time="12:
00:
00"
value-format="yyyy-MM-dd HH:mm:ss" :disabled="Boolean(queryParams.type)"
placeholder="请选择活动截止时间">
</el-date-picker>
</el-form-item>
</el-col>
<el-col :span="12">
<el-form-item label="最大接龙人数" prop="maxJoinNum">
<el-input-number :disabled="Boolean(queryParams.type)" v-model="form.maxJoinNum"
:
precision="
0" :step="1" :min="
0"></el-input-number>
</el-form-item>
</el-col>
<!-- <el-col :span="12">
<el-form-item label="最小成交金额" prop="minAmount">
<el-input-number :disabled="Boolean(queryParams.type)" v-model="form.minAmount"
:
precision="2" :step="
0.1" :min="
0"></el-input-number>
</el-form-item>
</el-col> -->
<el-col :span="12">
<el-form-item label="提货地址:" prop="addressIds">
<el-select :disabled="Boolean(queryParams.type)" v-model="form.addressIds" filterable
placeholder="请选择" multiple>
<el-option v-for="item in addressoptions" :key="item.id" :label="item.address
Name"
:value="item.id">
</el-option>
</el-select>
</el-form-item>
</el-col>
<el-col :span="24">
<el-form-item label="团购内容" prop="detailInfo">
<UEditor v-model="form.detailInfo" ref="ueditor" :config="myConfig"
:disabled="Boolean(queryParams.type)" />
</el-form-item>
</el-col>
</el-row>
<el-form-item label="其它信息:">
<el-checkbox-group v-model="form.selectedItemsOther" :disabled="Boolean(queryParams.type)">
<el-checkbox label="isGetReal
Name">真实姓名</el-checkbox>
<el-checkbox label="isGetPhone">手机号码</el-checkbox>
</el-checkbox-group>
</el-form-item>
<el-form-item label="功能选择:">
<el-checkbox-group v-model="form.selectedItemsFunction" :disabled="Boolean(queryParams.type)">
<el-checkbox label="isHideList">发布最新接龙列表</el-checkbox>
<el-checkbox label="isHideOrderAmount">接龙金额仅创建人可见</el-checkbox>
<el-checkbox label="canCancel">用户是否取消订单</el-checkbox>
</el-checkbox-group>
</el-form-item>
<div>
<el-form-item label="商品信息:" prop="products">
<el-table :data="form.products">
<el-table-column label="商品名称" align="center" style="width: 15
0px;">
<template slot-scope="{row,$index}">
<div style="padding-bottom: 15px;width: 15
0px;">
<el-form-item :prop="`products.${$index}.
name`"
:rules="[{ required: true, message: '请输入团购名称', trigger: ['change', 'blur'] }]">
<el-input :disabled="Boolean(queryParams.type)"
v-model="form.products[$index].
name"
placeholder="请输入团购名称"></el-input>
</el-form-item>
</div>
</template>
</el-table-column>
<el-table-column label="商品价格(元)" align="center">
<template slot-scope="{row,$index}">
<div style="padding-bottom: 15px;">
<el-form-item :prop="`products.${$index}.price`"
:rules="[{ required: true, message: '请输入商品价格', trigger: ['change', 'blur'] }]">
<el-input-number :
precision="2" :step="
0.1" :min="
0" style="width:15
0px"
:disabled="Boolean(queryParams.type)"
v-model="form.products[$index].price"></el-input-number>
</el-form-item>
</div>
</template>
</el-table-column>
<el-table-column label="商品数量" align="center">
<template slot-scope="{row,$index}">
<div style="padding-bottom: 15px;">
<el-form-item :prop="`products.${$index}.totalNum`"
:rules="[{ required: true, message: '请输入商品数量', trigger: ['change', 'blur'] }]">
<el-input-number :
precision="
0" :step="1" :min="1" style="width:15
0px"
:disabled="Boolean(queryParams.type)"
v-model="form.products[$index].totalNum"></el-input-number>
</el-form-item>
</div>
</template>
</el-table-column>
<el-table-column label="每单限制购买量" align="center">
<template slot-scope="{row,$index}">
<div style="padding-bottom: 15px;">
<el-form-item :prop="`products.${$index}.limitNum`"
:rules="[{ required: true, message: '请输入每单限制购买量', trigger: ['change', 'blur'] }]">
<el-input-number :
precision="
0" :step="1" :min="1" style="width:15
0px"
:disabled="Boolean(queryParams.type)"
v-model="form.products[$index].limitNum"></el-input-number>
</el-form-item>
</div>
</template>
</el-table-column>
<el-table-column label="商品规格" align="center">
<template slot-scope="{row,$index}">
<div style="padding-bottom: 15px;">
<el-form-item :prop="`products.${$index}.weight`"
:rules="[{ required: true, message: '请输入商品规格', trigger: ['change', 'blur'] }]">
<el-input :disabled="Boolean(queryParams.type)"
v-model="form.products[$index].weight"></el-input>
</el-form-item>
</div>
</template>
</el-table-column>
<el-table-column label="商品图片" align="center">
<template slot-scope="{row,$index}">
<div style="padding-bottom: 15px;">
<el-upload action :file-list="row.image" :prop="`products.${$index}.image`"
:on-remove="(file, fileList) => handleRemoveMaterial(file, fileList, $index)"
:on-preview="(file) => handlePictureCardPreviewMaterial(file, $index)"
:http-request="(obj) => selectPicUploadMaterial(obj, $index)"
list-type="picture-card" :disabled="Boolean(queryParams.type)"
v-model="form.products[$index].image">
<i class="el-icon-plus avatar-uploader-icon"></i> <el-dialog
:visible.sync="dialogVisible" append-to-body>
<img width="2
0%"height="2
0%" :src="dialogImageUrl" alt />
</el-dialog>
</el-upload>
</div>
</template>
</el-table-column>
<el-table-column label="商品信息详情" align="center">
<template slot-scope="{row,$index}">
<div style="padding-bottom: 15px;">
<el-form-item prop="`products.${$index}.detail`">
<el-input :disabled="Boolean(queryParams.type)" type="textarea"
:rows="2" placeholder="请输入商品信息详情"
:autosize="{ minRows: 4, maxRows: 8 }"
v-model="form.products[$index].detail"></el-input>
</el-form-item>
</div>
</template>
</el-table-column>
<!-- <el-table-column label="商品图片" align="center">
<template slot-scope="{row,$index}">
<div style="padding-bottom: 15px;">
<uploadForm label="" v-model="form.products[$index].image"
:
name="`products.${$index}.image`" :rules="[
{ required: true, message: '请选择商品图片', trigger: ['change', 'blur'] }
]" :disabled="Boolean(queryParams.type)" :limit="3"></uploadForm>
</div>
</template>
</el-table-column> -->
<el-table-column v-if="!queryParams.type" label="操作" align="center"
class-
name="small-padding fixed-width" width="18
0">
<template slot-scope="scope">
<el-button @click="addproduct(scope)"> 添加</el-button>
<el-button type="danger" icon="el-icon-delete"
:disabled="form.products.length <= 1"
@click="removeRow(scope.$index)">删除</el-button>
</template>
</el-table-column>
</el-table>
</el-form-item>
</div>
</el-form>
<!-- 修改/新增 -->
<div class="dialog-footer">
<el-button v-if="!queryParams.type" type="primary" @click="submitForm">确 定</el-button>
<el-button @click="handleBack">取 消</el-button>
</div>
</el-tab-pane>
</el-tabs>
</div>
</template>
<script>
import { imgUrl } from '@/utils/request'
import uploadForm from "@/components/uploadForm/index2.vue";
import { getISOTime, checkLongitudeValidator, checkPointIsNumber } from '@/utils/parsing'
import { checkPhone } from '@/utils/validate'
import mapView from '@/components/MapContainer/index.vue'
import UEditor from '@/components/UEditor/ue'
import { addGroupShop, editGroupBuy, getGroupBuyAddressPage, getGroupBuyDetail } from '@/api/solitaire/solitaire'
import { uploadPic } from '@/api/activity/activity'
import { onMounted, beforeDestroy } from 'vue'
import { reset } from 'echarts/lib/visual/seriesColor'
export default {
components: {
UEditor,
mapView,
uploadForm,
},
onMounted() {
},
data() {
return {
myConfig1:{},
fileList: [],
myConfig:{},
addressoptions: [],
addressList: [],
currentTime: new Date().toLocaleTimeString(),
timer: null,
// 第一个复选框组绑定值
// 第二个复选框组绑定值
selectedItemsFunction: [],
checkList: ['选中且禁用', '复选框 A'],
checked: true, // 单个复选框的绑定
dataList: [],
title: "新增接龙",
// 封面图片
selectImgUrl: '',
queryParams: {},
currentImgIndex:
0,
// 封面图片类型选择
imgDialogVisible: false,
// 表单数据
form: {
selectedItemsOther: [],
selectedItemsFunction: [],
addressIds: [],
canCancel:
0,
cover: [],
detailInfo: null,
endTime: null,
id:
0,
isAutoEnd:
0,
isHideList: false,
isHideOrderAmount: false,
isJoin:
0,
maxJoinNum: null,
minAmount: null,
name: "",
products: [
{
weight:"",
detail: null,
id:
0,
image: [],
limitNum:
0,
name: "",
parentId:
0,
price:
0,
soldNum:
0,
totalNum:
0,
}
],
realEndTime: "",
startTime: "",
status:
0,
},
// 表单校验
rules: {
addressIds: [
{ required: true, message: '请选择提货地址', trigger: ['change', 'blur'] }
],
cover: [
{ required: true, message: '请选择介绍图片', trigger: ['change', 'blur'] }
],
name: [
{ required: true, message: '请输入团购名称', trigger: 'change' }
],
othermessage: [
{ type: 'array', required: true, message: '请选择其它信息', trigger: 'change' }
],
selectability: [
{ type: 'array', required: true, message: '请选择功能', trigger: 'change' },
],
shopmessage: [
{ required: true, message: '请输入商品信息', trigger: 'change' },
],
detailInfo: [
{ required: true, message: '请输入团购内容', trigger: ['change', 'blur'] }
],
maxJoinNum: [
{ required: true, message: '请输入最大接龙人数', trigger: 'change' },
],
minAmount: [
{ required: true, message: '最小成交金额不能为空', trigger: 'change' }
],
endTime: [
{ required: true, message: '结束时间必须选择', trigger: 'change' }
],
startTime: [
{ required: true, message: '开始时间不能为空', trigger: 'change' }
],
description: [
{ required: true, message: '活动开始内容不能为空', trigger: 'change' }
],
address: [
{ required: true, message: '地点不能为空', trigger: 'change' }
],
conditionRequire: [
{ required: true, message: '请输入条件说明', trigger: 'change' }
],
// signStartDatetime: [
// { required: true, message: '报名开始时间必须选择', trigger: 'change' }
// ],
signEndDatetime: [
{ required: true, message: '活动截止时间必须选择', trigger: 'change' }
],
jobUserVOLists: [
{ type: 'array', required: true, message: '请添加岗位需求', trigger: 'change' }
],
},
// 图片前缀
cover: imgUrl,
// //分页
column: {
pageSize: null,
pageNum: null
},
// 队伍列表
// 岗位表单校验
jobRules: {
job
Name: [
{ required: true, message: '请输入岗位名称', trigger: 'change' }
],
jobCount: [
{ required: true, message: '请输入岗位人数', trigger: 'change' }
],
workHour: [
{ required: true, message: '请输入工时', trigger: 'change' }
],
pointPercent: [
{ required: true, message: '请输入积分(每人每小时)', trigger: 'change' },
{ validator: checkPointIsNumber, message: '积分必须为数字' }
],
checkInTime: [
{ required: true, message: '请输入签到时间', trigger: 'change' }
],
checkOutTime: [
{ required: true, message: '请输入签退时间', trigger: 'change' }
],
checkLocation: [
{ required: true, message: '请选择签到地点', trigger: 'change' }
]
},
dialogVisible: false,
dialogImageUrl: ''
}
},
created() {
this.getAddressList()
this.queryParams = this.$route.query;
if (this.queryParams.id) {
// 编辑
this.title = '修改接龙'
console.log(Boolean(this.queryParams.type),'59')
// this.isdisabled = true;
getGroupBuyDetail(this.queryParams.id).then(res => {
this.form = {
...res,
cover: [{ url: res.cover }],
isAutoEnd: res.isAutoEnd === 1 ? true : false,
addressIds: res.addresses.map(n => (n.id)),
selectedItemsOther: [],
selectedItemsFunction: [],
products: res.products.map((n) => {
let imageArray = []
if (n.image) {
const imageUrls = n.image.split(',');
imageArray = imageUrls.map(url => ({ url }));
}
console.log(imageArray,'988',n.id)
return {
...n,
image: imageArray
}
})
}
console.log(this.form.isAutoEnd,'
0000')
if (res.isGetReal
Name === 1) {
this.form.selectedItemsOther.push('isGetReal
Name')
}
if (res.isGetPhone === 1) {
this.form.selectedItemsOther.push('isGetPhone')
}
if (res.isHideList ===
0) {
this.form.selectedItemsFunction.push('isHideList')
}
if (res.isHideOrderAmount === 1) {
this.form.selectedItemsFunction.push('isHideOrderAmount')
}
if (res.canCancel === 1) {
this.form.selectedItemsFunction.push('canCancel')
}
this.$nextTick(() => {
if (this.$refs.ueditor) {
this.$refs.ueditor.setContent(res.detailInfo);
}
});
console.log(this.form,'-----')
})
}
},
methods: {
handleRemoveMaterial(file, fileList, index) {
// 找到要删除的图片在商品图片数组中的索引
const fileIndex = this.form.products[index].image.findIndex(item => item.url === file.url);
if (fileIndex > -1) {
// 从商品图片数组中移除该图片
this.form.products[index].image.splice(fileIndex, 1);
}
// 更新 fileList
const newFileList = fileList.filter(item => item.url !== file.url);
this.form.products[index].image = newFileList;
},
selectPicUploadMaterial(obj, index) {
let fd = new FormData();
fd.append('file', obj.file);
uploadPic(fd, { modular
Name: 'ACTIVITY' }).then(res => {
console.log('上传图片返回的数据',res);
if (res ) {
const product = this.form.products[index];
if (!product.image) {
product.image = [];
}
product.image.push({ url: res, uid: Date.now() });
} else {
console.error('上传图片失败，未获取到有效的 url', res);
}
}).catch(error => {
console.error('上传图片请求失败', error);
});
},
onMounted() {
},
getAddressList() {
getGroupBuyAddressPage().then(res => {
console.log(res,'
099')
this.addressoptions = res.pageData
})
},
beforeDestroy() {
clearInterval(this.timer);
},
addproduct(scope) {
console.log(scope,'
0098')
this.form.products.push({weight: "",
detail: null,
id: scope.row.id+1, // 确保初始 id 有默认值
image: [],
limitNum:
0,
name: "",
parentId: scope.row.parentId,
price:
0,
soldNum:
0,
totalNum:
0});
this.$nextTick(() => {
this.$refs.form.validateField('products'); // 触发products字段校验
});
},
removeRow(index) {
// 添加长度检查
if (this.form.products.length <= 1) {
this.$message.warning('至少需要保留一个商品');
return;
}
this.form.products.splice(index, 1);
this.$nextTick(() => {
this.$refs.form.validateField('products');
});
},
handlePictureCardPreviewMaterial(file) {
this.dialogImageUrl = file.url;
this.dialogVisible = true;
},
handleProductAvatarChange(file) {
if (!file || !file.raw) return;
const reader = new FileReader();
reader.onload = (e) => {
const img = new Image();
img.onload = () => {
// 限制最大尺寸（合理值：8
00×6
00）
const MAX_SIZE = 8
00;
let width = img.width;
let height = img.height;
// 按比例缩放到最大尺寸
if (width > MAX_SIZE || height > MAX_SIZE) {
const
scale = Math.min(MAX_SIZE / width, MAX_SIZE / height);
width *=
scale;
height *=
scale;
}
// 画布压缩处理
const canvas = document.createElement('canvas');
const ctx = canvas.getContext('2d');
canvas.width = width;
canvas.height = height;
ctx.drawImage(img,
0,
0, width, height);
// 关键优化：降低质量并生成更短Data URL
this.form.products.image = canvas.toDataURL(file.type,
0.
01); // 压缩质量65%
};
img.src = e.target.result;
};
reader.readAsDataURL(file.raw);
},
handleAvatarChange(file) {
if (!file || !file.raw) return;
const reader = new FileReader();
reader.onload = (e) => {
const img = new Image();
img.onload = () => {
// 限制最大尺寸（合理值：8
00×6
00）
const MAX_SIZE = 8
00;
let width = img.width;
let height = img.height;
// 按比例缩放到最大尺寸
if (width > MAX_SIZE || height > MAX_SIZE) {
const
scale = Math.min(MAX_SIZE / width, MAX_SIZE / height);
width *=
scale;
height *=
scale;
}
// 画布压缩处理
const canvas = document.createElement('canvas');
const ctx = canvas.getContext('2d');
canvas.width = width;
canvas.height = height;
ctx.drawImage(img,
0,
0, width, height);
// 关键优化：降低质量并生成更短Data URL
this.form.cover = canvas.toDataURL(file.type,
0.
01); // 压缩质量65%
};
img.src = e.target.result;
};
reader.readAsDataURL(file.raw);
},
// 表单重置
reset() {
this.form = {
addressIds: [],
cover: null,
canCancel:
0,
detailInfo: null,
endTime: null,
id:
0,
isAutoEnd:
0,
isGetPhone:
0,
isGetReal
Name:
0,
isHideList:
0,
isHideOrderAmount:
0,
isJoin:
0,
maxJoinNum:
0,
minAmount:
0,
name: "",
products: [
{
weight:"",
detail:"",
id:
0,
image: imgUrl,
limitNum:
0,
name: "",
parentId:
0,
price:
0,
soldNum:
0,
totalNum:
0
}
],
realEndTime: "",
startTime: "",
status:
0,
}
},
// // 取消关闭弹窗
// closeDialog() {
// this.currentImgIndex =
0
// this.selectImgUrl = ''
// this.imgDialogVisible = false
// },
// // 确认默认图片关闭弹窗
// submitPic() {
// this.form.cover = this.selectImgUrl
// this.imgDialogVisible = false
// },
hasCommonValue(arr) {
let seen = new Set(); // 用于存储已经遇到的值
for (let obj of arr) {
for (let value of obj.jobUsers) {
// 如果值已经存在于 set 中，返回 true
if (seen.has(value.
userId)) {
return true;
}
// 将当前值加入 set
seen.add(value.
userId);
}
}
return false; // 如果没有重复的值，返回 false
},
/** 提交按钮 */
submitForm() {
console.log(this.form, '
000')
// return
this.form.detailInfo = this.$refs.ueditor.getContent();
let newForm = {
addressIds: this.form.addressIds,
canCancel: this.form.selectedItemsFunction.includes('canCancel') ? 1 :
0,
cover: this.form.cover[
0] && this.form.cover[
0].url,
detailInfo: this.form.detailInfo,
endTime: this.form.endTime,
id: this.form.id,
isAutoEnd: this.form.isAutoEnd === true ? 1 :
0,
isGetPhone: this.form.selectedItemsOther.includes('isGetPhone') ? 1 :
0,
isGetReal
Name: this.form.selectedItemsOther.includes('isGetReal
Name') ? 1 :
0,
isHideList: this.form.selectedItemsFunction.includes('isHideList') ?
0 : 1,
isHideOrderAmount: this.form.selectedItemsFunction.includes('isHideOrderAmount') ? 1 :
0,
isJoin: this.form.isJoin,
maxJoinNum: this.form.maxJoinNum,
minAmount: this.form.minAmount,
name: this.form.
name,
products: this.form.products.map(item => {
// const image = item.image || [];
console.log(item,'==========')
return {
weight:item.weight,
detail:item.detail,
id: item.id,
// image: item.image.map(img => img.url).join(','),
image: item.image.map(img => img.url).join(','),
limitNum: item.limitNum,
name: item.
name,
parentId: item.parentId,
price: item.price,
soldNum: item.soldNum,
totalNum: item.totalNum
};
}),
realEndTime: this.form.realEndTime,
startTime: this.form.startTime,
status: this.form.status,
};
console.log(newForm, this.form.id)
this.$refs['form'].validate(valid => {
if (valid) {
if (this.form.id) {
editGroupBuy(newForm).then(response => {
console.log(response, '
00')
this.$modal.msgSuccess('修改成功')
this.$router.back(-1)
})
} else {
if (this.form.
name != '' && this.form.cover != '') {
addGroupShop(newForm).then(response => {
console.log(response)
this.$modal.msgSuccess('新增成功')
this.$router.back(-1)
})
} else {
this.$modal.msgError('请完善信息')
}
}
}
})
},
handleBack() {
this.$router.back(-1)
},
// 新增时间段
changeStatus() {
if (this.currentTime) {
this.timer = setInterval(() => {
this.currentTime = new Date().toLocaleTimeString();
console.log(this.currentTime, '9
0')
},
1000);
}
},
// 改变时间段的初始时间
changeStartTime(value, timeIndex) {
console.log(this.form.jobUserVOLists[timeIndex].jobList)
if (this.form.jobUserVOLists[timeIndex].jobList) {
this.form.jobUserVOLists[timeIndex].jobList.forEach(item => {
item.checkInTime = value
if (item.checkOutTime && item.checkInTime) {
item.workHour = getISOTime(item.checkInTime, item.checkOutTime)
if (item.jobUsers) {
item.jobUsers.forEach(itemson => {
itemson.workHour = item.workHour
itemson.point = parseInt(item.pointPercent) * item.workHour
})
}
}
})
}
},
// 改变时间段的初始时间
changeEndTime(value, timeIndex) {
if (this.form.jobUserVOLists[timeIndex].jobList) {
this.form.jobUserVOLists[timeIndex].jobList.forEach(item => {
item.checkOutTime = value
if (item.checkOutTime && item.checkInTime) {
item.workHour = getISOTime(item.checkInTime, item.checkOutTime)
if (item.jobUsers) {
item.jobUsers.forEach(itemson => {
itemson.workHour = item.workHour
itemson.point = parseInt(item.pointPercent) * item.workHour
})
}
}
})
}
},
// 跳转
toPrck() {
window.open('https://lbs.amap.com/tools/picker')
},
}
}
</script>
<style scoped lang="scss">
.container {
background-color: #f5f5f5;
padding: 1%;
}
.title_type {
font-size: 24px;
font-weight: 7
00;
margin-bottom: 2
0px;
}
.dialog-footer {
display: flex;
flex-direction: row;
justify-content: center;
align-items: center;
padding-bottom: 3
0px;
}
.avatar {
width: 5
0px;
height: 5
0px;
display: block;
}
.avatar-uploader .el-upload {
width:
100px;
height:
100px;
border: 1px dashed #ddd;
border-radius: 4px;
cursor: pointer;
position: relative;
overflow: hidden;
display: flex;
justify-content: center;
align-items: center;
}
.avatar-uploader-icon {
font-size: 2
0px; /* 调整图标大小 */
width: 2
0px;
height: 2
0px;
line-height: 3
0px;
text-align: center;
}
.avatar-uploader .el-upload:hover {
border-color: #4
09EFF;
}
.coverImage {
width: 214px;
height: 129px;
border-radius: 6px;
cursor: pointer;
}
.el-upload-list__item-thumbnail {
width: 8
0px; /* 设置图片宽度 */
height: 8
0px; /* 设置图片高度 */
object-fit: cover; /* 保持图片比例并覆盖容器 */
}
.select_mask {
position: absolute;
z-index: 2;
background-color: rgba(127, 125, 121,
0.5);
text-align: center;
top:
0;
bottom:
0;
left:
0;
right:
0;
width: 214px;
height: 129px;
display: flex;
justify-content: center;
align-items: center;
}
.margin-right-
10 {
margin-right:
10px;
}
.job_box {
/* border: 1px solid #ccc; */
background-color: #F8F8F8;
padding: 46px
10px
10px;
margin-bottom:
10px;
margin-left: 5
0px;
border-radius:
10px;
}
::v-deep .el-upload-list__item{
width: 6
0px;
height: 6
0px;
}
::v-deep .el-upload--picture-card {
width: 6
0px;
height: 6
0px;
position: relative;
}
::v-deep .el-upload--picture-card .el-icon-plus {
position: absolute;
top: 45%;
left: 5
0%;
transform: translate(-5
0%, -5
0%);
}
</style>
本文解析了Oracle数据库中字段属性<columnname=USERID>的含义，详细介绍了precision和scale参数的作用，前者定义了字段的有效数字位数，后者指定了小数位数。
扫一扫
4165
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
