|
|
@@ -0,0 +1,581 @@
|
|
|
+<template>
|
|
|
+ <view class="content-box">
|
|
|
+ <view class="info-box">
|
|
|
+ <view class="img-container">
|
|
|
+ <label for="img">上传文件</label>
|
|
|
+ <view class="note-image-box">
|
|
|
+ <view class="note-image-item" v-for="(item,index) in uploadList" :key="index">
|
|
|
+ <!-- //右上角删除图标 -->
|
|
|
+ <view class="close-icon" @click="delFile(index)">
|
|
|
+ <uni-icons type="closeempty" size="18" color="#fff"></uni-icons>
|
|
|
+ </view>
|
|
|
+ <view class="image-box display-around-column" @click="openFile(item.url)">
|
|
|
+ <image src="../../../static/file.png" mode="aspectFill" style="width: 90rpx;height: 70rpx;"></image>
|
|
|
+ <view class="margin-top-3">{{item.name}}</view>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ <view v-if="uploadList.length < 3" class="note-image-item" @click="chooseFile()">
|
|
|
+ <!-- //添加图片按钮 -->
|
|
|
+ <view class="image-box">
|
|
|
+ <uni-icons type="plusempty" size="50" color="#eee"></uni-icons>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+
|
|
|
+ <view class="info-box">
|
|
|
+ <view class="info-title-box">
|
|
|
+ <!-- <image src="/static/require-icon.png" mode="aspectFill"></image> -->
|
|
|
+ <text>文件备注</text>
|
|
|
+ </view>
|
|
|
+ <view class="info-value-box">
|
|
|
+ <textarea type="text" class="textarea-box" v-model="contentDesc"></textarea>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+
|
|
|
+ <view class="footer-box">
|
|
|
+ <!-- <button type="primary" class="submit-bth" style="background-color: #aaaaaa;" @click="goStep()">清空</button> -->
|
|
|
+ <button type="primary" class="submit-bth" style="background-color: #169bd5;" @click="addOrEditActiveFiles()">提交</button>
|
|
|
+ </view>
|
|
|
+<!-- <view class="mask-share-box" v-if="isShowShare">
|
|
|
+ <image src="/static/share-arrow.png" mode="aspectFit"></image>
|
|
|
+ <view>点击右上角分享</view>
|
|
|
+ <button @click="closeShare">关闭</button>
|
|
|
+ </view> -->
|
|
|
+ <!-- <share-modal @closeShare="closeShare" :isShowShare="isShowShareModal"></share-modal> -->
|
|
|
+ </view>
|
|
|
+</template>
|
|
|
+
|
|
|
+<script>
|
|
|
+ import md5 from "@/common/md5.js";
|
|
|
+ import shareModal from '@/components/share-modal/share-modal.vue'
|
|
|
+ // var graceChecker = require("../../../common/graceChecker.js");
|
|
|
+ export default {
|
|
|
+ components: {
|
|
|
+ "share-modal": shareModal,
|
|
|
+ },
|
|
|
+ data() {
|
|
|
+ return {
|
|
|
+ globalUrl:getApp().globalData.shareUrl,
|
|
|
+ branchId:'',
|
|
|
+ activeId:'',
|
|
|
+ recordId:'',
|
|
|
+ recordObj:{},
|
|
|
+ fileIdList: [],
|
|
|
+ uploadList:[],
|
|
|
+ contentDesc:'',
|
|
|
+ contentLink:'',
|
|
|
+ type:'add',
|
|
|
+ isShowShareModal:false,
|
|
|
+ }
|
|
|
+ },
|
|
|
+ onLoad(option) {
|
|
|
+ console.log(option)
|
|
|
+ this.branchId = option.bId;
|
|
|
+ this.activeId = option.aId;
|
|
|
+ this.type = option.types;
|
|
|
+ if(option.types === 'edit'){
|
|
|
+ this.getInfos(option.id)
|
|
|
+ }
|
|
|
+ },
|
|
|
+ onShow() {
|
|
|
+ },
|
|
|
+ onShareAppMessage() {
|
|
|
+ return {
|
|
|
+ title: '农工笔记',
|
|
|
+ path:'/pages/index/activity/activity'
|
|
|
+ }
|
|
|
+ },
|
|
|
+ methods: {
|
|
|
+ closeShare(e){
|
|
|
+ this.isShowShareModal = false;
|
|
|
+ uni.showToast({
|
|
|
+ title: "上传成功",
|
|
|
+ icon: "none",
|
|
|
+ duration: 2500,
|
|
|
+ });
|
|
|
+ setTimeout(()=>{uni.navigateBack({})},500)
|
|
|
+ },
|
|
|
+ getInfos(id){
|
|
|
+ let md5Sign = md5(
|
|
|
+ "method=" +"activity" + "×tamp=" + getApp().globalData.globalTimestamp +
|
|
|
+ "&secret=" + getApp().globalData.secret
|
|
|
+ );
|
|
|
+ let url = getApp().globalData.shareUrl +"api/api.php" +"?method=activity&action=files_info_by_id×tamp=" +
|
|
|
+ getApp().globalData.globalTimestamp + "&sign=" + md5Sign;
|
|
|
+ uni.request({
|
|
|
+ url: url,
|
|
|
+ method: "POST",
|
|
|
+ header: {
|
|
|
+ "content-type": "application/x-www-form-urlencoded",
|
|
|
+ },
|
|
|
+ data: {
|
|
|
+ openid:getApp().globalData.open_id,
|
|
|
+ id:id
|
|
|
+ },
|
|
|
+ success: (res) => {
|
|
|
+ if (res.data.code === 200) {
|
|
|
+ let obj = res.data.data;
|
|
|
+ // this.recordId = obj.id;
|
|
|
+ // this.contentDesc = obj.content;
|
|
|
+ // this.contentLink = obj.web_url;
|
|
|
+ // this.uploadList = obj.pic_list.map((item)=>{return this.globalUrl + item.pic_url});
|
|
|
+ // this.imgIdList = obj.pic_list.map((item)=>{return item.pic_id})
|
|
|
+ }
|
|
|
+ },
|
|
|
+ fail: () => {
|
|
|
+ console.log("连接失败");
|
|
|
+ },
|
|
|
+ });
|
|
|
+ },
|
|
|
+ addOrEditActiveFiles(){
|
|
|
+ let url,data;
|
|
|
+ let md5Sign = md5(
|
|
|
+ "method=" +"activity" + "×tamp=" + getApp().globalData.globalTimestamp +
|
|
|
+ "&secret=" + getApp().globalData.secret
|
|
|
+ );
|
|
|
+ if(this.type === 'add'){
|
|
|
+ url = getApp().globalData.shareUrl +"api/api.php" +"?method=activity&action=files_add×tamp=" +
|
|
|
+ getApp().globalData.globalTimestamp + "&sign=" + md5Sign;
|
|
|
+ data = {
|
|
|
+ openid:getApp().globalData.open_id,
|
|
|
+ branch_id:this.branchId,
|
|
|
+ activity_id:this.activeId,
|
|
|
+ content:this.contentDesc,
|
|
|
+ attach_ids:this.fileIdList.join()
|
|
|
+ }
|
|
|
+ }else {
|
|
|
+ url = getApp().globalData.shareUrl +"api/api.php" +"?method=activity&action=files_update×tamp=" +
|
|
|
+ getApp().globalData.globalTimestamp + "&sign=" + md5Sign;
|
|
|
+ data = {
|
|
|
+ openid:getApp().globalData.open_id,
|
|
|
+ id:this.recordId,
|
|
|
+ branch_id:this.branchId,
|
|
|
+ activity_id:this.activeId,
|
|
|
+ content:this.contentDesc,
|
|
|
+ attach_ids:this.fileIdList.join()
|
|
|
+ }
|
|
|
+ }
|
|
|
+ uni.request({
|
|
|
+ url: url,
|
|
|
+ method: "POST",
|
|
|
+ header: {
|
|
|
+ "content-type": "application/x-www-form-urlencoded",
|
|
|
+ },
|
|
|
+ data:data,
|
|
|
+ success: (res) => {
|
|
|
+ if (res.data.code === 200) {
|
|
|
+ if(this.type === 'edit'){
|
|
|
+ uni.showToast({
|
|
|
+ title: "修改成功",
|
|
|
+ icon: "none",
|
|
|
+ duration: 2500,
|
|
|
+ });
|
|
|
+ setTimeout(()=>{uni.navigateBack({})},500)
|
|
|
+ }else {
|
|
|
+ let types = 'add';
|
|
|
+ let pages = getCurrentPages(); // 获取当前页面栈的实例，以数组形式按栈的顺序给出，第一个元素为首页，最后一个元素为当前页面。
|
|
|
+ let nowPage = pages[pages.length - 1]; //当前页页面实例
|
|
|
+ let prevPage = pages[pages.length - 2]; //上一页页面实例
|
|
|
+ prevPage.$vm.pageShowShare(types)
|
|
|
+ uni.showToast({
|
|
|
+ title: "上传成功",
|
|
|
+ icon: "none",
|
|
|
+ duration: 2500,
|
|
|
+ });
|
|
|
+ setTimeout(()=>{uni.navigateBack({delta:1})},500)
|
|
|
+ //this.isShowShareModal = true
|
|
|
+ }
|
|
|
+ }
|
|
|
+ },
|
|
|
+ fail: () => {
|
|
|
+ console.log("连接失败");
|
|
|
+ },
|
|
|
+ });
|
|
|
+ },
|
|
|
+ openFile(files){
|
|
|
+ console.log(files)
|
|
|
+ uni.downloadFile({
|
|
|
+ url: files,
|
|
|
+ success: function(res) {
|
|
|
+ var filePath = res.tempFilePath;
|
|
|
+ //打开文件有效值 doc, xls, ppt, pdf, docx, xlsx, pptx
|
|
|
+ uni.openDocument({
|
|
|
+ filePath:filePath,
|
|
|
+ success: function(res) {
|
|
|
+ console.log(res)
|
|
|
+ //that.downloadFile_onoff = true;
|
|
|
+ },
|
|
|
+ fail(res) {
|
|
|
+ console.log(res)
|
|
|
+ uni.showToast({
|
|
|
+ title: '暂不支持此类型',
|
|
|
+ icon:'none',
|
|
|
+ duration: 2000
|
|
|
+ });
|
|
|
+ //uni.hideLoading();
|
|
|
+ //that.downloadFile_onoff = true;
|
|
|
+ }
|
|
|
+ });
|
|
|
+ }
|
|
|
+ });
|
|
|
+ },
|
|
|
+ chooseFile(){
|
|
|
+ //chooseMessageFile
|
|
|
+ let that = this;
|
|
|
+ uni.chooseMessageFile({
|
|
|
+ count: 3,
|
|
|
+ type: 'file',
|
|
|
+ success (res) {
|
|
|
+ for(let i=0;i<res.tempFiles.length;i++){
|
|
|
+ res.tempFiles[i].size = (res.tempFiles[i].size/1024) ;
|
|
|
+ res.tempFiles[i].size = Math.trunc(res.tempFiles[i].size);
|
|
|
+ let msg = {name:res.tempFiles[i].name,textValue:res.tempFiles[i].path,size:res.tempFiles[i].size};
|
|
|
+ that.uploadFileRequest(msg)
|
|
|
+ }
|
|
|
+ }
|
|
|
+ })
|
|
|
+ console.log('文件上传')
|
|
|
+ },
|
|
|
+ uploadFileRequest(fileVal){
|
|
|
+ let that = this;
|
|
|
+ let md5Sign = md5(
|
|
|
+ "method=" +"activity_file_upload" +"×tamp=" +
|
|
|
+ getApp().globalData.globalTimestamp +"&secret=" +getApp().globalData.secret
|
|
|
+ );
|
|
|
+ let url = getApp().globalData.shareUrl + "api/api.php" +"?method=activity_file_upload×tamp=" +
|
|
|
+ getApp().globalData.globalTimestamp +"&sign=" + md5Sign;
|
|
|
+ uni.uploadFile({
|
|
|
+ url:url, //需要设置为全局
|
|
|
+ filePath:fileVal.textValue,
|
|
|
+ name:'file',
|
|
|
+ formData: {
|
|
|
+ openid: getApp().globalData.open_id,
|
|
|
+ file:fileVal.textValue,
|
|
|
+ branch_id:this.branchId,
|
|
|
+ file_name:fileVal.name
|
|
|
+ },
|
|
|
+ success: res => {
|
|
|
+ this.fileObj = JSON.parse(res.data);
|
|
|
+ console.log(this.fileObj.data)
|
|
|
+ this.fileObj.data.url = getApp().globalData.shareUrl + this.fileObj.data.url;
|
|
|
+ this.uploadList.push(this.fileObj.data);
|
|
|
+ this.fileIdList.push(this.fileObj.data.id);
|
|
|
+ },
|
|
|
+ fail:res=>{
|
|
|
+ console.log("上传请求失败");
|
|
|
+ console.log(res);
|
|
|
+ }
|
|
|
+ });
|
|
|
+ },
|
|
|
+ delFile(idx) {
|
|
|
+ this.uploadList.splice(idx, 1);
|
|
|
+ this.fileIdList.splice(idx, 1);
|
|
|
+ },
|
|
|
+ }
|
|
|
+ }
|
|
|
+</script>
|
|
|
+
|
|
|
+<style lang="scss" scoped>
|
|
|
+ .content {
|
|
|
+ &_list{
|
|
|
+ display: flex;
|
|
|
+ flex-direction: row;
|
|
|
+ align-items: center;
|
|
|
+ justify-content:space-around;
|
|
|
+ &_lable{
|
|
|
+
|
|
|
+ }
|
|
|
+ &_content{
|
|
|
+ flex: 1;
|
|
|
+ width: auto;
|
|
|
+ text-align: right;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ .content-box {
|
|
|
+ width: 100%;
|
|
|
+ /* height: 100%; */
|
|
|
+ display: flex;
|
|
|
+ flex-direction: column;
|
|
|
+ align-items: center;
|
|
|
+ /* justify-content: center; */
|
|
|
+ }
|
|
|
+ .header-box {
|
|
|
+ width: 85%;
|
|
|
+ height:80rpx;
|
|
|
+ border: .5px dotted #00A1B4;
|
|
|
+ border-radius: 50rpx;
|
|
|
+ display: flex;
|
|
|
+ justify-content: center;
|
|
|
+ align-items: center;
|
|
|
+ font-size: 24rpx;
|
|
|
+ color:#00A1B4 ;
|
|
|
+ /* font-family: PingFangSC-Regular; */
|
|
|
+ margin-top: 2%;
|
|
|
+ }
|
|
|
+ .header-box image {
|
|
|
+ width: 36rpx;
|
|
|
+ height: 36rpx;
|
|
|
+ margin-right: 1%;
|
|
|
+ }
|
|
|
+ .self-title-box {
|
|
|
+ width: 90%;
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ font-size: 32rpx;
|
|
|
+ letter-spacing: 2rpx;
|
|
|
+ color:#3C3C3C ;
|
|
|
+ /* font-family: SimHei; */
|
|
|
+ margin: 4% auto;
|
|
|
+ font-weight: bold;
|
|
|
+ height: 50rpx;
|
|
|
+ line-height: 50rpx;
|
|
|
+
|
|
|
+ }
|
|
|
+ .self-title-box image {
|
|
|
+ width: 6rpx;
|
|
|
+ height: 32rpx;
|
|
|
+ margin-right: 2%;
|
|
|
+ }
|
|
|
+ .info-box {
|
|
|
+ width: 90%;
|
|
|
+ margin: 3% auto;
|
|
|
+ display: flex;
|
|
|
+ flex-direction: column;
|
|
|
+ // align-items: center;
|
|
|
+ // height: 180rpx;
|
|
|
+ }
|
|
|
+ .info-title-box {
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ font-size: 28rpx;
|
|
|
+ }
|
|
|
+ .info-title-box image{
|
|
|
+ width: 15rpx;
|
|
|
+ height: 15rpx;
|
|
|
+ margin-right: 2%;
|
|
|
+ }
|
|
|
+ .info-value-box {
|
|
|
+ width: 100%;
|
|
|
+ }
|
|
|
+ .info-value-box input {
|
|
|
+ height: 88rpx;
|
|
|
+ background: #f7f7f7;
|
|
|
+ font-size: 26rpx;
|
|
|
+ padding-left: 4%;
|
|
|
+ margin: 2% auto;
|
|
|
+ }
|
|
|
+ .info-value-box picker {
|
|
|
+ position: relative;
|
|
|
+ }
|
|
|
+ .info-value-box picker image {
|
|
|
+ position: absolute;
|
|
|
+ width: 25rpx;
|
|
|
+ height: 25rpx;
|
|
|
+ right: 10px;
|
|
|
+ top: 30rpx;
|
|
|
+ }
|
|
|
+ .select-box {
|
|
|
+ height: 80rpx;
|
|
|
+ background: #f7f7f7;
|
|
|
+ font-size: 26rpx;
|
|
|
+ padding-left: 4%;
|
|
|
+ margin: 2% auto;
|
|
|
+ color: #888;
|
|
|
+ line-height: 88rpx;
|
|
|
+ }
|
|
|
+ .info-gender-box {
|
|
|
+ width: 75%;
|
|
|
+ font-size: 28rpx;
|
|
|
+ }
|
|
|
+ .form-radio {
|
|
|
+ transform: scale(0.6);
|
|
|
+ }
|
|
|
+ .padding-left-2 {
|
|
|
+ // padding-left: 2%;
|
|
|
+ }
|
|
|
+ .margin-right-10 {
|
|
|
+ margin-right: 10%;
|
|
|
+ }
|
|
|
+ .border-line-box {
|
|
|
+ width: 100%;
|
|
|
+ height: 20rpx;
|
|
|
+ background: #f7f7f7;
|
|
|
+ }
|
|
|
+ .picker-box{
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ justify-content: space-between;
|
|
|
+ height: 60rpx;
|
|
|
+ line-height: 60rpx;
|
|
|
+ background: #f7f7f7;
|
|
|
+ height: 88rpx;
|
|
|
+ line-height: 88rpx;
|
|
|
+ background: #f7f7f7;
|
|
|
+ font-size: 28rpx;
|
|
|
+ padding-left: 4%;
|
|
|
+ }
|
|
|
+ .uni-input image {
|
|
|
+ width: 40rpx;
|
|
|
+ height: 40rpx;
|
|
|
+ margin-right: 2%;
|
|
|
+ float: right;
|
|
|
+ }
|
|
|
+ .textarea-box {
|
|
|
+ background: #f7f7f7;
|
|
|
+ min-height: 120rpx;
|
|
|
+ font-size: 28rpx;
|
|
|
+ margin: 5% auto;
|
|
|
+ padding: 4%;
|
|
|
+ margin-bottom: 8%;
|
|
|
+ }
|
|
|
+ .upload-box {
|
|
|
+ display: flex;
|
|
|
+ flex-flow: column;
|
|
|
+ width: 22%;
|
|
|
+ height: 100rpx;
|
|
|
+ border-radius: 10rpx;
|
|
|
+ padding-top: 15rpx;
|
|
|
+ }
|
|
|
+ image {
|
|
|
+ width: 100rpx;
|
|
|
+ height:100rpx;
|
|
|
+ }
|
|
|
+ .upload-box-photo {
|
|
|
+ width: 25%;
|
|
|
+ height: 100rpx;
|
|
|
+ border-radius: 10rpx;
|
|
|
+ padding-top: 15rpx;
|
|
|
+ position: relative;
|
|
|
+ margin-left: 20rpx;
|
|
|
+ margin-right: 20rpx;
|
|
|
+ }
|
|
|
+ .del-icon {
|
|
|
+ position: absolute;
|
|
|
+ right: -15rpx;
|
|
|
+ width: 30rpx;
|
|
|
+ height: 30rpx;
|
|
|
+ }
|
|
|
+
|
|
|
+ .update_button {
|
|
|
+ text-align: center;
|
|
|
+ display: flex;
|
|
|
+ flex-wrap: wrap;
|
|
|
+ }
|
|
|
+ .picker-class {
|
|
|
+ border-radius: 10rpx;
|
|
|
+ padding: 10rpx;
|
|
|
+ width: 73%;
|
|
|
+ font-size: 28rpx;
|
|
|
+ background: #f5f5f5;
|
|
|
+ }
|
|
|
+ .picker-class image {
|
|
|
+ width: 26rpx;
|
|
|
+ height: 26rpx;
|
|
|
+ }
|
|
|
+ .submit-bth {
|
|
|
+ width: 25%;
|
|
|
+ font-size: 26rpx;
|
|
|
+ margin: 0 0 5% 0;
|
|
|
+ color: #fff;
|
|
|
+ }
|
|
|
+ .select-member {
|
|
|
+ input {
|
|
|
+ margin: 2% 2% 2% 0;
|
|
|
+ height: 80rpx;
|
|
|
+ line-height: 80rpx;
|
|
|
+ }
|
|
|
+ button {
|
|
|
+ background-color: #169bd5;
|
|
|
+ margin: 0;
|
|
|
+ height: 60rpx;
|
|
|
+ line-height: 60rpx;
|
|
|
+ width: 20%;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ .check-class {
|
|
|
+ margin-right:10rpx;
|
|
|
+ transform:scale(.8);
|
|
|
+ width: 48%;
|
|
|
+ margin-top: 2%;
|
|
|
+ }
|
|
|
+ .step-box {
|
|
|
+ display: flex;
|
|
|
+ justify-content: space-evenly;
|
|
|
+ align-items: center;
|
|
|
+ width: 90%;
|
|
|
+ margin: 5% 0 5% 0;
|
|
|
+ }
|
|
|
+ .step-1 {
|
|
|
+ width: 60rpx;
|
|
|
+ height: 60rpx;
|
|
|
+ border-radius: 50%;
|
|
|
+ background-color:#aaaaaa;
|
|
|
+ text-align: center;
|
|
|
+ line-height: 60rpx;
|
|
|
+ color: #fff;
|
|
|
+ }
|
|
|
+ .footer-box {
|
|
|
+ margin-top: 5%;
|
|
|
+ width: 90%;
|
|
|
+ display: flex;
|
|
|
+ justify-content: space-evenly;
|
|
|
+ }
|
|
|
+ .textarea-box {
|
|
|
+ background: #f7f7f7;
|
|
|
+ min-height: 120rpx;
|
|
|
+ font-size: 28rpx;
|
|
|
+ margin: 3% auto;
|
|
|
+ padding: 4%;
|
|
|
+ }
|
|
|
+ .img-container{
|
|
|
+ width: 90%;
|
|
|
+ font-size: 26rpx;
|
|
|
+ .note-image-box{
|
|
|
+ margin-top: 5px;
|
|
|
+ display: flex;
|
|
|
+ flex-wrap: wrap;
|
|
|
+ padding: 10px;
|
|
|
+ .note-image-item{
|
|
|
+ position: relative;
|
|
|
+ //这两个百分比很关键
|
|
|
+ width: 33.33%;
|
|
|
+ height: 0;
|
|
|
+ padding-top: 33.33%;
|
|
|
+ box-sizing: border-box;
|
|
|
+ .close-icon{
|
|
|
+ display: flex;
|
|
|
+ justify-content: center;
|
|
|
+ align-items: center;
|
|
|
+ position: absolute;
|
|
|
+ right: 0;
|
|
|
+ top: 0;
|
|
|
+ width: 22px;
|
|
|
+ height: 22px;
|
|
|
+ border-radius: 50%;
|
|
|
+ background-color: #d5d5d5;
|
|
|
+ z-index: 2;
|
|
|
+ }
|
|
|
+ .image-box{
|
|
|
+ display: flex;
|
|
|
+ justify-content: center;
|
|
|
+ align-items: center;
|
|
|
+ position: absolute;
|
|
|
+ top: 5px;
|
|
|
+ right: 5px;
|
|
|
+ bottom: 5px;
|
|
|
+ left: 5px;
|
|
|
+ border: 1px #eee solid;
|
|
|
+ border-radius: 5px;
|
|
|
+ overflow: hidden;
|
|
|
+ image{
|
|
|
+ width: 100%;
|
|
|
+ height: 100%;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+</style>
|
