|
@@ -0,0 +1,460 @@
|
|
|
+<template>
|
|
|
+ <div class="app-container sensorConfiguration">
|
|
|
+ <div class="title-box">
|
|
|
+ <el-form :model="queryParams" class="form-box" ref="queryForm" :inline="true">
|
|
|
+ <el-form-item label="状态" prop="category" label-width="60px">
|
|
|
+ <el-select v-model="queryParams.category" clearable placeholder="请选择分类" style="width: 200px">
|
|
|
+ <el-option
|
|
|
+ v-for="item in optionList"
|
|
|
+ :key="item.value"
|
|
|
+ :label="item.label"
|
|
|
+ :value="item.value">
|
|
|
+ </el-option>
|
|
|
+ </el-select>
|
|
|
+ </el-form-item>
|
|
|
+ <el-form-item label="文件名" prop="fileName">
|
|
|
+ <el-input
|
|
|
+ maxLength="30"
|
|
|
+ v-model="queryParams.fileName"
|
|
|
+ placeholder="文件名"
|
|
|
+ clearable
|
|
|
+ style="width: 200px"
|
|
|
+ />
|
|
|
+ </el-form-item>
|
|
|
+ <el-form-item>
|
|
|
+ <p class="inquire-button-one" @click="handleQuery" style="margin-right:10px;">查询</p>
|
|
|
+ <p class="reset-button-one" @click="resetQuery">重置</p>
|
|
|
+ </el-form-item>
|
|
|
+ <el-form-item label="" prop="title" style="float: right;margin-right:20px;">
|
|
|
+ <p class="add-button-one-90" @click="tableButton(1)">新增</p>
|
|
|
+ </el-form-item>
|
|
|
+ </el-form>
|
|
|
+ </div>
|
|
|
+ <div class="content-box">
|
|
|
+ <el-table v-loading="loading" border :data="dataList" ref="multipleTable">
|
|
|
+ <el-table-column label="文件名" align="center" prop="fileName" show-overflow-tooltip/>
|
|
|
+ <el-table-column label="PC端正常图标" align="center" prop="pcNormal" show-overflow-tooltip width="120">
|
|
|
+ <template slot-scope="scope">
|
|
|
+ <img class="icon-img-box" v-if="scope.row.pcNormal" :src="scope.row.pcNormal" @click="lookImgButton(scope.row.pcNormal)">
|
|
|
+ <p v-else>未上传</p>
|
|
|
+ </template>
|
|
|
+ </el-table-column>
|
|
|
+ <el-table-column label="PC端异常图标" align="center" prop="pcAbnormal" show-overflow-tooltip width="120">
|
|
|
+ <template slot-scope="scope">
|
|
|
+ <img class="icon-img-box" v-if="scope.row.pcAbnormal" :src="scope.row.pcAbnormal" @click="lookImgButton(scope.row.pcAbnormal)">
|
|
|
+ <p v-else>未上传</p>
|
|
|
+ </template>
|
|
|
+ </el-table-column>
|
|
|
+ <el-table-column label="疏散正常图标" align="center" prop="evacuationNormal" show-overflow-tooltip width="120">
|
|
|
+ <template slot-scope="scope">
|
|
|
+ <img class="icon-img-box" v-if="scope.row.evacuationNormal" :src="scope.row.evacuationNormal" @click="lookImgButton(scope.row.evacuationNormal)">
|
|
|
+ <p v-else>未上传</p>
|
|
|
+ </template>
|
|
|
+ </el-table-column>
|
|
|
+ <el-table-column label="疏散异常图标" align="center" prop="evacuationAbnormal" show-overflow-tooltip width="120">
|
|
|
+ <template slot-scope="scope">
|
|
|
+ <img class="icon-img-box" v-if="scope.row.evacuationAbnormal" :src="scope.row.evacuationAbnormal" @click="lookImgButton(scope.row.evacuationAbnormal)">
|
|
|
+ <p v-else>未上传</p>
|
|
|
+ </template>
|
|
|
+ </el-table-column>
|
|
|
+ <el-table-column label="小程序正常图标" align="center" prop="smallProgramNormal" show-overflow-tooltip width="120">
|
|
|
+ <template slot-scope="scope">
|
|
|
+ <img class="icon-img-box" v-if="scope.row.smallProgramNormal" :src="scope.row.smallProgramNormal" @click="lookImgButton(scope.row.smallProgramNormal)">
|
|
|
+ <p v-else>未上传</p>
|
|
|
+ </template>
|
|
|
+ </el-table-column>
|
|
|
+ <el-table-column label="小程序异常图标" align="center" prop="smallProgramAbnormal" show-overflow-tooltip width="120">
|
|
|
+ <template slot-scope="scope">
|
|
|
+ <img class="icon-img-box" v-if="scope.row.smallProgramAbnormal" :src="scope.row.smallProgramAbnormal" @click="lookImgButton(scope.row.smallProgramAbnormal)">
|
|
|
+ <p v-else>未上传</p>
|
|
|
+ </template>
|
|
|
+ </el-table-column>
|
|
|
+ <el-table-column label="操作" align="center" width="170">
|
|
|
+ <template slot-scope="scope">
|
|
|
+ <div class="table-button-box">
|
|
|
+ <p class="table-button-null"></p>
|
|
|
+ <p class="table-button-p" @click="tableButton(2,scope.row)">编辑</p>
|
|
|
+ <p class="table-button-p" @click="tableButton(3,scope.row)">删除</p>
|
|
|
+ <p class="table-button-null"></p>
|
|
|
+ </div>
|
|
|
+ </template>
|
|
|
+ </el-table-column>
|
|
|
+ </el-table>
|
|
|
+ <pagination :page-sizes="[20, 30, 40, 50]"
|
|
|
+ v-show="total>0"
|
|
|
+ :total="total"
|
|
|
+ :page.sync="queryParams.page"
|
|
|
+ :limit.sync="queryParams.pageSize"
|
|
|
+ @pagination="getList"/>
|
|
|
+ </div>
|
|
|
+ <!--新增编辑dialog-->
|
|
|
+ <el-dialog class="sensorConfiguration-dialog" :title="dialogTitle"
|
|
|
+ :visible.sync="dialogType" v-if="dialogType" width="600px"
|
|
|
+ append-to-body :close-on-click-modal="false">
|
|
|
+ <el-form ref="dialogForm" :model="dialogForm" :rules="dialogRules" label-width="90px">
|
|
|
+ <el-form-item label="名称" prop="name">
|
|
|
+ <el-input v-model="dialogForm.name" placeholder="请输入备注" style="width:410px;"/>
|
|
|
+ </el-form-item>
|
|
|
+ <el-form-item label="字符" prop="value">
|
|
|
+ <el-input v-model="dialogForm.value" placeholder="请输入备注" style="width:410px;"/>
|
|
|
+ </el-form-item>
|
|
|
+ <el-form-item label="状态" prop="isStart">
|
|
|
+ <el-radio-group v-model="dialogForm.start" style="margin-top:4px;">
|
|
|
+ <el-radio :label="true" style="margin:0 40px 0 10px;">启用</el-radio>
|
|
|
+ <el-radio :label="false">停用</el-radio>
|
|
|
+ </el-radio-group>
|
|
|
+ </el-form-item>
|
|
|
+ <div class="up-img-box">
|
|
|
+ <el-form-item label="pc端正常图标:" prop="pcNormal" label-width="160px">
|
|
|
+ <el-upload
|
|
|
+ class="certificate-avatar-uploader"
|
|
|
+ :action="uploadImgUrl"
|
|
|
+ :show-file-list="false"
|
|
|
+ accept="image/jpeg,image/gif,image/png"
|
|
|
+ :on-success="(res)=>handleAvatarSuccess(res,'pcNormal')"
|
|
|
+ :headers="headers"
|
|
|
+ :before-upload="beforeAvatarUpload">
|
|
|
+ <img class="up-img" v-if="dialogForm.pcNormal" :src="dialogForm.pcNormal">
|
|
|
+ <i class="el-icon-plus up-i" v-if="!dialogForm.pcNormal"></i>
|
|
|
+ </el-upload>
|
|
|
+ <i v-if="dialogForm.pcNormal" class="el-icon-view look-i" @click="lookImgButton(dialogForm.pcNormal)"
|
|
|
+ style=""></i>
|
|
|
+ </el-form-item>
|
|
|
+ <el-form-item label="pc端正常图标:" prop="pcAbnormal" label-width="180px">
|
|
|
+ <el-upload
|
|
|
+ class="certificate-avatar-uploader"
|
|
|
+ :action="uploadImgUrl"
|
|
|
+ :show-file-list="false"
|
|
|
+ accept="image/jpeg,image/gif,image/png"
|
|
|
+ :on-success="(res)=>handleAvatarSuccess(res,'pcAbnormal')"
|
|
|
+ :headers="headers"
|
|
|
+ :before-upload="beforeAvatarUpload">
|
|
|
+ <img class="up-img" v-if="dialogForm.pcAbnormal" :src="dialogForm.pcAbnormal">
|
|
|
+ <i class="el-icon-plus up-i" v-if="!dialogForm.pcAbnormal"></i>
|
|
|
+ </el-upload>
|
|
|
+ <i v-if="dialogForm.pcAbnormal" class="el-icon-view look-i" @click="lookImgButton(dialogForm.pcAbnormal)"
|
|
|
+ style=""></i>
|
|
|
+ </el-form-item>
|
|
|
+ </div>
|
|
|
+ <div class="up-img-box">
|
|
|
+ <el-form-item label="疏散正常图标:" prop="evacuationNormal" label-width="160px">
|
|
|
+ <el-upload
|
|
|
+ class="certificate-avatar-uploader"
|
|
|
+ :action="uploadImgUrl"
|
|
|
+ :show-file-list="false"
|
|
|
+ accept="image/jpeg,image/gif,image/png"
|
|
|
+ :on-success="(res)=>handleAvatarSuccess(res,'evacuationNormal')"
|
|
|
+ :headers="headers"
|
|
|
+ :before-upload="beforeAvatarUpload">
|
|
|
+ <img class="up-img" v-if="dialogForm.evacuationNormal" :src="dialogForm.evacuationNormal">
|
|
|
+ <i class="el-icon-plus up-i" v-if="!dialogForm.evacuationNormal"></i>
|
|
|
+ </el-upload>
|
|
|
+ <i v-if="dialogForm.evacuationNormal" class="el-icon-view look-i" @click="lookImgButton(dialogForm.evacuationNormal)"
|
|
|
+ style=""></i>
|
|
|
+ </el-form-item>
|
|
|
+ <el-form-item label="疏散正常图标:" prop="evacuationAbnormal" label-width="180px">
|
|
|
+ <el-upload
|
|
|
+ class="certificate-avatar-uploader"
|
|
|
+ :action="uploadImgUrl"
|
|
|
+ :show-file-list="false"
|
|
|
+ accept="image/jpeg,image/gif,image/png"
|
|
|
+ :on-success="(res)=>handleAvatarSuccess(res,'evacuationAbnormal')"
|
|
|
+ :headers="headers"
|
|
|
+ :before-upload="beforeAvatarUpload">
|
|
|
+ <img class="up-img" v-if="dialogForm.evacuationAbnormal" :src="dialogForm.evacuationAbnormal">
|
|
|
+ <i class="el-icon-plus up-i" v-if="!dialogForm.evacuationAbnormal"></i>
|
|
|
+ </el-upload>
|
|
|
+ <i v-if="dialogForm.evacuationAbnormal" class="el-icon-view look-i" @click="lookImgButton(dialogForm.evacuationAbnormal)"
|
|
|
+ style=""></i>
|
|
|
+ </el-form-item>
|
|
|
+ </div>
|
|
|
+ <div class="up-img-box">
|
|
|
+ <el-form-item label="小程序正常图标:" prop="smallProgramNormal" label-width="160px">
|
|
|
+ <el-upload
|
|
|
+ class="certificate-avatar-uploader"
|
|
|
+ :action="uploadImgUrl"
|
|
|
+ :show-file-list="false"
|
|
|
+ accept="image/jpeg,image/gif,image/png"
|
|
|
+ :on-success="(res)=>handleAvatarSuccess(res,'smallProgramNormal')"
|
|
|
+ :headers="headers"
|
|
|
+ :before-upload="beforeAvatarUpload">
|
|
|
+ <img class="up-img" v-if="dialogForm.smallProgramNormal" :src="dialogForm.smallProgramNormal">
|
|
|
+ <i class="el-icon-plus up-i" v-if="!dialogForm.smallProgramNormal"></i>
|
|
|
+ </el-upload>
|
|
|
+ <i v-if="dialogForm.smallProgramNormal" class="el-icon-view look-i" @click="lookImgButton(dialogForm.smallProgramNormal)"
|
|
|
+ style=""></i>
|
|
|
+ </el-form-item>
|
|
|
+ <el-form-item label="小程序正常图标:" prop="smallProgramAbnormal" label-width="180px">
|
|
|
+ <el-upload
|
|
|
+ class="certificate-avatar-uploader"
|
|
|
+ :action="uploadImgUrl"
|
|
|
+ :show-file-list="false"
|
|
|
+ accept="image/jpeg,image/gif,image/png"
|
|
|
+ :on-success="(res)=>handleAvatarSuccess(res,'smallProgramAbnormal')"
|
|
|
+ :headers="headers"
|
|
|
+ :before-upload="beforeAvatarUpload">
|
|
|
+ <img class="up-img" v-if="dialogForm.smallProgramAbnormal" :src="dialogForm.smallProgramAbnormal">
|
|
|
+ <i class="el-icon-plus up-i" v-if="!dialogForm.smallProgramAbnormal"></i>
|
|
|
+ </el-upload>
|
|
|
+ <i v-if="dialogForm.smallProgramAbnormal" class="el-icon-view look-i" @click="lookImgButton(dialogForm.smallProgramAbnormal)"
|
|
|
+ style=""></i>
|
|
|
+ </el-form-item>
|
|
|
+ </div>
|
|
|
+ </el-form>
|
|
|
+ <div slot="footer" class="dialog-footer">
|
|
|
+ <el-button @click="dialogCancel">取 消</el-button>
|
|
|
+ <el-button type="primary" @click="dialogSubmit">确 定</el-button>
|
|
|
+ </div>
|
|
|
+ </el-dialog>
|
|
|
+ <!--单张图片预览-->
|
|
|
+ <lookSingleImgDialog ref="lookSingleImgDialog"></lookSingleImgDialog>
|
|
|
+ </div>
|
|
|
+</template>
|
|
|
+
|
|
|
+<script>
|
|
|
+ import { getToken } from "@/utils/auth";
|
|
|
+ import lookSingleImgDialog from '@/components/lookSingleImgDialog/lookSingleImgDialog.vue'
|
|
|
+ export default {
|
|
|
+ name: 'index',
|
|
|
+ components: {
|
|
|
+ lookSingleImgDialog,
|
|
|
+ },
|
|
|
+ data(){
|
|
|
+ return{
|
|
|
+ uploadImgUrl: this.uploadUrl(), // 上传的图片服务器地址
|
|
|
+ headers: {
|
|
|
+ Authorization:getToken(),
|
|
|
+ },
|
|
|
+ loading:false,
|
|
|
+ optionList:[{label:'启用',value:true},{label:'停用',value:false}],
|
|
|
+ queryParams:{
|
|
|
+ page:1,
|
|
|
+ pageSize:20,
|
|
|
+ category:"",
|
|
|
+ fileName:"",
|
|
|
+ },
|
|
|
+ dataList:[],
|
|
|
+ total:0,
|
|
|
+ //dialog
|
|
|
+ dialogTitle:"",
|
|
|
+ dialogType:false,
|
|
|
+ dialogForm:{},
|
|
|
+ dialogRules:{
|
|
|
+ demo: [
|
|
|
+ { required: true, message: "学校名称不能为空", trigger: "blur" },
|
|
|
+ { required: true, message: "学校名称不能为空", validator: this.spaceJudgment, trigger: "blur" }
|
|
|
+ ],
|
|
|
+ pcNormal: [
|
|
|
+ { required: true, message: "请上传图标", trigger: "blur" },
|
|
|
+ ],
|
|
|
+ pcAbnormal: [
|
|
|
+ { required: true, message: "请上传图标", trigger: "blur" },
|
|
|
+ ],
|
|
|
+ evacuationNormal: [
|
|
|
+ { required: true, message: "请上传图标", trigger: "blur" },
|
|
|
+ ],
|
|
|
+ evacuationAbnormal: [
|
|
|
+ { required: true, message: "请上传图标", trigger: "blur" },
|
|
|
+ ],
|
|
|
+ smallProgramNormal: [
|
|
|
+ { required: true, message: "请上传图标", trigger: "blur" },
|
|
|
+ ],
|
|
|
+ smallProgramAbnormal: [
|
|
|
+ { required: true, message: "请上传图标", trigger: "blur" },
|
|
|
+ ],
|
|
|
+ }
|
|
|
+ }
|
|
|
+ },
|
|
|
+ created(){
|
|
|
+
|
|
|
+ },
|
|
|
+ mounted(){
|
|
|
+
|
|
|
+ },
|
|
|
+ methods:{
|
|
|
+ //查询
|
|
|
+ handleQuery(){
|
|
|
+ this.$set(this.queryParams,'page',1);
|
|
|
+ this.getList();
|
|
|
+ },
|
|
|
+ //重置
|
|
|
+ resetQuery(){
|
|
|
+ this.$set(this,'dateRange',[])
|
|
|
+ this.$set(this,'queryParams',{
|
|
|
+ page:1,
|
|
|
+ pageSize:20,
|
|
|
+ category:"",
|
|
|
+ fileName:"",
|
|
|
+ });
|
|
|
+ this.getList();
|
|
|
+ },
|
|
|
+ //获取数据列表
|
|
|
+ getList(){
|
|
|
+ this.$set(this,'loading',true);
|
|
|
+ let obj = JSON.parse(JSON.stringify(this.queryParams))
|
|
|
+ if(this.dateRange[0]){
|
|
|
+ obj.startTime = this.dateRange[0]+'T00:00:00'
|
|
|
+ obj.endTime = this.dateRange[1]+'T23:59:59'
|
|
|
+ }else{
|
|
|
+ obj.startTime = "";
|
|
|
+ obj.endTime = "";
|
|
|
+ }
|
|
|
+ getFileList(obj).then(response => {
|
|
|
+ this.$set(this,'loading',false);
|
|
|
+ this.$set(this,'tableList',response.data.records);
|
|
|
+ this.$set(this,'total',response.data.total);
|
|
|
+ });
|
|
|
+ },
|
|
|
+ lookImgButton(url){
|
|
|
+ if(url){
|
|
|
+ this.$refs.lookSingleImgDialog.lookImgDialogOpen(1,url,'预览');
|
|
|
+ }
|
|
|
+ },
|
|
|
+ //table操作按钮
|
|
|
+ tableButton(type,row){
|
|
|
+ let self = this;
|
|
|
+ if(type == 1){
|
|
|
+ //新增
|
|
|
+ this.resetForm();
|
|
|
+ this.$set(this,'dialogTitle','新增');
|
|
|
+ this.$set(this,'dialogType',true);
|
|
|
+ }else if(type == 2){
|
|
|
+ //编辑
|
|
|
+ this.resetForm();
|
|
|
+ this.$set(this,'dialogTitle','编辑');
|
|
|
+ this.$set(this,'dialogType',true);
|
|
|
+ this.$set(this,'dialogForm',row);
|
|
|
+ }else if(type == 3){
|
|
|
+ //删除
|
|
|
+ this.$confirm('是否确认删除?', "警告", {
|
|
|
+ confirmButtonText: "确定",
|
|
|
+ cancelButtonText: "取消",
|
|
|
+ type: "warning"
|
|
|
+ }).then(function() {
|
|
|
+ }).then(() => {
|
|
|
+ // appInfoDelete({id:row.id}).then(response => {
|
|
|
+ // self.msgSuccess(response.message)
|
|
|
+ // self.getList();
|
|
|
+ // });
|
|
|
+ }).catch(() => {});
|
|
|
+ }
|
|
|
+ },
|
|
|
+ //重置
|
|
|
+ resetForm() {
|
|
|
+ this.$set(this,'dialogForm',{
|
|
|
+ pcNormal:'121',
|
|
|
+ pcAbnormal:'',
|
|
|
+ evacuationNormal:'',
|
|
|
+ evacuationAbnormal:'',
|
|
|
+ smallProgramNormal:'',
|
|
|
+ smallProgramAbnormal:'',
|
|
|
+ });
|
|
|
+ },
|
|
|
+ //dialog提交
|
|
|
+ dialogSubmit(){
|
|
|
+ this.$refs["dialogForm"].validate(valid => {
|
|
|
+ if (valid) {
|
|
|
+
|
|
|
+ }
|
|
|
+ })
|
|
|
+ },
|
|
|
+ //dialog取消
|
|
|
+ dialogCancel(){
|
|
|
+ this.$set(this,'dialogType',false);
|
|
|
+ },
|
|
|
+ //上传
|
|
|
+ handleAvatarSuccess(res,type) {
|
|
|
+ console.log('res',res)
|
|
|
+ console.log('type',type)
|
|
|
+ if(type == 'pcNormal'){
|
|
|
+ this.$set(this.dialogForm,'pcNormal',res.data.url);
|
|
|
+ }else if(type == 'pcAbnormal'){
|
|
|
+ this.$set(this.dialogForm,'pcAbnormal',res.data.url);
|
|
|
+ }else if(type == 'evacuationNormal'){
|
|
|
+ this.$set(this.dialogForm,'evacuationNormal',res.data.url);
|
|
|
+ }else if(type == 'evacuationAbnormal'){
|
|
|
+ this.$set(this.dialogForm,'evacuationAbnormal',res.data.url);
|
|
|
+ }else if(type == 'smallProgramNormal'){
|
|
|
+ this.$set(this.dialogForm,'smallProgramNormal',res.data.url);
|
|
|
+ }else if(type == 'smallProgramAbnormal'){
|
|
|
+ this.$set(this.dialogForm,'smallProgramAbnormal',res.data.url);
|
|
|
+ }
|
|
|
+ this.$forceUpdate()
|
|
|
+ },
|
|
|
+ beforeAvatarUpload(file) {
|
|
|
+ let type = false;
|
|
|
+ console.log('file',file);
|
|
|
+ if (file.type == 'image/png' || file.type == 'image/jpeg' || file.type == 'image/gif') {
|
|
|
+ type = true;
|
|
|
+ }else{
|
|
|
+ this.$message.error('只能上传png/jpeg/gif格式图片');
|
|
|
+ type = false;
|
|
|
+ }
|
|
|
+ return type;
|
|
|
+ },
|
|
|
+ },
|
|
|
+ }
|
|
|
+</script>
|
|
|
+
|
|
|
+<style scoped lang="scss">
|
|
|
+.sensorConfiguration{
|
|
|
+ .title-box{
|
|
|
+ padding-top:20px;
|
|
|
+ border-bottom:1px solid #dedede;
|
|
|
+ .form-box{
|
|
|
+ flex:1;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ .content-box{
|
|
|
+ flex: 1;
|
|
|
+ display: flex;
|
|
|
+ flex-direction: column;
|
|
|
+ padding:20px;
|
|
|
+ overflow: hidden;
|
|
|
+ ::v-deep .el-table .icon-img-box{
|
|
|
+ width:23px;
|
|
|
+ height:23px;
|
|
|
+ display: block;
|
|
|
+ margin:auto;
|
|
|
+ cursor: pointer;
|
|
|
+ }
|
|
|
+ }
|
|
|
+}
|
|
|
+</style>
|
|
|
+<style lang="scss">
|
|
|
+ .sensorConfiguration-dialog{
|
|
|
+ .certificate-avatar-uploader{
|
|
|
+ height:80px;
|
|
|
+ overflow: hidden;
|
|
|
+ }
|
|
|
+ .up-img-box{
|
|
|
+ height:100px;
|
|
|
+ display: flex;
|
|
|
+ overflow: hidden;
|
|
|
+ .up-img{
|
|
|
+ height:80px;
|
|
|
+ width:80px;
|
|
|
+ border:1px solid #e0e0e0;
|
|
|
+ border-radius:4px;
|
|
|
+ overflow: hidden;
|
|
|
+ }
|
|
|
+ .up-i{
|
|
|
+
|
|
|
+ }
|
|
|
+ .look-i{
|
|
|
+ position: absolute;
|
|
|
+ top:0;
|
|
|
+ right:0;
|
|
|
+ z-index:999;
|
|
|
+ border-radius:3px;
|
|
|
+ cursor:pointer;
|
|
|
+ width:20px;
|
|
|
+ height:20px;
|
|
|
+ line-height:20px;
|
|
|
+ text-align: center;
|
|
|
+ background: rgba(0,0,0,0.2);
|
|
|
+ color:#fff;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+</style>
|