|
@@ -0,0 +1,608 @@
|
|
|
+<template>
|
|
|
+ <div class="tasklist">
|
|
|
+
|
|
|
+ <!-- 执行列表 -->
|
|
|
+ <div class="moduler">
|
|
|
+ <span>任务执行状态:</span>
|
|
|
+ <a-select style="width: 200px" v-model="exeState" @change="exeStateChange" placeholder="执行状态">
|
|
|
+ <a-select-option value="" >
|
|
|
+ 不限
|
|
|
+ </a-select-option>
|
|
|
+ <a-select-option :value="1" >
|
|
|
+ 开始
|
|
|
+ </a-select-option>
|
|
|
+ <a-select-option :value="0" >
|
|
|
+ 暂停
|
|
|
+ </a-select-option>
|
|
|
+ </a-select>
|
|
|
+
|
|
|
+ </div>
|
|
|
+
|
|
|
+ <div class="moduler">
|
|
|
+ <!-- :rowSelection="{selectedRowKeys: selectedRowKeys,...rowSelection}" -->
|
|
|
+ <div class="tableOpt">
|
|
|
+ <a-button type='primary' @click="addTask">新增任务</a-button>
|
|
|
+ </div>
|
|
|
+ <div class="table">
|
|
|
+ <a-table
|
|
|
+ :columns="columns"
|
|
|
+ :data-source="tableData"
|
|
|
+ bordered
|
|
|
+ :pagination="ipagination"
|
|
|
+ :loading="loading"
|
|
|
+ @change="sort"
|
|
|
+ size='middle'
|
|
|
+ >
|
|
|
+
|
|
|
+ <span slot="options" slot-scope="text,record">
|
|
|
+ <a href="javascript:;" style="margin-right:10px" @click="editItem(record)">编辑</a>
|
|
|
+ <a-popconfirm
|
|
|
+ title="确定删除该任务?"
|
|
|
+ ok-text="确定"
|
|
|
+ cancel-text="取消"
|
|
|
+ @confirm="deleteItem(record)"
|
|
|
+
|
|
|
+ >
|
|
|
+ <a href="javascript:;">删除</a>
|
|
|
+ </a-popconfirm>
|
|
|
+
|
|
|
+ </span>
|
|
|
+
|
|
|
+ <span slot="exeState" slot-scope="text,record">
|
|
|
+ <a-spin :spinning="record.spin" size="small" >
|
|
|
+ <div class="spin-content">
|
|
|
+ <a-switch size="default" :checked=text @change="switchChange(text,record)"/>
|
|
|
+ </div>
|
|
|
+ </a-spin>
|
|
|
+ <!-- <a-switch size="default" :checked=text @change="switchChange(text,record)"/> -->
|
|
|
+ </span>
|
|
|
+ <span slot="mediaType" slot-scope='text'>
|
|
|
+ <span v-if="text==1">头条</span>
|
|
|
+ <span v-if="text==2">快手</span>
|
|
|
+ </span>
|
|
|
+ </a-table>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+
|
|
|
+
|
|
|
+ <!-- 新建任务的模态框 -->
|
|
|
+ <a-modal v-model="visible" :title="modalTitle" @ok="handleOk" width='1200px' :maskClosable='false' :keyboard='false' :confirm-loading="confirmLoading">
|
|
|
+ <div class="newTask">
|
|
|
+ <a-form :form="form">
|
|
|
+ <div class="moduler">
|
|
|
+ <div class="row-item">
|
|
|
+ <div class="hint-item"></div>
|
|
|
+ <div class="label-item">
|
|
|
+ <div class="text-item">名称</div>
|
|
|
+ <div class="required-item"></div>
|
|
|
+ </div>
|
|
|
+ <div class="input-item">
|
|
|
+ <a-form-item >
|
|
|
+ <a-input v-decorator="['name', {rules:validationRules.name}]" />
|
|
|
+ </a-form-item>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <div class="row-item">
|
|
|
+ <div class="hint-item"></div>
|
|
|
+ <div class="label-item">
|
|
|
+ <div class="text-item">描述</div>
|
|
|
+ <div class="required-item"></div>
|
|
|
+ </div>
|
|
|
+ <div class="input-item">
|
|
|
+ <a-form-item >
|
|
|
+ <a-input v-decorator="['comment', {rules:validationRules.name}]" />
|
|
|
+ </a-form-item>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <div class="row-item">
|
|
|
+ <div class="hint-item"></div>
|
|
|
+ <div class="label-item">
|
|
|
+ <div class="text-item">媒体类型</div>
|
|
|
+ <div class="required-item"></div>
|
|
|
+ </div>
|
|
|
+ <div class="input-item">
|
|
|
+ <a-form-item >
|
|
|
+ <a-radio-group v-decorator="['mediaType', { initialValue:1}]">
|
|
|
+ <a-radio-button :value="1">头条</a-radio-button>
|
|
|
+ <a-radio-button :value="2">快手</a-radio-button>
|
|
|
+ </a-radio-group>
|
|
|
+ </a-form-item>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <div class="row-item">
|
|
|
+ <div class="hint-item"></div>
|
|
|
+ <div class="label-item">
|
|
|
+ <div class="text-item">任务组名称</div>
|
|
|
+ <div class="required-item"></div>
|
|
|
+ </div>
|
|
|
+ <div class="input-item">
|
|
|
+ <a-form-item >
|
|
|
+ <a-input v-decorator="['jobName', {rules:validationRules.name}]" />
|
|
|
+ </a-form-item>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <div class="row-item">
|
|
|
+ <div class="hint-item"></div>
|
|
|
+ <div class="label-item">
|
|
|
+ <div class="text-item">包名</div>
|
|
|
+ <div class="required-item"></div>
|
|
|
+ </div>
|
|
|
+ <div class="input-item">
|
|
|
+ <a-form-item >
|
|
|
+ <a-input v-decorator="['packageName', {rules:validationRules.name}]" />
|
|
|
+ </a-form-item>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <div class="row-item">
|
|
|
+ <div class="hint-item"></div>
|
|
|
+ <div class="label-item">
|
|
|
+ <div class="text-item">邮箱</div>
|
|
|
+ <div class="required-item"></div>
|
|
|
+ </div>
|
|
|
+ <div class="input-item">
|
|
|
+ <a-form-item >
|
|
|
+ <a-input v-decorator="['mail', {rules:validationRules.name}]" />
|
|
|
+ </a-form-item>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <div class="row-item">
|
|
|
+ <div class="hint-item"></div>
|
|
|
+ <div class="label-item">
|
|
|
+ <div class="text-item">API_Name</div>
|
|
|
+ <div class="required-item"></div>
|
|
|
+ </div>
|
|
|
+ <div class="input-item">
|
|
|
+ <a-form-item >
|
|
|
+ <a-input v-decorator="['apiName', {rules:validationRules.name}]" />
|
|
|
+ </a-form-item>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <div class="row-item">
|
|
|
+ <div class="hint-item"></div>
|
|
|
+ <div class="label-item">
|
|
|
+ <div class="text-item">执行状态</div>
|
|
|
+ <div class="required-item"></div>
|
|
|
+ </div>
|
|
|
+ <div class="input-item">
|
|
|
+ <a-form-item >
|
|
|
+ <a-radio-group v-decorator="['exeState', { initialValue:1 }]">
|
|
|
+ <a-radio-button :value="1">开启</a-radio-button>
|
|
|
+ <a-radio-button :value="0">暂停</a-radio-button>
|
|
|
+ </a-radio-group>
|
|
|
+ </a-form-item>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <div class="row-item">
|
|
|
+ <div class="hint-item"></div>
|
|
|
+ <div class="label-item">
|
|
|
+ <div class="text-item">脚本</div>
|
|
|
+ <div class="required-item"></div>
|
|
|
+ </div>
|
|
|
+ <div class="input-item">
|
|
|
+ <a-form-item >
|
|
|
+ <a-textarea
|
|
|
+ v-decorator="['script', {rules:validationRules.name}]"
|
|
|
+ placeholder="请输入执行代码"
|
|
|
+ :autoSize="{ minRows: 10}"
|
|
|
+ />
|
|
|
+ </a-form-item>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </a-form>
|
|
|
+ </div>
|
|
|
+ </a-modal>
|
|
|
+ </div>
|
|
|
+</template>
|
|
|
+
|
|
|
+<script>
|
|
|
+import moment from 'moment';
|
|
|
+import { getAction, postAction, downFile, downFilePost } from '@/api/manage';
|
|
|
+import { JeecgListMixin } from '@/mixins/ipagination'
|
|
|
+import qs from 'qs'
|
|
|
+const columns = [
|
|
|
+ {
|
|
|
+ title: '任务状态',
|
|
|
+ dataIndex: 'exeState',
|
|
|
+ key: 'exeState',
|
|
|
+ align: 'center',
|
|
|
+ scopedSlots: { customRender: 'exeState' }
|
|
|
+ },
|
|
|
+ {
|
|
|
+ title: '名字',
|
|
|
+ dataIndex: 'name',
|
|
|
+ key: 'name',
|
|
|
+ align: 'center',
|
|
|
+ scopedSlots: { customRender: 'name' }
|
|
|
+ },
|
|
|
+ {
|
|
|
+ title: 'API_Name',
|
|
|
+ dataIndex: 'apiName',
|
|
|
+ key: 'apiName',
|
|
|
+ align: 'center',
|
|
|
+ scopedSlots: { customRender: 'apiName' }
|
|
|
+ },
|
|
|
+ // {
|
|
|
+ // title: '任务id',
|
|
|
+ // dataIndex: 'id',
|
|
|
+ // key: 'id',
|
|
|
+ // align: 'center',
|
|
|
+ // },
|
|
|
+ {
|
|
|
+ title: '包名',
|
|
|
+ dataIndex: 'packageName',
|
|
|
+ key: 'packageName',
|
|
|
+ align: 'center',
|
|
|
+ },
|
|
|
+
|
|
|
+
|
|
|
+ {
|
|
|
+ title: '邮箱',
|
|
|
+ dataIndex: 'mail',
|
|
|
+ key: 'mail',
|
|
|
+ align: 'center',
|
|
|
+
|
|
|
+ },
|
|
|
+ {
|
|
|
+ title: '媒体类型',
|
|
|
+ dataIndex: 'mediaType',
|
|
|
+ key: 'mediaType',
|
|
|
+ align: 'center',
|
|
|
+ scopedSlots: { customRender: 'mediaType' }
|
|
|
+ },
|
|
|
+ {
|
|
|
+ title: '任务组名称',
|
|
|
+ dataIndex: 'jobName',
|
|
|
+ key: 'jobName',
|
|
|
+ align: 'center',
|
|
|
+ scopedSlots: { customRender: 'jobName' }
|
|
|
+ },
|
|
|
+
|
|
|
+ {
|
|
|
+ title: '操作',
|
|
|
+ dataIndex: 'options',
|
|
|
+ key: 'options',
|
|
|
+ align: 'center',
|
|
|
+ scopedSlots: { customRender: 'options' }
|
|
|
+ },
|
|
|
+];
|
|
|
+ export default {
|
|
|
+ mixins: [JeecgListMixin],
|
|
|
+ data() {
|
|
|
+ return {
|
|
|
+ form: this.$form.createForm(this),
|
|
|
+ exeState:undefined,
|
|
|
+ columns,
|
|
|
+ tableData:[],
|
|
|
+ loading:false,
|
|
|
+ visible:false,
|
|
|
+ confirmLoading: false,
|
|
|
+ modalTitle:'',
|
|
|
+ validationRules: {
|
|
|
+ url: [
|
|
|
+ {
|
|
|
+ required: true,
|
|
|
+ validator: this.validateURL,
|
|
|
+ },
|
|
|
+ ],
|
|
|
+ name:[{
|
|
|
+ required: true,
|
|
|
+ message:'此字段必须填写',
|
|
|
+ }],
|
|
|
+ bid:[{
|
|
|
+ required: true,
|
|
|
+ message:'出价信息必须填写',
|
|
|
+ // validator: this.validateBid,
|
|
|
+ }],
|
|
|
+ roi:[{
|
|
|
+ required: true,
|
|
|
+ message:'ROI系数必须填写',
|
|
|
+ // validator: this.validateBid,
|
|
|
+ }],
|
|
|
+ },
|
|
|
+ currentRecord:{},
|
|
|
+ }
|
|
|
+ },
|
|
|
+ methods: {
|
|
|
+ // 编辑
|
|
|
+ editItem(record){
|
|
|
+ console.log(record)
|
|
|
+ this.currentRecord=record
|
|
|
+ let recordData=JSON.parse(JSON.stringify(record))
|
|
|
+ this.modalTitle='编辑任务'
|
|
|
+ this.visible = true;
|
|
|
+ getAction('/ctop/checkTaskList/queryById',recordData).then(res=>{
|
|
|
+ console.log(res)
|
|
|
+ if(res.success){
|
|
|
+ res.result.exeState=res.result.exeState?1:0;
|
|
|
+ this.form.setFieldsValue({
|
|
|
+ ...res.result
|
|
|
+ })
|
|
|
+ }
|
|
|
+ })
|
|
|
+ },
|
|
|
+ // shanchu
|
|
|
+ deleteItem(record){
|
|
|
+ postAction('/ctop/checkTaskList/delete',qs.stringify({
|
|
|
+ id:record.id
|
|
|
+ })).then(res=>{
|
|
|
+ console.log(res)
|
|
|
+ if(res.success){
|
|
|
+ this.$message.success(res.message);
|
|
|
+ this.tableHttp()
|
|
|
+ }
|
|
|
+ })
|
|
|
+ },
|
|
|
+ // 任务的执行状态
|
|
|
+ exeStateChange(e){
|
|
|
+ console.log(e);
|
|
|
+ this.tableHttp();
|
|
|
+ },
|
|
|
+ //点击分页
|
|
|
+ sort(pagination, filters, sorter, { currentDataSource }){
|
|
|
+
|
|
|
+ this.ipagination.current=pagination.current;
|
|
|
+ // this.search()
|
|
|
+ this.tableHttp()
|
|
|
+ },
|
|
|
+ // 任务状态改变
|
|
|
+ switchChange(text,record){
|
|
|
+ console.log(text,record);
|
|
|
+ record.spin=true;
|
|
|
+ let recordData=JSON.parse(JSON.stringify(record))
|
|
|
+ recordData.exeState=!text;
|
|
|
+ postAction('/ctop/checkTaskList/edit',recordData).then(res=>{
|
|
|
+ console.log(res);
|
|
|
+ record.spin=false;
|
|
|
+ if(res.success){
|
|
|
+ this.$message.success(res.message)
|
|
|
+ this.tableHttp()
|
|
|
+ }else{
|
|
|
+ this.$message.error(res.message)
|
|
|
+ }
|
|
|
+ })
|
|
|
+ },
|
|
|
+
|
|
|
+ addTask(){
|
|
|
+ this.visible = true;
|
|
|
+ this.modalTitle='新增任务';
|
|
|
+ this.form=this.$form.createForm(this)
|
|
|
+ },
|
|
|
+ handleOk(e) {
|
|
|
+ // console.log(e,'---------');
|
|
|
+ this.confirmLoading = true;
|
|
|
+ this.form.validateFields((err, values) => {
|
|
|
+ if (!err) {
|
|
|
+
|
|
|
+ console.log('Received values of form: ', values)
|
|
|
+ if(this.modalTitle=='新增任务'){
|
|
|
+ postAction('/ctop/checkTaskList/add', {
|
|
|
+ ...values,
|
|
|
+ }).then((res) => {
|
|
|
+ console.log(res)
|
|
|
+ this.visible = false;
|
|
|
+ this.confirmLoading = false;
|
|
|
+ if (res.success) {
|
|
|
+ this.$message.success('创建成功');
|
|
|
+ this.tableHttp();
|
|
|
+ } else {
|
|
|
+ this.$message.error('创建失败')
|
|
|
+
|
|
|
+ }
|
|
|
+ })
|
|
|
+ }else{
|
|
|
+ postAction('/ctop/checkTaskList/edit', {
|
|
|
+ id:this.currentRecord.id,
|
|
|
+ ...values,
|
|
|
+ }).then((res) => {
|
|
|
+ console.log(res)
|
|
|
+ this.visible = false;
|
|
|
+ this.confirmLoading = false;
|
|
|
+ if (res.success) {
|
|
|
+ this.$message.success('修改成功')
|
|
|
+ this.tableHttp();
|
|
|
+ } else {
|
|
|
+ this.$message.error('修改失败')
|
|
|
+ }
|
|
|
+ })
|
|
|
+ }
|
|
|
+
|
|
|
+ } else {
|
|
|
+ this.confirmLoading = false;
|
|
|
+ // console.log(err)
|
|
|
+ this.$message.error('请正确填写必填项目')
|
|
|
+ }
|
|
|
+ })
|
|
|
+
|
|
|
+
|
|
|
+ },
|
|
|
+ // 获取展示列的table
|
|
|
+ tableHttp(){
|
|
|
+ this.loading=true;
|
|
|
+ getAction(`/ctop/checkTaskList/list?pageNo=${this.ipagination.current}`,{
|
|
|
+
|
|
|
+ exeState:this.exeState
|
|
|
+ }).then(res=>{
|
|
|
+ console.log(res);
|
|
|
+ this.loading=false
|
|
|
+ if(res.success){
|
|
|
+ this.tableData=res.result.records.map(item=>{
|
|
|
+ return {
|
|
|
+ ...item,
|
|
|
+ spin:false
|
|
|
+ }
|
|
|
+ });
|
|
|
+ this.ipagination.total=res.result.total
|
|
|
+ }
|
|
|
+
|
|
|
+ })
|
|
|
+ },
|
|
|
+ },
|
|
|
+ mounted() {
|
|
|
+ this.tableHttp();
|
|
|
+ },
|
|
|
+ }
|
|
|
+</script>
|
|
|
+
|
|
|
+<style lang="scss" scoped>
|
|
|
+.tasklist{
|
|
|
+ font-family: PingFangSC-Regular, tahoma, arial, 'Hiragino Sans GB', 'Microsoft yahei', sans-serif;
|
|
|
+ color: #333;
|
|
|
+ ul,
|
|
|
+ li {
|
|
|
+ margin: 0;
|
|
|
+ padding: 0;
|
|
|
+ }
|
|
|
+ .moduler {
|
|
|
+ background: #fff;
|
|
|
+ margin-bottom: 16px;
|
|
|
+ position: relative;
|
|
|
+ padding: 32px 24px 48px 32px;
|
|
|
+ border-radius: 4px;
|
|
|
+ box-shadow: 0px 1px 6px 0px rgba(0, 0, 0, 0.05);
|
|
|
+ .moduler-title {
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ font-size: 22px;
|
|
|
+ margin-bottom: 20px;
|
|
|
+ }
|
|
|
+ .row-item {
|
|
|
+ display: flex;
|
|
|
+ justify-content: flex-start;
|
|
|
+ align-items: center;
|
|
|
+ margin-bottom: 32px;
|
|
|
+ }
|
|
|
+ .row-item:last-of-type {
|
|
|
+ margin-bottom: 0;
|
|
|
+ }
|
|
|
+ .row-item .hint-item {
|
|
|
+ width: 24px;
|
|
|
+ min-width: 24px;
|
|
|
+ align-self: flex-start;
|
|
|
+ line-height: 20px;
|
|
|
+ height: 20px;
|
|
|
+ margin-top: 5px;
|
|
|
+ }
|
|
|
+ .row-item .label-item {
|
|
|
+ position: relative;
|
|
|
+ align-items: flex-start;
|
|
|
+ align-self: flex-start;
|
|
|
+ line-height: 20px;
|
|
|
+ height: 20px;
|
|
|
+ margin-top: 7px;
|
|
|
+ width: 80px;
|
|
|
+ min-width: 80px;
|
|
|
+ .text-item {
|
|
|
+ font-size: 14px;
|
|
|
+ width: 60px;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ .row-item .required-item {
|
|
|
+ width: 4px;
|
|
|
+ height: 4px;
|
|
|
+ border-radius: 2px;
|
|
|
+ background: #f45858;
|
|
|
+ position: absolute;
|
|
|
+ right: 10px;
|
|
|
+ top: 50%;
|
|
|
+ transform: translateY(-50%);
|
|
|
+ }
|
|
|
+ .row-item .input-item {
|
|
|
+ min-width: 480px;
|
|
|
+ position: relative;
|
|
|
+ // height: 35px;
|
|
|
+ .tip {
|
|
|
+ font-size: 12px;
|
|
|
+ color: tomato;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ .tableOpt{
|
|
|
+ margin-bottom: 20px;
|
|
|
+ }
|
|
|
+}
|
|
|
+
|
|
|
+</style>
|
|
|
+<style lang="scss">
|
|
|
+ .newTask{
|
|
|
+ .moduler {
|
|
|
+ background: #fff;
|
|
|
+ margin-bottom: 16px;
|
|
|
+ position: relative;
|
|
|
+ padding: 32px 24px 48px 32px;
|
|
|
+ border-radius: 4px;
|
|
|
+ // box-shadow: 0px 1px 6px 0px rgba(0, 0, 0, 0.05);
|
|
|
+ .moduler-title {
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ font-size: 22px;
|
|
|
+ margin-bottom: 20px;
|
|
|
+ }
|
|
|
+ .row-item {
|
|
|
+ display: flex;
|
|
|
+ justify-content: flex-start;
|
|
|
+ align-items: center;
|
|
|
+ margin-bottom: 32px;
|
|
|
+ }
|
|
|
+ .row-item:last-of-type {
|
|
|
+ margin-bottom: 0;
|
|
|
+ }
|
|
|
+ .row-item .hint-item {
|
|
|
+ width: 24px;
|
|
|
+ min-width: 24px;
|
|
|
+ align-self: flex-start;
|
|
|
+ line-height: 20px;
|
|
|
+ height: 20px;
|
|
|
+ margin-top: 5px;
|
|
|
+ }
|
|
|
+ .row-item .label-item {
|
|
|
+ position: relative;
|
|
|
+ align-items: flex-start;
|
|
|
+ align-self: flex-start;
|
|
|
+ line-height: 20px;
|
|
|
+ height: 20px;
|
|
|
+ margin-top: 7px;
|
|
|
+ width: 120px;
|
|
|
+ min-width: 80px;
|
|
|
+ .text-item {
|
|
|
+ font-size: 14px;
|
|
|
+ width: 80px;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ .row-item .required-item {
|
|
|
+ width: 4px;
|
|
|
+ height: 4px;
|
|
|
+ border-radius: 2px;
|
|
|
+ background: #f45858;
|
|
|
+ position: absolute;
|
|
|
+ right: 10px;
|
|
|
+ top: 50%;
|
|
|
+ transform: translateY(-50%);
|
|
|
+ }
|
|
|
+ .row-item .input-item {
|
|
|
+ min-width: 950px;
|
|
|
+ position: relative;
|
|
|
+ // height: 35px;
|
|
|
+ .tip {
|
|
|
+ font-size: 12px;
|
|
|
+ color: tomato;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ .ant-form-item {
|
|
|
+ -webkit-box-sizing: border-box;
|
|
|
+ box-sizing: border-box;
|
|
|
+ margin: 0;
|
|
|
+ padding: 0;
|
|
|
+ color: rgba(0, 0, 0, 0.65);
|
|
|
+ font-size: 14px;
|
|
|
+ font-variant: tabular-nums;
|
|
|
+ line-height: 1.5;
|
|
|
+ list-style: none;
|
|
|
+ -webkit-font-feature-settings: 'tnum';
|
|
|
+ font-feature-settings: 'tnum';
|
|
|
+ vertical-align: top;
|
|
|
+ }
|
|
|
+ }
|
|
|
+</style>
|