vue+elementUI 动态产品配置
先看效果图
直接上源码
<template>
<div style="background:#fff;padding:20px">
<el-form :inline="true"
class="demo-form-inline">
<el-form-item label="产品名称">
<el-input v-model="name"
placeholder="产品名称"></el-input>
</el-form-item>
<el-form-item label="产品类型">
<el-select v-model="type"
placeholder="产品类型">
<el-option v-for="item in items"
:key="item.id"
:label="item.label"
:value="item.value"></el-option>
</el-select>
</el-form-item>
<el-form-item>
<el-button type="primary"
icon="el-icon-search"
@click="querey()">查询</el-button>
<el-button type="primary"
icon="el-icon-delete"
@click="reset()">清空</el-button>
</el-form-item>
</el-form>
<el-button type="primary"
icon="el-icon-plus"
@click="addForm()">添加</el-button>
<el-dialog title="添加产品"
:visible.sync="dialogFormVisible"
style="width:90%!important;margin:0 auto;margin-top: 0px;">
<el-row type="flex">
<el-col :xs="4"
:sm="6"
:md="8"
:lg="9"
:xl="11"
style="">
<el-form :model="form"
ref="ruleForm"
label-width="100px"
class="demo-ruleForm">
<div class="phonebackground">
<div class="phonetop">
<span style="margin-right: 80px;margin-left:20px">
<i style="font-size:30px"
class="el-icon-more"></i>
</span>
<span>
<i class="ptop"></i>
</span>
</div>
<div class="phonecontent">
<div class="companybody">
<div style="position:absolute;top:10px;left:10px;">
<span style="font-size:12px;color: #999;">
<i class="element-icons el-iconzuojiantou"
style="font-size:17px"></i>{{form.productName}}</span>
</div>
<div style="position:absolute;top:10px;right:12px;">
<span style="font-size:10px;color: #999;">
<i class="element-icons el-iconhome-line"
style="font-size:19px"></i>回到首页</span>
</div>
<div style="position:absolute;top:12%;left:0%;transform: translateY(37px)">
<div class="texttitle">
<el-form-item prop="productFeature"
class="textarea"
style="margin-left:6px">
<el-image
:src="form.productFeature"
fit="cover" >
<div slot="error" class="image-slot"></div>
</el-image>
</el-form-item>
</div>
</div>
</div>
</div>
<div class="phonebottom">
<span>
<i class="pbot"></i>
</span>
</div>
</div>
</el-form>
</el-col>
<el-col style="">
<el-form :model="form"
:rules="rules"
ref="form">
<el-form-item label="产品名称"
prop="productName"
:label-width="formLabelWidth">
<el-input v-model="form.productName" placeholder="请输入产品名称"
auto-complete="off"
maxlength="20"></el-input>
</el-form-item>
<el-form-item label="产品类型"
prop="productType"
:label-width="formLabelWidth">
<el-select v-model="form.productType"
@change="select(form.productType)"
placeholder="请选择产品类型">
<el-option v-for="item in items"
:key="item.id"
:label="item.label"
:value="item.value">
</el-option>
</el-select>
</el-form-item>
<!-- <el-form-item label="产品简介"-->
<!-- prop="productProfile"-->
<!-- :label-width="formLabelWidth">-->
<!-- <el-input v-model="form.productProfile"-->
<!-- auto-complete="off"></el-input>-->
<!-- </el-form-item>-->
<!-- <el-form-item label="产品内容"-->
<!-- prop="productFeature"-->
<!-- :label-width="formLabelWidth">-->
<!-- <el-upload v-show="false"-->
<!-- id="quill-upload"-->
<!-- action="/wmp/upload"-->
<!-- name="upload_file"-->
<!-- multiple-->
<!-- :limit="5"-->
<!-- :file-list="fileList"-->
<!-- list-type="picture"-->
<!-- :show-file-list="false"-->
<!-- :before-upload="beforeUpload"-->
<!-- :on-error="uploadError"-->
<!-- :on-success="handleExceed">-->
<!-- <el-button size="small"-->
<!-- type="primary"></el-button>-->
<!-- <div slot="tip"-->
<!-- class="el-upload__tip">只能上传jpg/png文件，且不超过500kb</div>-->
<!-- </el-upload>-->
<!-- <quill-editor v-model="value"-->
<!-- ref="myQuillEditor"-->
<!-- @change="onEditorChange($event)"-->
<!-- :options="editorOption">-->
<!-- </quill-editor>-->
<!-- </el-form-item>-->
<!-- <el-form-item label="电子银行地址"-->
<!-- prop="downloadUrl"-->
<!-- :label-width="formLabelWidth"-->
<!-- v-if="this.flag">-->
<!-- <el-input v-model="form.downloadUrl" placeholder="请输入电子银行下载地址"-->
<!-- auto-complete="off"></el-input>-->
<!-- </el-form-item>-->
<el-form-item label="办理类型"
prop="handleType"
:label-width="formLabelWidth">
<el-select v-model="form.handleType"
@change="select1(form.handleType)"
placeholder="请选择办理类型">
<el-option v-for="item in items1"
:key="item.id"
:label="item.label"
:value="item.value">
</el-option>
</el-select>
</el-form-item>
<el-form-item label="跳转地址"
prop="loanUrl"
:label-width="formLabelWidth"
v-if="this.loanFlag">
<el-input v-model="form.loanUrl" placeholder="请输入跳转地址"
auto-complete="off"></el-input>
</el-form-item>
<el-form-item label="产品标签"
prop="productTag"
:label-width="formLabelWidth">
<el-input v-model="form.productTag" placeholder="请输入产品标签" maxlength="5"
auto-complete="off"></el-input>
</el-form-item>
<el-form-item label="产品备注"
prop="productRemark"
:label-width="formLabelWidth">
<el-input v-model="form.productRemark" placeholder="请输入产品备注" maxlength="10"
auto-complete="off"></el-input>
</el-form-item>
<el-form-item label="产品特征"
prop="productCharacter"
:label-width="formLabelWidth">
<el-input v-model="form.productCharacter" placeholder="请输入产品特征" maxlength="10"
auto-complete="off"></el-input>
</el-form-item>
<el-form-item label="产品利率"
prop="productRate"
:label-width="formLabelWidth">
<el-tooltip class="item" effect="dark" content="产品利率举例：11.2%" placement="top-end">
<el-input v-model="form.productRate" placeholder="请输入产品利率"
auto-complete="off"></el-input>
</el-tooltip>
</el-form-item>
<el-form-item label="利率备注"
prop="rateRemark"
:label-width="formLabelWidth">
<el-input v-model="form.rateRemark" placeholder="请输入利率备注" maxlength="10"
auto-complete="off"></el-input>
</el-form-item>
<el-form-item label="是否热门产品" :label-width="formLabelWidth">
<el-radio-group v-model="isStarValue">
<el-radio :label="item.value" :key="item.value" v-for="(item,index) in isStarList">{{item.label}}</el-radio>
</el-radio-group>
</el-form-item>
<el-form-item label="产品内容图片"
:label-width="formLabelWidth">
<el-upload prop='productFeature'
class="upload-demo"
action="/wmp/upload"
:on-preview="handlePreview"
:before-upload="beforeUpload"
:on-success="handleSuccess"
:on-remove="handleRemove"
ref="upload"
multiple
:limit="1"
:on-exceed="handleExceed"
:file-list="fileList"
list-type="picture">
<el-button size="small"
type="primary">点击上传</el-button>
<div slot="tip"
class="el-upload__tip">只能上传jpg/png文件，且不超过2M</div>
</el-upload>
</el-form-item>
<el-form-item label="排序"
prop="sort"
:label-width="formLabelWidth">
<el-input v-model="form.sort" placeholder="请输入排序" οnkeypress="return( /[\d]/.test(String.fromCharCode(event.keyCode) ) )"
auto-complete="off"></el-input>
</el-form-item>
</el-form>
</el-col>
</el-row>
<div slot="footer"
class="dialog-footer">
<el-button @click="
dialogFormVisible=false">取 消</el-button>
<el-button type="primary"
v-if="sub"
@click="submitForm('form')">确 定</el-button>
<el-button type="primary"
v-else
@click="editForm(form)">修 改</el-button>
</div>
</el-dialog>
<el-table :data="tableData.slice((currentPage-1)*pagesize,currentPage*pagesize)"
border
style="width: 100%">
<el-table-column fixed
prop="id"
label="序号"
width="80">
</el-table-column>
<el-table-column prop="productName"
label="产品名称"
width="150">
</el-table-column>
<el-table-column prop="productTypeName"
label="产品类型"
width="170">
</el-table-column>
<!-- <el-table-column prop="productProfile"-->
<!-- label="产品简介"-->
<!-- width="170">-->
<!-- </el-table-column>-->
<el-table-column prop="handleTypeName"
label="办理类型"
width="100">
</el-table-column>
<el-table-column prop="productTag"
label="产品标签"
width="100">
</el-table-column>
<el-table-column prop="productRemark"
label="产品备注"
width="150">
</el-table-column>
<el-table-column prop="productCharacter"
label="产品特征"
width="100">
</el-table-column>
<el-table-column prop="productRate"
label="产品利率"
width="100">
</el-table-column>
<el-table-column prop="rateRemark"
label="利率备注"
width="100">
</el-table-column>
<el-table-column prop="isStar"
label="是否热门产品" :formatter="formatRole"
width="120">
</el-table-column>
<el-table-column prop="sort"
label="排序"
width="50">
</el-table-column>
<el-table-column fixed="right"
label="操作"
width="200">
<template slot-scope="scope">
<el-button @click="editClick(scope.row)"
size="mini"
type="infor"
icon="el-icon-edit-outline">编辑</el-button>
<el-button @click="delClick(scope.row)"
size="mini"
type="danger"
icon="el-icon-delete">删除</el-button>
</template>
</el-table-column>
</el-table>
<el-pagination @size-change="handleSizeChange"
@current-change="handleCurrentChange"
:current-page="currentPage"
:page-sizes="[5, 10, 20, 40]"
:page-size="pagesize"
layout="total, sizes, prev, pager, next, jumper"
:total="total">
</el-pagination>
</div>
</template>
<script>
import { addObj, putObj, delObj } from '@/api/wmp/showmanage/productIndex'
// import { VueFroala } from 'vue-froala-wysiwyg'
// Require Froala Editor js file.
// import 'froala-editor/js/froala_editor.pkgd.min'
// Require Froala Editor css files.
// import 'froala-editor/css/froala_editor.pkgd.min.css'
// import 'font-awesome/css/font-awesome.css'
// import 'froala-editor/css/froala_style.min.css'
import request from '@/router/axios'
import { quillEditor } from 'vue-quill-editor' // 调用编辑器
import Quill from 'quill'
import imageResize from 'quill-image-resize-module'
import 'quill/dist/quill.core.css'
import 'quill/dist/quill.snow.css'
import 'quill/dist/quill.bubble.css'
Quill.register('modules/imageResize', imageResize)
export default {
components: {
quillEditor
// Quill
// imageResize
},
props: ['content'],
data() {
return {
total: 10, // 默认数据总数
pagesize: 10, // 每页的数据条数
currentPage: 1, // 默认开始页面
dialogFormVisible: false,
formLabelWidth: '120px',
uillUpdateImg: false, // 根据图片上传状态来确定是否显示loading动画
serverUrl: '', // 上传的图片服务器地址
value: '',
name: '',
type: '',
columnId: '',
params: {},
items: [],
items1:[],
fileList: [],
flag: false,
loanFlag:false,
isStarList: [
{ label: "是", value: '1'},
{ label: "否", value: '0'}
],
isStarValue:'0',
sub: true,
editorOption: {
modules: {
imageResize: { // 添加
displayStyles: { // 添加
backgroundColor: 'black',
border: 'none',
color: 'white'
}
},
// modules: ['Resize', 'DisplaySize', 'Toolbar'], // 添加
toolbar: {
container: [
['bold', 'italic', 'underline', 'strike', 'image'],
['formula', 'clean'],
['blockquote', 'code-block'],
[{ 'list': 'ordered' }, { 'list': 'bullet' }],
[{ 'script': 'sub' }, { 'script': 'super' }],
[{ 'size': ['small', false, 'large', 'huge'] }],
// [{ 'font': fonts }],
[{ 'header': [1, 2, 3, 4, 5, 6, false] }],
[{ 'color': [] }, { 'background': [] }],
[{ 'align': [] }],
[{ 'direction': 'rtl' }]
],
handlers: {
'image': function(value) {
if (value) {
// 给个点击触发Element-ui，input框选择图片文件
document.querySelector('#quill-upload input').click()
} else {
this.quill.format('image', false)
}
}
}
}
},
theme: 'snow', // or 'bubble'
placeholder: '您想说点什么？'
},
form: {
productName: '',
productType: '',
productProfile: '',
downloadUrl: '',
productFeature: '',
handleType:'',
loanUrl:'',
productCharacter:'',
productTag:'',
productRemark:'',
productRate:'',
rateRemark:'',
isStar:'',
sort:'',
},
tableData: [{
id: '',
productName: '',
productType: '',
productProfile: '',
downloadUrl: '',
productFeature: '',
handleType:'',
loanUrl:'',
productCharacter:'',
productTag:'',
productRemark:'',
productRate:'',
rateRemark:'',
isStar:'',
sort:'',
}],
rules: {
productName: [
{ required: true, // 是否必填
message: '产品名称不能为空', // 规则
trigger: 'blur' // 失去焦点事件触发
}
],
productType: [
{ required: true, // 是否必填
message: '产品类型不能为空', // 规则
trigger: 'blur' // 失去焦点事件触发
}
],
productProfile: [
{ required: true, // 是否必填
message: '产品简介不能为空', // 规则
trigger: 'blur' // 失去焦点事件触发
}
],
productFeature: [
{ required: true, // 是否必填
message: '产品内容不能为空', // 规则
trigger: 'blur' // 失去焦点事件触发
}
],
downloadUrl: [
{ required: true, // 是否必填
message: '电子银行下载地址不能为空', // 规则
trigger: 'blur' // 失去焦点事件触发
}
], handleType: [
{ required: true, // 是否必填
message: '办理类型不能为空', // 规则
trigger: 'blur' // 失去焦点事件触发
}
],loanUrl: [
{ required: true, // 是否必填
message: '我要贷款地址不能为空', // 规则
trigger: 'blur' // 失去焦点事件触发
}
],
productCharacter: [
{ required: true, // 是否必填
message: '产品特征不能为空', // 规则
trigger: 'blur' // 失去焦点事件触发
}
],
productTag: [
{ required: true, // 是否必填
message: '产品标签不能为空', // 规则
trigger: 'blur' // 失去焦点事件触发
}
],
productRemark: [
{ required: true, // 是否必填
message: '产品备注不能为空', // 规则
trigger: 'blur' // 失去焦点事件触发
}
],
// productRate: [
// { required: true, // 是否必填
// message: '产品利率不能为空', // 规则
// trigger: 'blur' // 失去焦点事件触发
// }
// ],
// rateRemark: [
// { required: true, // 是否必填
// message: '利率备注不能为空', // 规则
// trigger: 'blur' // 失去焦点事件触发
// }
// ],
isStar: [
{ required: true, // 是否必填
message: '请选择是否热门产品', // 规则
trigger: 'blur' // 失去焦点事件触发
}
],
sort: [
{ required: true, // 是否必填
message: '排序不能为空', // 规则
trigger: 'blur' // 失去焦点事件触发
}
]
}
}
},
created() {
this.columnId = this.$route.query.columnId
this.params.columnId = this.columnId
this.getList(this.params)
this.selectDic()
this.selectDic1()
},
methods: {
formatRole: function(row, column) {
return row.isStar == '0' ? "否" : row.isStar == '1' ? "是" : "";
},
handleSizeChange: function(size) {
this.pagesize = size
},
handleCurrentChange: function(currentPage) {
this.currentPage = currentPage
},
select(value) {
let obj = {}
obj = this.items.find((item) => {
return item.value === value
})
this.item = obj.value
if (this.item === '4') {
this.flag = true
} else {
this.flag = false
}
},
selectDic() {
request({
url: '/admin/dict/type/product_type',
method: 'get',
params: this.params
}).then(res => {
this.items = res.data
})
},
selectDic1() {
request({
url: '/admin/dict/type/handle_type',
method: 'get',
params: this.params
}).then(res => {
this.items1 = res.data
})
},
select1(value) {
let obj = {}
obj = this.items1.find((item) => {
return item.value === value
})
if (obj.value === '2') {
this.loanFlag = true
} else {
this.loanFlag = false
}
},
addForm() {
this.sub = true
this.dialogFormVisible = true
this.form = {}
this.value = ''
this.fileList = []
},
datachange() {
//this.form.productFeature = this.value
//document.getElementById('datas').innerHTML = this.form.productFeature
},
querey() {
this.getList(this.params)
},
reset() {
this.name = ''
this.type = ''
this.params.productType = ''
this.params.productName = ''
this.params.columnId = this.columnId
this.getList(this.params)
},
delClick(row) {
this.$confirm(
'此操作将永久删除产品(产品名称:' + row.productName + '), 是否继续?',
'提示',
{
confirmButtonText: '确定',
cancelButtonText: '取消',
type: 'warning'
}
).then(() => {
delObj(row.id)
.then(() => {
this.getList(this.params)
this.$notify({
title: '成功',
message: '删除成功',
type: 'success',
duration: 2000
})
})
.cache(() => {
this.$notify({
title: '失败',
message: '删除失败',
type: 'error',
duration: 2000
})
})
})
},
// 获取列表
getList(params) {
this.params.columnId = this.columnId
if (this.name !== '') {
this.params.productName = this.name
}
if (this.type !== '') {
this.params.productType = this.type
}
request({
url: '/wmp/productmanage/productmanageList',
method: 'get',
params: this.params
}).then(res => {
this.tableData = res.data
this.total = this.tableData.length
this.currentPage = 1
})
},
editClick(row) {
this.dialogFormVisible = true
this.sub = false
this.form.id = row.id
this.form.productName = row.productName
this.form.productType = row.productType
this.form.productProfile = row.productProfile
this.form.productFeature = row.productFeature
this.fileList = []
this.fileList.push({ url: row.productFeature })
if (row.productType === '4') {
this.flag = true
} else {
this.flag = false
}
this.form.downloadUrl = row.downloadUrl
this.form.handleType=row.handleType
if(row.handleType=='2'){
this.loanFlag = true
}else{
this.loanFlag = false
}
this.form.loanUrl=row.loanUrl,
this.form.productCharacter=row.productCharacter,
this.form.productTag=row.productTag,
this.form.productRemark=row.productRemark,
this.form.productRate=row.productRate,
this.form.rateRemark=row.rateRemark
this.form.isStar=row.isStar
this.isStarValue = row.isStar
this.form.sort=row.sort
},
editForm(form) {
this.form.columnId = this.columnId
//this.form.productFeature = this.value
if(!this.form.productFeature){
this.$message.error('请上传产品内容图片!')
return;
}
this.form.isStar = this.isStarValue
putObj(this.form).then(res => {
if (!res.data.data) {
this.$notify({
title: '修改失败',
message: res.data.msg,
type: 'fail',
duration: 2000
})
return
}
this.getList(this.params)
this.$notify({
title: '成功',
message: '修改成功',
type: 'success',
duration: 2000
})
this.dialogFormVisible = false
this.getList(this.params)
})
},
submitForm(form) {
this.form.columnId = this.columnId
if(!this.form.productFeature){
this.$message.error('请上传产品内容图片!')
return;
}
this.form.isStar = this.isStarValue
this.$refs[form].validate(valid => {
if (valid) {
addObj(this.form).then(res => {
if (!res.data.data) {
this.$notify({
title: '添加失败',
message: res.data.msg,
type: 'faile',
duration: 2000
})
return
}
this.$notify({
title: '成功',
message: '创建成功',
type: 'success',
duration: 2000
})
this.dialogFormVisible = false
this.getList(this.params)
})
// 如果通过验证 to do...
} else {
console.log('error submit!!')
return false
}
})
},
onEditorChange({ quill, html, text }) {
// 富文本编辑器内容发生改变的时候
this.value = html
this.$emit('textChange', html) // 将富文本编辑器输入的文本发送给父组件，父组件涉及提交添加或者更改
this.datachange()
},
handleSuccess(response, file, fileList) {
this.form.productFeature = file.response.url
},
handleRemove(file, fileList) {
},
handlePreview(file) {
},
beforeUpload(file) {
const isLt = file.size / 1024 / 1024
const fileName = file.name.split('.')
if (fileName[1] === 'jpg' || fileName[1] === 'png') {
if (isLt > 2) {
this.$message.error('上传文件大于2M!')
return false
} else {
return file
}
} else {
this.$message.error('上传文件只能是 jpg/png 格式!')
return false
}
},
uploadError() { // 图片上传失败,关闭loading
this.uillUpdateImg = false
this.$message.error('图片插入失败')
},
handleExceed(response, file, fileList) { // 图片添加成功
// const quill = this.$refs.myQuillEditor.quill
// if (response.url !== '') {
// const length = quill.getSelection().index
// // 插入图片 response.data.url为服务器返回的图片地址
// quill.insertEmbed(length, 'image', file.response.url)
// // 调整光标到最后
// quill.setSelection(length + 1)
// } else {
// this.$message.error('图片插入失败')
// }
// this.fileList = fileList
// this.uillUpdateImg = false
this.$message.warning(`当前限制选择 1 个文件，本次选择了 ${files.length} 个文件，共选择了 ${files.length + fileList.length} 个文件`)
}
},
mounted() {
// document.getElementById('datas').innerHTML = this.form.productFeature
},
updated: function() {
if (this.dialogFormVisible) {
this.datachange()
}
}
}
</script>
<style scoped>
.el-select {
display: inline-block;
position: relative;
width: 100%;
}
>>> .el-dialog {
position: relative;
margin: 0 auto;
border-radius: 2px;
-webkit-box-shadow: 0 1px 3px rgba(0, 0, 0, 0.3);
box-shadow: 0 1px 3px rgba(0, 0, 0, 0.3);
box-sizing: border-box;
width: 100% !important;
}
>>> .ql-editor {
-webkit-box-sizing: border-box;
box-sizing: border-box;
line-height: 1.42;
height: 200px;
overflow-y: auto !important;
overflow-x: hidden !important;
outline: none;
overflow-y: auto;
padding: 12px 15px;
-o-tab-size: 4;
tab-size: 4;
-moz-tab-size: 4;
text-align: left;
white-space: pre-wrap;
word-wrap: break-word;
}
.phonebackground {
width: 285px;
height: 490px;
border-radius: 40px;
background-color: #fff;
position: relative;
box-shadow: 0 0 0 8px #e4e4e4;
}
.phonetop {
height: 50px;
width: 273px;
position: absolute;
top: 3px;
left: 6px;
background: #ffffff;
border-radius: 36px;
}
.phonecontent {
height: 386px;
width: 273px;
-webkit-box-sizing: border-box;
box-sizing: border-box;
border: 1px solid #e4e4e4;
border-radius: 5px;
position: absolute;
left: 5px;
top: 50px;
box-shadow: inset 1px 1px 2px #e4e7ed;
/* background-image:url('/static/img/bg6.jpg'); */
/* background-size:cover; */
overflow-y: auto;
overflow-x: hidden;
}
.phonebottom {
height: 50px;
width: 273px;
position: absolute;
bottom: 4px;
left: 6px;
background: #ffffff;
border-radius: 36px;
text-align: -webkit-center;
-moz-text-align: -webkit-center;
-webkit-text-align: -webkit-center;
}
.ptop {
height: 8px;
width: 75px;
border: 1px;
display: inline-block;
background: #999;
border-radius: 40px;
margin-bottom: 6px;
}
.pbot {
font-size: 30px;
color: rgb(136, 136, 136);
display: inline-block;
height: 25px;
width: 95px;
background: #ffffff;
border-radius: 20px;
box-shadow: 0 0 10px #606266;
margin-top: 13px;
}
.companybody {
position: relative;
}
.texttitle {
background: rgb(255, 255, 255);
height: 330px;
/* -webkit-box-shadow: 2px 2px 4px #999; */
/* box-shadow: 1px 1px 1px #999; */
width: 255px;
margin: 8px;
-webkit-box-sizing: border-box;
box-sizing: border-box;
border-radius: 10px;
overflow-y: auto;
overflow-x: hidden;
}
>>> .textarea .el-form-item__content {
line-height: 40px;
position: relative;
font-size: 14px;
margin-left: 6px !important;
}
>>> .textarea .ql-editor {
-webkit-box-sizing: border-box;
box-sizing: border-box;
line-height: 1.42;
height: 280px;
overflow-y: auto !important;
outline: none;
overflow-x: hidden;
padding: 12px 0px;
-o-tab-size: 4;
tab-size: 4;
-moz-tab-size: 4;
text-align: left;
white-space: pre-wrap;
word-wrap: break-word;
}
.avue-contail {
width: 100%;
height: 100%;
background: #fff;
background-size: 100%;
background-repeat: no-repeat;
}
</style>