Skip to content

P
pet-business-web
Commit b7b28324 authored by 陈明豪's avatar 陈明豪
Browse files
Options

修改图片上传后样式

parent c61c0317
Expand all Hide whitespace changes
Inline Side-by-side
Showing with 337 additions and 214 deletions
src/assets/styles/btn.scss
View file @ b7b28324
......@@ -218,3 +218,61 @@
font-size: 14px;
border-radius: 4px;
}
.form-detail-button {
//padding: 7px 13px 7px 11px !important;
padding-left: 6px !important;
padding-right: 6px !important;
height: 32px;
background: #5BB647;
border-radius: 4px 4px 4px 4px;
border: 1px solid #5BB647;
opacity: 1;
font-size: 12px;
font-family: Microsoft YaHei-Regular, Microsoft YaHei;
font-weight: 400;
color: #FFFFFF;
i{
width: 8px;
height: 8px;
margin-right: 4px;
}
&:hover {
background: #83C374!important;
color: #FFFFFF!important;
border: 1px solid #83C374!important;
}
&:focus {
background: #55A343!important;
color: #FFFFFF!important;
border: 1px solid #55A343!important;
}
}
.form-edit-button {
//padding: 7px 13px 7px 11px !important;
padding-left: 6px !important;
padding-right: 6px !important;
height: 32px;
background: #3490ce;
border-radius: 4px 4px 4px 4px;
border: 1px solid #3490ce;
opacity: 1;
font-size: 12px;
font-family: Microsoft YaHei-Regular, Microsoft YaHei;
font-weight: 400;
color: #FFFFFF;
i{
width: 8px;
height: 8px;
margin-right: 4px;
}
&:hover {
background: #63a8d6;
color: #FFFFFF!important;
border: 1px solid #63a8d6;
}
&:focus {
background: #3490ce!important;
color: #FFFFFF;
border: 1px solid #3490ce!important;
}
}
src/components/ImageUpload/index.vue
View file @ b7b28324
......@@ -96,7 +96,6 @@ export default {
value: {
handler(val) {
if (val) {
console.log('kkkkkkkkkkkkkkkkkk', this.baseUrl)
// 首先将值转为数组
const list = Array.isArray(val) ? val : this.value.split(',')
// 然后将数组转为对象数组
......@@ -138,13 +137,13 @@ export default {
}
if (!isImg) {
this.$modal.msgError(`文件格式不正确, 请上传${this.fileType.join('/')}图片格式文件!`)
this.$modal.msgError(`文件格式不正确, 请上传${this.fileType.join('/')}图片格式文件`)
return false
}
if (this.fileSize) {
const isLt = file.size / 1024 / 1024 < this.fileSize
if (!isLt) {
this.$modal.msgError(`上传图片大小不能超过 ${this.fileSize} MB!`)
this.$modal.msgError(`上传图片大小不能超过 ${this.fileSize} MB`)
return false
}
}
......@@ -153,7 +152,7 @@ export default {
},
// 文件个数超出
handleExceed() {
this.$modal.msgError(`上传文件数量不能超过 ${this.limit} 个!`)
this.$modal.msgError(`上传文件数量不能超过 ${this.limit} 个`)
},
// 上传成功回调
handleUploadSuccess(res, file) {
......
src/views/banner_management/banner_add.vue
View file @ b7b28324
<template>
<div class="banner-container">
<div class="bannerHeaderTitle">
<span style="color: #666666; font-weight: 600; font-size: 16px;">新增</span>
<!-- 头部标题-->
<div style="padding-top:32px;text-align: center;">
<span class="top-title-style">新增</span>
</div>
<div class="bannerAddMain">
<div style="display: flex;margin: 20px;">
<div style="height: 30px;border-left: 5px solid #5FB54B;" />
<div style="padding-top: 3px;padding-left: 10px;color: #666666; font-weight: 700; font-size: 16px;">轮播信息</div>
<div style="padding: 20px;">
<div style="display: flex">
<!-- 轮播信息 -->
<div class="tip-green" />
<div class="title-font-style">
轮播信息
</div>
</div>
</div>
<div>
<el-form ref="form" :model="form" label-width="133px" :rules="rules">
<el-form-item label="标题：" prop="title">
<el-input v-model.trim="form.title" class="form-input" style="width: 420px" maxlength="12" show-word-limit clearable />
<el-input v-model.trim="form.title" class="form-input" style="width: 420px" maxlength="12" clearable />
</el-form-item>
<el-form-item label="轮播图：" prop="img">
<image-upload v-model="form.img" :limit="1" :is-show-tip="false" file-size="20" />
</el-form-item>
<el-form-item label="跳转地址：" prop="url">
<el-input v-model.trim="form.url" class="form-input" style="width: 420px" maxlength="255" show-word-limit clearable />
<el-input v-model.trim="form.url" class="form-input" style="width: 420px" maxlength="255" clearable />
</el-form-item>
<el-form-item label="权重：" prop="sort">
<el-input-number
......@@ -47,7 +53,7 @@
<span v-else style="height: 2.5rem;line-height: 2.5rem;color: #f5aa6c;margin-left: 5px;">未发布</span>
</el-form-item>
<el-form-item label="备注：" prop="notes">
<el-input v-model.trim="form.notes" class="form-input" style="width: 420px" maxlength="60" show-word-limit clearable />
<el-input v-model.trim="form.notes" type="textarea" rows="3" class="form-input" style="width: 420px" maxlength="60" clearable />
</el-form-item>
<el-form-item>
<el-button :loading="submitLoading" class="queryBtn" icon="el-icon-check" @click="submitForm">提交</el-button>
......@@ -166,7 +172,7 @@ export default {
if (res.code === 200) {
this.submitLoading = false
this.$message({
message: '新增成功！',
message: '新增成功',
type: 'success'
})
this.goBack()
......@@ -211,4 +217,28 @@ export default {
line-height: 40px !important;
font-size: 14px !important;
}
//最上方文字样式
.top-title-style{
font-size: 24px;
font-family: Microsoft YaHei-Bold, Microsoft YaHei;
font-weight: bold;
color: #333333;
}
//模块tip样式--绿色
.tip-green {
margin-right: 13px;
width: 3px;
height: 24px;
background: #5FB54B;
border-radius: 10px 10px 10px 10px;
opacity: 1;
}
//小标题样式
.title-font-style {
font-size: 16px;
font-family: Microsoft YaHei-Bold, Microsoft YaHei;
font-weight: bold;
color: #333333;
line-height: 24px;
}
</style>
src/views/banner_management/banner_detail.vue
View file @ b7b28324
<template>
<div class="banner-container">
<div class="bannerHeaderTitle">
<span style="color: #666666; font-weight: 600; font-size: 16px;">详情</span>
<!-- 头部标题-->
<div style="padding-top:32px;text-align: center;">
<span class="top-title-style">详情</span>
</div>
<div class="bannerAddMain">
<div style="display: flex;margin: 20px;">
<div style="height: 30px;border-left: 5px solid #5FB54B;" />
<div style="padding-top: 3px;padding-left: 10px;color: #666666; font-weight: 700; font-size: 16px;">轮播信息</div>
<div style="padding: 20px;">
<div style="display: flex">
<!-- 轮播信息 -->
<div class="tip-green" />
<div class="title-font-style">
轮播信息
</div>
</div>
</div>
<div>
<el-form ref="form" :model="form" label-width="133px">
......@@ -47,7 +53,7 @@
</span>
</el-form-item>
<el-form-item label="备注：" prop="notes">
<el-input v-model.trim="form.notes" disabled class="form-input" style="width: 420px" maxlength="60" show-word-limit clearable />
<el-input v-model.trim="form.notes" type="textarea" rows="3" show-word-limit disabled class="form-input" style="width: 420px" maxlength="60" clearable />
</el-form-item>
<el-form-item>
<el-button class="resetBtn" icon="el-icon-back" @click="goBack">返回</el-button>
......@@ -147,4 +153,28 @@ export default {
height: 9.25rem;
background-color: #00afff;
}
//最上方文字样式
.top-title-style{
font-size: 24px;
font-family: Microsoft YaHei-Bold, Microsoft YaHei;
font-weight: bold;
color: #333333;
}
//模块tip样式--绿色
.tip-green {
margin-right: 13px;
width: 3px;
height: 24px;
background: #5FB54B;
border-radius: 10px 10px 10px 10px;
opacity: 1;
}
//小标题样式
.title-font-style {
font-size: 16px;
font-family: Microsoft YaHei-Bold, Microsoft YaHei;
font-weight: bold;
color: #333333;
line-height: 24px;
}
</style>
src/views/banner_management/banner_edit.vue
View file @ b7b28324
<template>
<div class="banner-container">
<div class="bannerHeaderTitle">
<span style="color: #666666; font-weight: 600; font-size: 16px;">编辑</span>
<!-- 头部标题-->
<div style="padding-top:32px;text-align: center;">
<span class="top-title-style">编辑</span>
</div>
<div class="bannerAddMain">
<div style="display: flex;margin: 20px;">
<div style="height: 30px;border-left: 5px solid #5FB54B;" />
<div style="padding-top: 3px;padding-left: 10px;color: #666666; font-weight: 700; font-size: 16px;">轮播信息</div>
<div style="padding: 20px;">
<div style="display: flex">
<!-- 轮播信息 -->
<div class="tip-green" />
<div class="title-font-style">
轮播信息
</div>
</div>
</div>
<div>
<el-form ref="form" :model="form" label-width="133px" :rules="rules">
<el-form-item label="标题：" prop="title">
<el-input v-model.trim="form.title" class="form-input" style="width: 420px" maxlength="12" show-word-limit clearable :disabled="form.id === 1" />
<el-input v-model.trim="form.title" class="form-input" style="width: 420px" maxlength="12" clearable :disabled="form.id === 1" />
</el-form-item>
<el-form-item label="轮播图：" prop="img">
<image-upload v-model="form.img" :limit="1" :is-show-tip="false" file-size="20" />
</el-form-item>
<el-form-item label="跳转地址：" prop="url">
<el-input v-model.trim="form.url" class="form-input" style="width: 420px" maxlength="255" show-word-limit clearable :disabled="form.id === 1" />
<el-input v-model.trim="form.url" class="form-input" style="width: 420px" maxlength="255" clearable :disabled="form.id === 1" />
</el-form-item>
<el-form-item label="权重：" prop="sort">
<el-input-number
......@@ -49,7 +55,7 @@
</span>
</el-form-item>
<el-form-item label="备注：" prop="notes">
<el-input v-model.trim="form.notes" :disabled="form.id === 1" class="form-input" style="width: 420px" maxlength="60" show-word-limit clearable />
<el-input v-model.trim="form.notes" type="textarea" rows="3" :disabled="form.id === 1" class="form-input" style="width: 420px" maxlength="60" clearable />
</el-form-item>
<el-form-item>
<el-button :loading="submitLoading" class="queryBtn" icon="el-icon-check" @click="submitForm">提交</el-button>
......@@ -193,7 +199,7 @@ export default {
if (res.code === 200) {
this.submitLoading = false
this.$message({
message: '修改成功！',
message: '修改成功',
type: 'success'
})
this.goBack()
......@@ -239,4 +245,28 @@ export default {
line-height: 40px !important;
font-size: 14px !important;
}
//最上方文字样式
.top-title-style{
font-size: 24px;
font-family: Microsoft YaHei-Bold, Microsoft YaHei;
font-weight: bold;
color: #333333;
}
//模块tip样式--绿色
.tip-green {
margin-right: 13px;
width: 3px;
height: 24px;
background: #5FB54B;
border-radius: 10px 10px 10px 10px;
opacity: 1;
}
//小标题样式
.title-font-style {
font-size: 16px;
font-family: Microsoft YaHei-Bold, Microsoft YaHei;
font-weight: bold;
color: #333333;
line-height: 24px;
}
</style>
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment