From 1a0b6c69df8bafa8d9c612a5ea04a34be712001c Mon Sep 17 00:00:00 2001 From: fuliqi <fuliqi@qq.com> Date: 星期三, 24 四月 2024 16:01:40 +0800 Subject: [PATCH] Merge remote-tracking branch 'origin/master' --- src/views/system/contract/index.vue | 428 ++++++++++++++++++++--------------------------------- 1 files changed, 164 insertions(+), 264 deletions(-) diff --git a/src/views/system/contract/index.vue b/src/views/system/contract/index.vue index 8df9540..f04da84 100644 --- a/src/views/system/contract/index.vue +++ b/src/views/system/contract/index.vue @@ -2,12 +2,15 @@ <div class="app-container"> <el-row> - <el-col :span="8" v-for="(item) in tableData" :key="o" style="margin: 10px;width: 30%;"> + <el-col :span="8" v-for="(item) in contractList" :key="item" style="margin: 10px;width: 30%;"> <el-card :body-style="{ padding: '0px' }"> - <el-image style="width: 420px;height: 187px;" :preview-src-list="['https://img2.baidu.com/it/u=68398439,1553004927&fm=253&fmt=auto&app=138&f=JPEG?w=800&h=357']" fit="cover" src="https://img2.baidu.com/it/u=68398439,1553004927&fm=253&fmt=auto&app=138&f=JPEG?w=800&h=357" class="image"/> + <el-image style="width: 420px;height: 187px;" + :preview-src-list="['https://img2.baidu.com/it/u=68398439,1553004927&fm=253&fmt=auto&app=138&f=JPEG?w=800&h=357']" + fit="cover" src="https://img2.baidu.com/it/u=68398439,1553004927&fm=253&fmt=auto&app=138&f=JPEG?w=800&h=357" + class="image" /> <div style="padding: 14px;"> - <span>{{ item.companyName }}</span> - <span class="time" style="margin-left: 10px;">{{ item.deptName }}</span> + <span>{{ item.name }}</span> + <span class="time" style="margin-left: 10px;">{{ item.unitName }}</span> <div class="bottom clearfix"> <time class="time">{{ item.startTime }} 鈥� {{ item.endTime }}</time> <el-button type="text" class="button" @click="handleDetail(item)">鏌ョ湅璇︽儏</el-button> @@ -19,172 +22,104 @@ <el-row :gutter="10" class="mb8" style="margin-top: 40px;"> <el-col :span="1.5"> - <el-button - type="primary" - plain - icon="el-icon-plus" - size="mini" - v-hasPermi="['system:contract:add']" - @click="handleAdd" - >鏂板</el-button> - </el-col> - <el-col :span="1.5"> - <el-button - type="warning" - plain - icon="el-icon-top" - size="mini" - v-hasPermi="['system:contract:import']" - @click="handleImportPoint" - >瀵煎叆</el-button> + <el-button type="primary" plain icon="el-icon-plus" size="mini" v-hasPermi="['system:contract:import']" + @click="handleImport">鏂板</el-button> </el-col> </el-row> - - - <!-- 娣诲姞鎴栦慨鏀广�愯濉啓鍔熻兘鍚嶇О銆戝璇濇 --> - <el-dialog :title="detailName" :visible.sync="open" width="500px" append-to-body> - <el-form ref="form" :model="form" :rules="rules" label-width="80px"> - <el-form-item label="鍏徃鍚�" prop="companyName"> - <el-select v-model="form.companyName" placeholder="璇烽�夋嫨"> - <el-option - v-for="item in unitList" - :key="item.id" - :label="item.value" - :value="item.id"> - </el-option> - </el-select> - </el-form-item> - <el-form-item label="閮ㄩ棬鍚嶇О" prop="deptName"> - <el-select v-model="form.deptName" placeholder="璇烽�夋嫨"> - <el-option - v-for="item in deptList" - :key="item.id" - :label="item.value" - :value="item.id"> - </el-option> - </el-select> - </el-form-item> - <el-form-item label="鍚堝悓鏃堕棿" prop="timezone"> - <el-date-picker - :disabled="title === '淇敼鍚堝悓鏃堕棿'" - @change="dateChange" - v-model="form.timezone" - type="daterange" - align="right" - unlink-panels - range-separator="鑷�" - start-placeholder="寮�濮嬫棩鏈�" - end-placeholder="缁撴潫鏃ユ湡" - > - </el-date-picker> - </el-form-item> - </el-form> - <div slot="footer" class="dialog-footer"> - <el-button type="primary" @click="submitForm">纭� 瀹�</el-button> - <el-button @click="cancel">鍙� 娑�</el-button> - </div> - </el-dialog> <!-- 鍚堝悓璇︽儏 --> <el-dialog :title="detailName" :visible.sync="detail" width="800px" append-to-body> <el-form label-position="left" inline class="table-expand"> <el-collapse v-model="activeNames" @change="handleChange"> - <el-collapse-item title="瑙嗛骞冲潎鍦ㄧ嚎鐜�" name="1"> - <div>鈮�98%锛氫笉鎵e垎</div> - <div class="inline-input-container"> - 95%鈮よ棰戝钩鍧囧湪绾跨巼锛�98%锛氭墸0.1鍒� - </div> - <div class="inline-input-container"> - 90%鈮よ棰戝钩鍧囧湪绾跨巼锛�95%锛氭墸0.5鍒� - </div> - <div class="inline-input-container"> - 锛�90%锛� 鎵�1鍒� - 鑻ユ湁杩炵画涓ゆ鐪佸巺鑰冩牳鍦ㄧ嚎鐜囦綆浜�90%锛屾嫑鏍囦汉鏈夋潈瑙i櫎鍚堝悓銆� + <el-collapse-item v-for="(item, index) in ruleData" :key="index" :title="item.ruleName" :name="index"> + <div class="inline-input-container" v-for="(item, index) in item.children" :key="index"> + <b>{{ item.ruleDesc }}</b> <br v-if="item.ruleDesc"/> + <el-tooltip class="item" effect="dark" :content="item.deductCategory + ' ' + item.calcFraction + (item.calcUnit ? '/' + item.calcUnit : '')" placement="top"> + <span>{{ item.ruleCondition }}</span> + <!-- {{ item.deductCategory }} {{ item.calcFraction }}{{ item.calcUnit ? "/" + item.calcUnit : '' }} --> + </el-tooltip> </div> </el-collapse-item> - <el-collapse-item title="鍓嶇鎰熺煡婧愭不鐞嗗伐浣�" name="2"> - <div class="inline-input-container"> - 鏃堕挓鍚屾锛堣秴杩嚶�3绉掍负涓嶅悎鏍硷級24灏忔椂鍐呮湭淇鐨勶細鎵i櫎鐩稿叧闀滃ご鏁伴噺*0.1鍒� - </div> - <div class="inline-input-container"> - OSD鏍囪瘑涓嶆弧瓒炽�奊AT 751-2008 瑙嗛鍥惧儚鏂囧瓧鏍囨敞瑙勮寖銆嬶紝24灏忔椂鍐呮湭淇鐨勶細鏍囨墸闄ょ浉鍏抽暅澶存暟閲�*0.1鍒� - </div> - <div class="inline-input-container"> - 鐢ㄦ埛鎶芥锛屼竴鏈轰竴妗f暟鎹」涓嶅悎鏍硷紙鎻愪緵铏氬亣鏁版嵁鎴栭敊璇暟鎹负涓嶅悎鏍硷級锛�24灏忔椂鍐呮湭淇鐨勶細鎵i櫎鐩稿叧闀滃ご鏁伴噺*0.1鍒� - </div> - </el-collapse-item> - <el-collapse-item title="鍚庡彴绯荤粺鐨勪繚闅�" name="3"> - <div class="inline-input-container"> - 涓埆璁惧鏁呴殰浣嗕笉褰卞搷璇ュ姛鑳芥ā鍧楁暣浣撳簲鐢ㄦ儏鍐典笅,瓒呭嚭72灏忔椂涓嶈冻144灏忔椂鐨勶紱鎵�0.2鍒�/12灏忔椂 - </div> - <div class="inline-input-container"> - 涓埆璁惧鏁呴殰浣嗕笉褰卞搷璇ュ姛鑳芥ā鍧楁暣浣撳簲鐢ㄦ儏鍐典笅,瓒呭嚭144灏忔椂浠ュ悗锛屾瘡瓒呭嚭12灏忔椂锛氭墸0.1鍒�/12灏忔椂 - </div> - <div class="inline-input-container"> - 涓埆璁惧鏁呴殰浣嗕笉褰卞搷璇ュ姛鑳芥ā鍧楁暣浣撳簲鐢ㄦ儏鍐典笅,鍚屼竴鍔熻兘妯″潡鐨勭浉鍚屾垨涓嶅悓璁惧绱涓�涓湀鍐呮晠闅滆秴杩�3娆★細鎵�0.2鍒�/12灏忔椂 - </div> - <div class="inline-input-container"> - 鍚庡彴鍔熻兘妯″潡涓嶈兘姝e父杩愯褰卞搷姝e父浣跨敤鐨�,瓒呭嚭24灏忔椂涓嶈冻48灏忔椂鐨勶細鎵�0.3鍒�/娆� - </div> - <div class="inline-input-container"> - 涓埆璁惧鏁呴殰浣嗕笉褰卞搷璇ュ姛鑳芥ā鍧楁暣浣撳簲鐢ㄦ儏鍐典笅,瓒呭嚭72灏忔椂涓嶈冻144灏忔椂鐨勶紱鎵�0.1鍒�/12灏忔椂 - </div> - <div class="inline-input-container"> - 鍚庡彴鍔熻兘妯″潡涓嶈兘姝e父杩愯褰卞搷姝e父浣跨敤鐨�,瓒呭嚭48灏忔椂浠ュ悗锛氭墸0.5鍒�/12灏忔椂 - </div> - <div class="inline-input-container"> - 鍚庡彴鍔熻兘妯″潡涓嶈兘姝e父杩愯褰卞搷姝e父浣跨敤鐨�,鍚屼竴鍔熻兘妯″潡鐨勭浉鍚屾垨涓嶅悓璁惧绱涓�涓湀鍐呮晠闅滆秴杩�2娆★細鎵�0.5鍒�/娆� - </div> - </el-collapse-item> - <el-collapse-item title="瀛樺偍鏁呴殰" name="4"> - <div class="inline-input-container"> - 鍥犲瓨鍌ㄨ澶囥�佷簯瀛樺偍杞欢绛夊紩璧峰钩鍙颁笉鑳芥甯告煡鐪嬪巻鍙插浘鍍�,鍗曟鏁呴殰鏃堕暱鍦�24灏忔椂浠ュ唴鐨勶細鎵�0.3鍒�/灏忔椂 - </div> - <div class="inline-input-container"> - 鍥犲瓨鍌ㄨ澶囥�佷簯瀛樺偍杞欢绛夊紩璧峰钩鍙颁笉鑳芥甯告煡鐪嬪巻鍙插浘鍍�,鍗曟鏁呴殰鏃堕暱鍦�24灏忔椂浠ュ唴鐨勶細鎵�0.1鍒�/灏忔椂 - </div> - <div class="inline-input-container"> - 鍥犺棰戞垨鑰呭浘鐗囦涪澶卞鑷撮噸瑕佹浜嬩欢涓嶈兘鍥炴斁鎴栨煡鐪�,鍚屼竴鐐逛綅瑙嗛鍥惧儚鍚屼竴妗堜欢涓嶇疮璁¤绠楋細鎵�0.1鍒�/娆� - </div> - </el-collapse-item> - <el-collapse-item title="瀵逛簬鍓嶇鐐逛綅寮傚父鎯呭喌鐨勫鐞�" name="5"> - <div class="inline-input-container"> - 24灏忔椂鍚庢湭淇鐨勶細鎵�0.1鍒�*闀滃ご鏁伴噺 - </div> - <div class="inline-input-container"> - 48灏忔椂鍚庢湭淇锛岀疮璁℃墸鍒嗭細鎵�0.1鍒�*闀滃ご鏁伴噺*澶� - </div> - </el-collapse-item> - <el-form-item label="鍚堝悓闄勪欢" prop="certificates"> - <el-upload> - <el-button size="small" type="primary">鐐瑰嚮涓婁紶</el-button> - <div slot="tip" class="el-upload__tip">璇蜂笂浼犲ぇ灏忎笉瓒呰繃 5MB 鏍煎紡涓� doc/xls/ppt/txt/pdf/png/jpg 鐨勬枃浠�</div> - </el-upload> + <el-form-item label="鍚堝悓闄勪欢" prop="attachment" class="top"> + <file-upload v-model="form.attachment"/> </el-form-item> - <el-dialog :visible.sync="dialogVisible" append-to-body="false"> - <img width="100%" :src="dialogImageUrl" alt=""> - </el-dialog> + <el-link class="top" v-for="item in contractInfo.attachment != null ? contractInfo.attachment.split(',') : contractInfo.attachment" :underline="false" :key="item" @click="handleDownload(item)">{{ item.substring(item.lastIndexOf("/") + 1) }}</el-link> <div style="text-align: right; margin-top: 10px;"> - <el-button type="primary" @click="submitForm1(props.row)">鎻愪氦</el-button> + <el-button type="primary" @click="submitForm">鎻愪氦</el-button> </div> </el-collapse> </el-form> </el-dialog> + <!-- 鍚堝悓瀵煎叆瀵硅瘽妗� --> + <el-dialog :title="upload.title" :visible.sync="upload.open" width="550px" append-to-body> + <el-form ref="form" :model="upload" :rules="rules" label-width="80px"> + <el-form-item label="鍚堝悓鍚嶇О" prop="name"> + <el-input v-model="upload.name" /> + </el-form-item> + <el-form-item label="鍏徃鍚嶇О" prop="unitId"> + <el-select v-model="upload.unitId" placeholder="璇烽�夋嫨"> + <el-option v-for="item in unitList" :key="item.id" :label="item.value" :value="item.id"> + </el-option> + </el-select> + </el-form-item> + <el-form-item label="鍚堝悓鏃堕棿" prop="timezone"> + <el-date-picker :disabled="title === '淇敼鍚堝悓鏃堕棿'" @change="dateChange" v-model="upload.timezone" + value-format="yyyy-MM-dd HH:mm:ss" type="datetimerange" align="right" unlink-panels range-separator="鑷�" + start-placeholder="寮�濮嬫椂闂�" end-placeholder="缁撴潫鏃堕棿"> + </el-date-picker> + </el-form-item> + <el-upload ref="upload" :limit="1" accept=".xlsx, .xls" :headers="upload.headers" + :action="upload.url + '?unitId=' + upload.unitId + '&startTime=' + upload.startTime + '&endTime=' + upload.endTime + '&name=' + upload.name" + :disabled="upload.isUploading" :on-progress="handleFileUploadProgress" :on-success="handleFileSuccess" + :auto-upload="false" drag style="text-align: center;"> + <i class="el-icon-upload"></i> + <div class="el-upload__text">灏嗘枃浠舵嫋鍒版澶勶紝鎴�<em>鐐瑰嚮涓婁紶</em></div> + <div class="el-upload__tip text-center" slot="tip"> + <span>浠呭厑璁稿鍏ls銆亁lsx鏍煎紡鏂囦欢銆�</span> + <el-link type="primary" :underline="false" style="font-size:12px;vertical-align: baseline;" + @click="importTemplate">涓嬭浇妯℃澘</el-link> + </div> + </el-upload> + </el-form> + <div slot="footer" class="dialog-footer"> + <el-button type="primary" @click="submitFileForm">纭� 瀹�</el-button> + <el-button @click="upload.open = false">鍙� 娑�</el-button> + </div> + </el-dialog> </div> </template> <script> -import { listContract, getContract, delContract, addContract, updateContract } from "@/api/platform/contract"; -import {unitSelect} from "../../../api/platform/unit"; -import {deptSelect} from "../../../api/system/dept"; +import { listContract, getContract, updateContract } from "@/api/platform/contract"; +import { getRuleListByContractId } from "../../../api/platform/calculate-rule"; +import { unitSelect } from "../../../api/platform/unit"; +import { deptSelect } from "../../../api/system/dept"; +import { getToken } from "@/utils/auth"; export default { name: "Contract", data() { return { + contractInfo: {}, + // 鍚堝悓瀵煎叆鍙傛暟 + upload: { + // 鏄惁鏄剧ず寮瑰嚭灞傦紙鍚堝悓瀵煎叆锛� + open: false, + // 寮瑰嚭灞傛爣棰橈紙鍚堝悓瀵煎叆锛� + title: "", + // 鏄惁绂佺敤涓婁紶 + isUploading: false, + // 璁剧疆涓婁紶鐨勮姹傚ご閮� + headers: { Authorization: "Bearer " + getToken() }, + // 涓婁紶鐨勫湴鍧� + url: process.env.VUE_APP_BASE_API + "/system/contract/importData", + unitId: '', + startTime: '', + endTime: '' + }, dialogImageUrl: '', dialogVisible: false, disabled: false, @@ -218,49 +153,21 @@ open: false, // 鏄惁鏄剧ず璇︽儏 detail: false, - // 鏌ヨ鍙傛暟 - queryParams: { - pageNum: 1, - pageSize: 10, - companyId: null, - companyName: null, - deptId: null, - deptName: null, - detail: null - }, - tableData: [{ - id: '12987122', - companyName: '杩愮淮鍏徃鐢�', - deptName: '鑷础瀵岄『鍏畨灞�', - startTime: '2023-12-11 10:20:20', - endTime: '2024-12-11 10:20:20', - shop: '鐜嬪皬铏庡か濡诲簵', - shopId: '10333' - }, { - id: '12987123', - companyName: '杩愮淮鍏徃涔�', - deptName: '鑷础澶у畨鍏畨灞�', - startTime: '2023-12-11 10:20:20', - endTime: '2023-12-11 10:20:20', - shop: '鐜嬪皬铏庡か濡诲簵', - shopId: '10333' - }, { - id: '12987125', - companyName: '杩愮淮鍏徃涓�', - deptName: '鑷础鑷祦浜曞叕瀹夊眬', - startTime: '2023-12-11 10:20:20', - endTime: '2023-12-11 10:20:20', - shop: '鐜嬪皬铏庡か濡诲簵', - shopId: '10333' - }], + ruleData: [], // 琛ㄥ崟鍙傛暟 form: { }, // 琛ㄥ崟鏍¢獙 rules: { - companyId: [ - { required: true, message: "鍏徃id涓嶈兘涓虹┖", trigger: "blur" } + name: [ + { required: true, message: "鍚堝悓鍚嶇О涓嶈兘涓虹┖", trigger: "blur" } ], + unitId: [ + { required: true, message: "杩愮淮鍗曚綅涓嶈兘涓虹┖", trigger: "change" } + ], + timezone: [ + { type: "array", required: true, message: "鍚堝悓鏃堕棿涓嶈兘涓虹┖", trigger: "change" } + ] } }; }, @@ -270,15 +177,61 @@ this.selectDept(); }, methods: { + submitForm() { + updateContract(this.form).then(response => { + if (response.code != 200) { + this.$message.error("鎿嶄綔澶辫触"); + } else { + this.$message.success("鎿嶄綔鎴愬姛"); + } + }); + }, + /** 瀵煎叆鎸夐挳鎿嶄綔 */ + handleImport() { + this.upload.title = "鍚堝悓瀵煎叆"; + this.upload.open = true; + }, + /** 涓嬭浇妯℃澘鎿嶄綔 */ + importTemplate() { + this.download('system/contract/importTemplate', { + }, `鍚堝悓瀵煎叆妯℃澘.xlsx`) + }, + // 鏂囦欢涓婁紶涓鐞� + handleFileUploadProgress(event, file, fileList) { + this.upload.isUploading = true; + }, + // 鏂囦欢涓婁紶鎴愬姛澶勭悊 + handleFileSuccess(response, file, fileList) { + this.upload.open = false; + this.upload.isUploading = false; + this.$refs.upload.clearFiles(); + if (response.code != 200) { + this.$message.warning(response.msg); + } else { + this.$message.success(response.msg); + } + this.getList(); + }, + // 鎻愪氦涓婁紶鏂囦欢 + submitFileForm() { + let that = this; + this.$refs["form"].validate(valid => { + if (valid) { + that.$refs.upload.submit(); + } + }) + }, + // 鏃堕棿閫夋嫨鍙戠敓鍙樺寲 + dateChange() { + this.upload.startTime = this.upload.timezone[0]; + this.upload.endTime = this.upload.timezone[1]; + }, handleRemove(file) { console.log(file); }, handlePictureCardPreview(file) { this.dialogImageUrl = file.url; this.dialogVisible = true; - }, - handleDownload(file) { - console.log(file); }, // 杩愮淮鍏徃涓嬫媺鏁版嵁 selectUnit() { @@ -292,53 +245,22 @@ this.deptList = res.data; }) }, - submitForm1() { - alert('鎻愪氦鎴愬姛锛�'); - }, - handleChange(val) { - console.log(val); - }, /** 鏌ヨ銆愯濉啓鍔熻兘鍚嶇О銆戝垪琛� */ getList() { this.loading = true; listContract(this.queryParams).then(response => { - this.contractList = response.rows; + this.contractList = response; this.total = response.total; this.loading = false; }); }, - // 鍙栨秷鎸夐挳 - cancel() { - this.open = false; - this.reset(); - }, - // 琛ㄥ崟閲嶇疆 - reset() { - this.form = { - id: null, - companyId: null, - companyName: null, - deptId: null, - deptName: null, - detail: null - }; - this.resetForm("form"); - }, - /** 鎼滅储鎸夐挳鎿嶄綔 */ - handleQuery() { - this.queryParams.pageNum = 1; - this.getList(); - }, - /** 閲嶇疆鎸夐挳鎿嶄綔 */ - resetQuery() { - this.resetForm("queryForm"); - this.handleQuery(); - }, - // 澶氶�夋閫変腑鏁版嵁 - handleSelectionChange(selection) { - this.ids = selection.map(item => item.id) - this.single = selection.length!==1 - this.multiple = !selection.length + /** 鑾峰彇鍚堝悓瑙勫垯 */ + getRuleList(item) { + getRuleListByContractId(item.id).then(response => { + this.ruleData = response.data; + this.form.id = item.id; + this.contractInfo = item; + }); }, /** 鏂板鎸夐挳鎿嶄綔 */ handleAdd() { @@ -349,7 +271,8 @@ /** 璇︽儏鎸夐挳鎿嶄綔 */ handleDetail(item) { this.detail = true; - this.detailName = item.companyName + this.detailName = item.name; + this.getRuleList(item); }, /** 淇敼鎸夐挳鎿嶄綔 */ handleUpdate(row) { @@ -361,41 +284,9 @@ this.title = "淇敼鍚堝悓"; }); }, - /** 鎻愪氦鎸夐挳 */ - submitForm() { - this.$refs["form"].validate(valid => { - if (valid) { - if (this.form.id != null) { - updateContract(this.form).then(response => { - this.$modal.msgSuccess("淇敼鎴愬姛"); - this.open = false; - this.getList(); - }); - } else { - addContract(this.form).then(response => { - this.$modal.msgSuccess("鏂板鎴愬姛"); - this.open = false; - this.getList(); - }); - } - } - }); - }, - /** 鍒犻櫎鎸夐挳鎿嶄綔 */ - handleDelete(row) { - const ids = row.id || this.ids; - this.$modal.confirm('鏄惁纭鍒犻櫎銆愯濉啓鍔熻兘鍚嶇О銆戠紪鍙蜂负"' + ids + '"鐨勬暟鎹」锛�').then(function() { - return delContract(ids); - }).then(() => { - this.getList(); - this.$modal.msgSuccess("鍒犻櫎鎴愬姛"); - }).catch(() => {}); - }, - /** 瀵煎嚭鎸夐挳鎿嶄綔 */ - handleExport() { - this.download('system/contract/export', { - ...this.queryParams - }, `contract_${new Date().getTime()}.xlsx`) + /** 涓嬭浇鎸夐挳鎿嶄綔 */ + handleDownload (data) { + this.$download.resource(data); } } }; @@ -405,13 +296,17 @@ .table-expand { font-size: 0; } -.table-expand { + +.table-expand { width: 100%; color: #99a9bf; } + .inline-input-container { - white-space: nowrap; /* 闃叉鍐呭鍐呴儴鐨勬崲琛� */ - margin-right: 50px; /* 鍙�夌殑锛岀敤浜庡湪鍏冪礌涔嬮棿娣诲姞涓�浜涢棿璺� */ + white-space: nowrap; + /* 闃叉鍐呭鍐呴儴鐨勬崲琛� */ + margin-right: 50px; + /* 鍙�夌殑锛岀敤浜庡湪鍏冪礌涔嬮棿娣诲姞涓�浜涢棿璺� */ width: 7%; } @@ -437,11 +332,16 @@ .clearfix:before, .clearfix:after { - display: table; - content: ""; + display: table; + content: ""; } .clearfix:after { - clear: both + clear: both +} + +.top { + display: block; + margin-top: 10px; } </style> -- Gitblit v1.8.0