From e00361c6bcbb1a56f6dcda22b91bdfcb2736e263 Mon Sep 17 00:00:00 2001 From: YM <479443481@qq.com> Date: 星期五, 26 七月 2024 15:56:27 +0800 Subject: [PATCH] 1 --- src/pages/character/detail.vue | 603 +++++++++++++++++++++++++++++++++++------------------- 1 files changed, 389 insertions(+), 214 deletions(-) diff --git a/src/pages/character/detail.vue b/src/pages/character/detail.vue index 73265c0..d4c28cb 100644 --- a/src/pages/character/detail.vue +++ b/src/pages/character/detail.vue @@ -1,6 +1,6 @@ <template> <view class="relative"> - <headNav :idIndex="1 + ''" text="涓尰浜虹墿鏁版嵁搴�" /> + <headNav :idIndex="1 + ''" text="鍘嗕唬浜虹墿" /> <view class="Midde flex"> <el-button class="MiddeBack flex flex-center" @click="goBack" >杩斿洖</el-button @@ -20,6 +20,7 @@ text-align: center; margin-right: 0.15rem; " + @click="openFileClick(1)" > RDF </li> @@ -32,7 +33,9 @@ font-size: 0.12rem; text-align: center; margin-right: 0.15rem; + cursor: pointer; " + @click="openFileClick(2)" > NT </li> @@ -45,7 +48,9 @@ font-size: 0.12rem; text-align: center; margin-right: 0.15rem; + cursor: pointer; " + @click="openFileClick(3)" > XML </li> @@ -58,7 +63,9 @@ font-size: 0.12rem; text-align: center; margin-right: 0.15rem; + cursor: pointer; " + @click="openFileClick(4)" > JSON </li> @@ -66,11 +73,17 @@ <view id="copyBox" class="fz font-family" + :title="biogData.length ? biogData[0].content : ''" style=" - font-size: 0.13rem; + font-size: 0.14rem; font-weight: normal; - line-height: 0.2rem; + line-height: 2; letter-spacing: 0.03rem; + cursor: pointer; + display: -webkit-box; + -webkit-box-orient: vertical; + -webkit-line-clamp: 4; + overflow: hidden; " > {{ biogData.length ? biogData[0].content : "-" }} @@ -86,7 +99,6 @@ <img src="@/static/image/yinyong.png" alt="" />寮曠敤</el-button > </view> - <!-- v-if="biogData.length > 1" --> <view style="font-size: 0.12rem; color: #244a7b; cursor: pointer" @click="ProfileClick" @@ -146,6 +158,7 @@ <span>鏃剁┖鍦板浘</span> <!-- <el-button icon="el-icon-rank" style="float: right; padding: 3px 0" type="text"></el-button> --> <img + v-if="markerList && markerList.length > 0" src="@/static/image/fangda.png" @click="fangdaClick(2)" style="width: 0.18rem; height: 0.18rem; cursor: pointer" @@ -154,7 +167,19 @@ <view id="spaceTime" style="height: 1.51rem; width: 100%; position: relative" - ></view> + > + <p + v-if="markerList && markerList.length == 0" + style=" + margin-top: 0.5rem; + color: #666; + text-align: center; + font-size: 12px; + " + > + 鏆傛棤鏁版嵁 + </p> + </view> </el-card> <el-card style="width: 100%; height: 2.06rem"> <div @@ -214,7 +239,7 @@ class="box-card" style="min-height: 1.91rem; margin: 0.2rem 0" > - <el-tabs ref="tabs" v-model="activeName" @tab-click="handleClick"> + <el-tabs ref="tabs" v-model="activeName"> <el-tab-pane label="浠h〃钁椾綔" data-id="1" name="representative"> <Table1 :data="tableData1" @@ -229,12 +254,13 @@ :height="400" /> </el-tab-pane> - <el-tab-pane label="甯堟壙鍏崇郴" data-id="3" name="mentoring " - ><Table1 + <el-tab-pane label="甯堟壙鍏崇郴" data-id="3" name="mentoring "> + <Table1 :data="tableData3" :columns="tableColumns2" :height="400" - /></el-tab-pane> + /> + </el-tab-pane> <el-tab-pane label="绀句細鍏崇郴" data-id="4" name="society"> <Table1 :data="tableData4" @@ -263,14 +289,22 @@ <span>鐩稿叧闄勮〃/鍥惧儚</span> </div> <view> - <div class="flex"> - <el-image - v-for="item in imageList" - :key="item" - style="width: 2.05rem; height: 2.4rem" - :src="item" - fit="fill" - ></el-image> + <div style="overflow: auto; display: flex"> + <div v-for="item in imageList" :key="item" :title="item.name"> + <el-image + :title="item.name" + :alt="item.name" + style=" + width: 2.05rem; + height: 2.4rem; + margin-right: 0.2rem; + margin-bottom: 0.1rem; + " + :src="item.src" + :preview-src-list="imageList.map((item) => item.src)" + fit="contain" + ></el-image> + </div> </div> <div v-if="imageList.length == 0" @@ -291,8 +325,9 @@ > <span>鐜颁唬鐮旂┒</span> </div> - <ul class="font-family" style="font-size: 0.13rem; line-height: 2"> + <ul class="fileul" style="font-size: 0.13rem; line-height: 2"> <li + style="cursor: pointer" v-for="(item, index) in personResearchList" :key="index" @click="toLink(item)" @@ -300,7 +335,7 @@ {{ "[" + Number(index + 1) + "]" + item.achievementName }} </li> <div - v-if="personResearchList.length == 0" + v-if="!personResearchList || personResearchList.length == 0" style="color: #666; text-align: center; font-size: 16px" > 鏆傛棤鏁版嵁 @@ -312,9 +347,17 @@ </div> <!-- 杩斿洖椤堕儴 --> - <el-col style="position: absolute; bottom: 1rem; left: 1.2rem"> + <el-col + style=" + position: absolute; + bottom: 1rem; + left: 1.2rem; + width: 0.6rem; + height: 0.6rem; + " + > <el-button - style="width: 0.5rem; height: 0.5rem; font-size: 0.3rem" + style="font-size: 0.3rem" icon="el-icon-top" circle @click="scrollToTop" @@ -345,7 +388,7 @@ <view class="flex"> <view></view> <view style="font-weight: 700; color: #2c2c2c" - >鈥斺�攞{ item.pageNo }}</view + >鈥斺�攞{ item.bookName }}</view > </view> </view> @@ -365,16 +408,21 @@ import { getFuzzySearch, getPersonInfo, + getRelationTypeTreeList, getWebBasic, + getDynastyAll, getIntroduction, getSource, getPersonImages, getPersonBiog, getPersonWritings, getPersonRelationAtSchool, - getSpaceTime + getSpaceTime, + getDynastyData } from "@/api/index.js"; import { getImg } from "@/static/tool.js"; +import L from "leaflet"; +import "leaflet.chinatmsproviders"; export default { components: { @@ -433,6 +481,8 @@ }, { prop: "d", + width: 300, + showOverflowTooltip: true, label: "鍑哄" } ], @@ -461,7 +511,8 @@ tableData5: [], nodes: [], relationships: [], - personResearchList: [] + personResearchList: [], + markerList: [] }; }, onLoad(options) { @@ -483,28 +534,39 @@ // 鑾峰彇鏃剁┖鍦板浘 this.getMapInfo(); - this.$nextTick(() => { - // 鑾峰彇绗竴涓�夐」鍗$殑 DOM 鍏冪礌 - const firstTab = this.$refs.tabs.$el.querySelector( - ".el-tabs__active-bar" - ); - firstTab.style.transform = "translateX(" + "-.2rem" + ")"; - }); + // this.$nextTick(() => { + // // 鑾峰彇绗竴涓�夐」鍗$殑 DOM 鍏冪礌 + // const firstTab = this.$refs.tabs.$el.querySelector( + // ".el-tabs__active-bar" + // ); + // firstTab.style.transform = "translateX(" + "-.2rem" + ")"; + // }); // 鐩戝惉绐楀彛澶у皬鍙樺寲 window.addEventListener("resize", this.relation); }, methods: { copyText() { - const txt = this.biogData[0].content + ";鏉ユ簮锛氫腑鍖诲尰瀛︿汉鐗╂暟鎹簱"; - navigator.clipboard.writeText(txt).then(); + const textToCopy = + this.biogData[0].content + "\n鏉ユ簮锛氫腑鍖诲尰瀛︿汉鐗╃煡璇嗗簱"; + const textarea = document.createElement("textarea"); + textarea.value = textToCopy; + document.body.appendChild(textarea); + textarea.select(); + document.execCommand("copy"); + document.body.removeChild(textarea); this.$message({ message: "澶嶅埗鎴愬姛锛�", type: "success" }); }, toLink(item) { - window.open(item.url); + if (item.url) { + window.open(item.url); + } + if (item.filePath) { + window.open(getImg(item.filePath)); + } }, getData() { // 鍩烘湰淇℃伅 @@ -525,11 +587,25 @@ : fieldItem.content1; } } - console.log(obj); this.detailInfo = obj; + getDynastyAll().then((dynastyData) => { + getWebBasic({ + personId: this.detailId + }).then((res) => { + const obj = res.object; + if (obj.school) { + getIntroduction(Number(obj.school)).then((sres) => { + this.handleData(obj, sres, dynastyData.list); + }); + } else { + this.handleData(obj, null, dynastyData.list); + } + }); + }); // 鍏崇郴鍥捐氨 - this.getMappingData(this.detailInfo.NAME); + this.getMappingData(); }); + //鐜颁唬鐮旂┒ getPersonInfo({ id: this.detailId, @@ -537,58 +613,31 @@ }).then((res) => { this.personResearchList = res.object.personResearchList; }); - getPersonInfo({ - id: this.detailId, - type: "PERSON_RELATIONS" - }).then((res) => { - console.log(res, "PERSON_RELATIONS"); - this.personRelationList = res.object.personRelationList; - if (this.personRelationList.length) { - this.tableData4 = this.personRelationList.map((f) => { - return { - a: f.nodeName, - b: f.relationTypeName - }; - }); - } - }); - getWebBasic({ - personId: this.detailId - }).then((res) => { - console.log(res, "resres"); - const obj = res.object; - if (obj.school) { - getIntroduction(Number(obj.school)).then((sres) => { - console.log(sres, "sres"); - handleData(obj, sres); - }); - } else { - handleData(obj); - } - }); // 娲诲姩骞磋氨 getPersonInfo({ id: this.detailId, type: "PERSON_SPACE_TIME" }).then((res) => { - this.tableData5 = res.object.personSpaceTimeList.map((item) => { - return { - a: item.time, - b: item.activityName, - c: item.activityAddrOld, - d: item.desc // 杩欓噷缂哄皯娲诲姩鎻忚堪瀛楁 - }; - }); + if (res.object.personSpaceTimeList) { + this.tableData5 = res.object.personSpaceTimeList.map((item) => { + return { + a: item.time, + b: item.activityName, + c: item.activityAddrOld, + d: item.desc + }; + }); + } }); }, - handleData(obj, sres) { + handleData(obj, sres, dynastyData) { this.tableArr = [ { list: [ { - name: "鍒悕", - value: obj.alias || "-" + name: "濮撳悕", + value: obj.name || "-" }, { name: "瀛�", @@ -600,7 +649,16 @@ }, { name: "鎵�澶勬椂鏈�", - value: obj.dynastyDesc || "-" + value: + dynastyData.find((item) => item.dynastyId == obj.dynastyId) + .name || "-", + valueClick: () => { + uni.navigateTo({ + url: + "/pages/knowledgeBase/knowledgeBase?dynasty=" + + obj.dynastyId + }); + } }, { name: "姘戞棌", @@ -620,7 +678,14 @@ }, { name: "鑱屽畼", - value: obj.official || "-" + value: obj.official || "-", + valueClick: () => { + uni.navigateTo({ + url: + "/pages/knowledgeBase/knowledgeBase?isAdvancedSearch=1&official=" + + obj.official + }); + } }, { name: "娴佹淳", @@ -651,7 +716,12 @@ getPersonImages({ personId: this.detailId }).then((res) => { - this.imageList = res.list.map((item) => getImg(item.filePath)); + this.imageList = res.list.map((item) => { + return { + src: getImg(item.filePath), + name: item.desc + }; + }); }); }, getBiog() { @@ -661,7 +731,27 @@ this.biogData = res.list.map((item) => { return { content: item.content1, - pageNo: "銆�" + item.pageNo + "銆� " + "P " + item.pageNo // 杩欓噷鍙湁bookid鏃犳硶鍖归厤鍒颁功鍚� + bookName: + "銆�" + + item.bookName + + "銆� " + + (item.pageNo ? "P " + item.pageNo : "") // 杩欓噷鍙湁bookid鏃犳硶鍖归厤鍒颁功鍚� + }; + }); + }); + }, + getBiog() { + getPersonBiog({ + personId: this.detailId + }).then((res) => { + this.biogData = res.list.map((item) => { + return { + content: item.content1, + bookName: + "銆�" + + item.bookName + + "銆� " + + (item.pageNo ? "P " + item.pageNo : "") // 杩欓噷鍙湁bookid鏃犳硶鍖归厤鍒颁功鍚� }; }); }); @@ -682,17 +772,72 @@ }); }, getRelationship() { - getPersonRelationAtSchool({ - personId: this.detailId - // relationSearchTypeEO: "SOCIAL" + getPersonInfo({ + id: this.detailId, + type: "PERSON_RELATIONS" }).then((res) => { - console.log(res, "getPersonRelationAtSchool"); - // 杩欓噷鎺ュ彛鏈夐棶棰� + this.tableData4; + if (res.object.personRelationMap.kin.length) { + this.tableData2 = res.object.personRelationMap.kin.map((f) => { + return { + a: f.nodeName, + b: f.relationTypeName, + c: f.textualResearch, + d: + res.object.bookList && + res.object.bookList.find((citem) => citem.id == f.bookId) + ? "銆�" + + res.object.bookList.find((citem) => citem.id == f.bookId) + .name + + "銆� P" + + f.pageNo + : "" + }; + }); + } + if (res.object.personRelationMap.teacherStudent.length) { + this.tableData3 = res.object.personRelationMap.teacherStudent.map( + (f) => { + return { + a: f.nodeName, + b: f.relationTypeName, + c: f.textualResearch, + d: + res.object.bookList && + res.object.bookList.find((citem) => citem.id == f.bookId) + ? "銆�" + + res.object.bookList.find((citem) => citem.id == f.bookId) + .name + + "銆� P" + + f.pageNo + : "" + }; + } + ); + } + if (res.object.personRelationMap.social.length) { + this.tableData4 = res.object.personRelationMap.social.map((f) => { + return { + a: f.nodeName, + b: f.relationTypeName, + c: f.textualResearch, + d: + res.object.bookList && + res.object.bookList.find((citem) => citem.id == f.bookId) + ? "銆�" + + res.object.bookList.find((citem) => citem.id == f.bookId) + .name + + "銆� P" + + f.pageNo + : "" + }; + }); + } }); }, - getMappingData(name) { + getMappingData() { getFuzzySearch({ - keyword: name + personId: this.detailId }).then((res) => { this.nodes = []; this.relationships = []; @@ -705,13 +850,13 @@ (node) => node.id === item.identifier2 && node.name === item.name2 ); // 璇佹槑涓嶅瓨鍦� - if (exists1 !== true) { + if (item.name1 && exists1 !== true) { this.nodes.push({ name: item.name1, id: item.identifier1 }); } - if (exists2 !== true) { + if (item.name2 && exists2 !== true) { this.nodes.push({ name: item.name2, id: item.identifier2 @@ -732,20 +877,68 @@ getSpaceTime({ personId: this.detailId }).then((res) => { - console.log(res, "getSpaceTime"); - const data = res.list.map((item) => { - return { - name: item.activityName, - value: [item.xcoord, item.ycoord] - }; - }); - // 鏃剁┖鍦板浘 - loadBMap("1NJdwrI1CfT6lrykVhDkmWgsO6O2bjQK").then(() => { - this.spaceTime(data); - }); + if (res.list && res.list.length) { + const data = []; + for (let i = 0; i < res.list.length; i++) { + const item = res.list[i]; + if (item.xcoord && item.ycoord) { + const obj = { + name: item.activityName, + value: [item.xcoord, item.ycoord] + }; + data.push(obj); + } + } + this.markerList = data; + // 鏃剁┖鍦板浘 + // 杩欓噷鍙彇浜嗙涓�鏉★紝闇�瑕佸叏閮ㄦ暟鎹� + if (data && data.length) { + this.initMap(data); + } + } + + // loadBMap("1NJdwrI1CfT6lrykVhDkmWgsO6O2bjQK").then(() => { + // this.spaceTime(data); + // }); }); }, - + initMap(markerList) { + var map = L.map("spaceTime", { + preferCanvas: true, + attributionControl: false + }).setView([markerList[0].value[1], markerList[0].value[0]], 13); + L.tileLayer + .chinaProvider("TianDiTu.Normal.Map", { + key: "76bc34ead7e30e663a4eded8aeaf5860", + maxZoom: 18, + minZoom: 3 + }) + .addTo(map); + L.tileLayer + .chinaProvider("TianDiTu.Normal.Annotion", { + key: "76bc34ead7e30e663a4eded8aeaf5860", + maxZoom: 18, + minZoom: 3 + }) + .addTo(map); + let icon = L.divIcon({ + html: "<div class='map-circle-name ripple'></div>", + iconSize: [80, 80], + className: "map-circle" + }); + this.map = map; + const temp_mark = L.marker([markerList.value[1], markerList.value[0]], { + icon: icon + }).addTo(map); + if (markerList.length) { + for (let i = 0; i < markerList.length; i++) { + const item = markerList[i]; + const temp_mark = L.marker([item.value[1], item.value[0]], { + icon: icon + }).addTo(map); + } + } + }, // 鏀惧ぇ鍦板浘璺宠浆 fangdaClick(index) { if (index == 1) { @@ -773,29 +966,31 @@ behavior: "smooth" // 浣跨敤骞虫粦婊氬姩 }); }, - handleClick(tab) { - let index = tab.$attrs["data-id"] - 1; - this.$nextTick(() => { - let firstTab = this.$refs.tabs.$el.querySelector( - ".el-tabs__active-bar" - ); - if (index == 0) { - firstTab.style.transform = "translateX(-" + 0.2 + "rem)"; - } else if (index == 1) { - firstTab.style.transform = "translateX(" + 0.85 * index + "rem)"; - } else if (index == 2) { - firstTab.style.transform = "translateX(" + 0.93 * index + "rem)"; - } else if (index == 3) { - firstTab.style.transform = "translateX(" + 0.95 * index + "rem)"; - } else if (index == 4) { - firstTab.style.transform = "translateX(" + 0.97 * index + "rem)"; - } else { - let firstTab = this.$refs.tabs.$el.querySelector( - ".el-tabs__active-bar" - ); - firstTab.style.transform = "translateX(" + "-.2" + "rem)"; - } - }); + openFileClick(index) { + let obj = { + id: this.detailId, + type: "Person" + }; + switch (index) { + case 1: + obj.outputType = "RDF"; + break; + case 2: + obj.outputType = "NT"; + break; + case 3: + obj.outputType = "XML"; + break; + case 4: + obj.outputType = "JSON"; + break; + } + let queryString = Object.keys(obj) + .map( + (key) => `${encodeURIComponent(key)}=${encodeURIComponent(obj[key])}` + ) + .join("&"); + window.open(`#/pages/fileDetail/index?${queryString}`); }, // 鍏崇郴鍥捐氨 relation() { @@ -807,25 +1002,8 @@ let FontSize = 12; // 瀛椾綋澶у皬 let BorderWidth = 2; // 杈规澶у皬 - let SymbolSize = 80; // 灏哄璺濈 + let SymbolSize = 50; // 灏哄璺濈 let Distance = 10; - // 涓嶅悓灏哄涓嬩慨鏀筫charts鐨勫瓧浣� - if (window.innerWidth > 2560 && window.innerWidth <= 3840) { - FontSize = 28; - BorderWidth = 5; - SymbolSize = 100; - Distance = 33; - } else if (window.innerWidth > 1920 && window.innerWidth <= 2560) { - FontSize = 28; - BorderWidth = 4; - SymbolSize = 90; - Distance = 22; - } else if (window.innerWidth >= 1366 && window.innerWidth <= 1920) { - FontSize = 18; - BorderWidth = 4; - SymbolSize = 70; - Distance = 22; - } // 鏍规嵁鍏崇郴鏁版嵁鐢熸垚杩炴帴绾� var links = []; relationships.forEach((relationship, i) => { @@ -938,28 +1116,6 @@ var myChart = echarts.init(chartDom); var option; - // const data = [ - // { - // name: "娴烽棬", - // value: [121.15, 31.89] - // }, - // { - // name: "閯傚皵澶氭柉", - // value: [109.781327, 39.608266] - // }, - // { - // name: "鎷涜繙", - // value: [120.38, 37.35] - // }, - // { - // name: "鑸熷北", - // value: [122.207216, 29.985295] - // }, - // { - // name: "榻愰綈鍝堝皵", - // value: [123.97, 47.33] - // } - // ]; option = { title: { text: "", @@ -1157,16 +1313,14 @@ <style> /* Table1琛ㄦ牸閲岄潰鐨勬暟鎹� */ -::v-deep .is-leaf { - .cell { +::v-deep .is-leaf .cell { font-size: 0.14rem !important; height: 0.4rem !important; line-height: 0.4rem !important; } } -::v-deep .el-table__body { - .cell { +::v-deep .el-table__body .cell { font-size: 0.14rem !important; height: 0.4rem !important; line-height: 0.4rem !important; @@ -1187,9 +1341,7 @@ width: 70%; } -::v-deep .el-tabs__content { - line-height: 1; -} + /* 涓汉灏忎紶 ------------------*/ ::v-deep .el-dialog__header { @@ -1198,10 +1350,6 @@ ::v-deep .el-dialog__body { padding: 0; -} - -::v-deep .el-dialog__wrapper { - z-index: 999999999999999 !important; } .ProfileNav { @@ -1215,12 +1363,6 @@ } /* ------------------- */ - -img { - width: 100%; - height: 100%; -} - * { box-sizing: border-box; } @@ -1230,16 +1372,16 @@ padding: 15rpx 25rpx; color: #fff !important; - img { - width: 30rpx; - height: 30rpx; - vertical-align: middle; - } +} +.NavTop img { + width: 30rpx; + height: 30rpx; + vertical-align: middle; +} - .NavTopr { - img { - margin-right: 10rpx; - } +.NavTop .NavTopr { + img { + margin-right: 10rpx; } } @@ -1247,9 +1389,9 @@ width: 100%; height: 30rpx; - img { - vertical-align: top; - } +} +.mImage img { + vertical-align: top; } .Midde { @@ -1260,28 +1402,28 @@ align-items: flex-start; padding: 0.18rem 0.24rem; - view { - color: #000; - } +} +.Midde view { + color: #000; +} - .MiddeBack { - width: 0.6rem; - height: 0.24rem; - font-size: 0.12rem; - padding: 0; - border: 1px solid #9e9e9e; - } +.Midde .MiddeBack { + width: 0.6rem; + height: 0.24rem; + font-size: 0.12rem; + padding: 0; + border: 1px solid #9e9e9e; } .yinyong { font-size: 0.12rem; - img { - width: 0.12rem; - height: 0.1rem; - vertical-align: top; - margin-right: 0.03rem; - } +} +.yinyong img { + width: 0.12rem; + height: 0.1rem; + vertical-align: top; + margin-right: 0.03rem; } .el-dialog__wrapper { @@ -1326,10 +1468,12 @@ } ::v-deep .el-tabs__item { - width: 1rem; + width: 1.4rem; font-size: 0.14rem; line-height: 0.4rem; height: 0.4rem; + padding: 0 20px !important; + text-align: center; } ::v-deep .el-tabs__header { @@ -1337,12 +1481,8 @@ } ::v-deep .el-tabs__active-bar { - /* 璁剧疆婊氬姩鏉″搴� */ - width: 1rem !important; height: 0.03rem !important; background-color: #597aa5; - transform: translateX(-20px); - /* margin-top: .09rem; */ } ::v-deep .el-tabs__active-bar { @@ -1360,4 +1500,39 @@ .BoxRight .box-card { margin-bottom: 0.2rem !important; } +::v-deep .map-circle-name { + width: 20px; + height: 20px; + border-radius: 50%; + background-color: rgb(222, 142, 102); +} +::v-deep .ripple { + border-radius: 50%; + position: relative; + overflow: hidden; +} + +::v-deep .ripple::before { + content: ""; + position: absolute; + top: 50%; + left: 50%; + width: 150%; /* Ensure it covers the entire parent */ + height: 150%; + background: rgba(255, 255, 255, 0.5); + border-radius: 50%; + transform: translate(-50%, -50%) scale(1); + animation: ripple-animation 1s infinite linear; +} + +@keyframes ripple-animation { + to { + transform: translate(-50%, -50%) scale(0); + opacity: 0; + } +} + +.fileul li:hover { + color: #597aa5; +} </style> -- Gitblit v1.9.1