diff --git a/src/assets/css/gonggao/daily.less b/src/assets/css/gonggao/daily.less index 832e7fc3e..a58d6e120 100644 --- a/src/assets/css/gonggao/daily.less +++ b/src/assets/css/gonggao/daily.less @@ -1,7 +1,7 @@ .m-daily { .flex; flex-wrap: wrap; - gap: 30px; + gap: 20px; .m-daily-item { flex: none; .mb(10px); @@ -50,6 +50,9 @@ @media screen and (max-width: @phone) { .m-daily-item { width: 100%; + .m-daily-content { + .w(100%); + } } } .m-simple-server { @@ -144,6 +147,12 @@ background-color: #f56c6c; } } + @media screen and (max-width: @phone) { + .w(80px); + .u-status { + .w(60px); + } + } } } } @@ -225,7 +234,7 @@ } @media screen and (max-width: @phone) { .m-simple-daily-item { - width: 180px; + width: 118px; } } } @@ -433,47 +442,47 @@ } .m-simple-furniture { - margin-top: 20px; display: flex; flex-direction: column; - justify-content: center; + justify-content: flex-start; align-items: flex-start; padding: 10px; - gap: 5px; + gap: 10px; .w(100%); - // height: 99px; + height: 119px; box-sizing: border-box; background: #ffffff; border-radius: 10px; flex: none; - & > div { + font-size: 14px; + line-height: 18px; + color: #000000; + .u-furniture-standard, + .u-furniture-content { .flex; .w(100%); justify-content: space-between; - color: #000000; - .u-label { - // font-weight: 700; - font-size: 15px; - line-height: 26px; - color: #888; - } - .u-value { - font-weight: 400; - font-size: 15px; - line-height: 26px; - } .u-link { &:hover { color: @priceColor; } } } + .u-next-content { + width: 100%; + text-align: right; + font-size: 10px; + line-height: 13px; + color: #00000066; + } .u-furniture-title { - .fz(15px,2); - color: #888; + font-size: 14px; + line-height: 18px; + .bold; + color: #afafaf; } } @@ -508,88 +517,126 @@ } .m-simple-horse { - .u-horse { + position: relative; + .u-switch { + position: absolute; + right: 10px; + top: -34px; + font-size: 14px; + color: #989898; + cursor: pointer; + } + display: grid; + justify-content: flex-start; + grid-template-columns: repeat(3, 1fr); + flex-wrap: wrap; + gap: 10px; + width: 100%; + .u-item { + display: flex; + flex-direction: column; + padding: 10px; + width: 100%; + height: 119px; + box-sizing: border-box; + background: #fff; + color: #000000; + border-radius: 10px; + .u-name { + font-size: 10px; + line-height: 13px; + color: #afafaf; + margin-bottom: 2px; + } + .u-info { + .flex; + flex-direction: column; + gap: 10px; + } + .u-chitu-info { + gap: 8px; + } + } + @media screen and (max-width: @phone) { + .u-item { + width: 100%; + } + } + @size: 25px; + .u-horse-name-wrap { + .dbi; + width: @size; + height: @size; + .u-horse-name { + .dbi; + @size: 25px; + width: @size; + height: @size; + } + .el-carousel__container { + height: @size; + } + } + .u-img-list { .flex; - flex-wrap: wrap; - gap: 20px 18px; - margin-top: 20px; - overflow-x: hidden; - overflow-y: auto; - max-height: 280px; + gap: 4px; + width: 113px; + overflow-y: hidden; + overflow-x: auto; .scrollbar(2px); - .u-item { - flex: none; - display: flex; - justify-content: space-between; - padding: 10px; - gap: 13px; - box-sizing: border-box; - width: 200px; - height: 80px; - background: #fff; - color: #000000; - border-radius: 10px; - } - @media screen and (max-width: @phone) { - .u-item { - width: 100%; + a { + .dbi; + .size(@size); + :hover { + background-color: #eee; } } - .u-horse-name-wrap { - flex: none; - width: 60px; - height: 100%; - .el-carousel__container { - height: 60px; - } - .u-img-list { - width: 60px; - a { - .dbi; - width: 100%; - height: 100%; - :hover { - background-color: #eee; - } - } - .u-image { - width: 60px; - height: 60px; - } - } + .u-image { + width: @size; + height: @size; + .r(5px); } - .u-times-info { - .flex; - flex-direction: column; - // justify-content: space-between; - align-items: flex-end; - height: 60px; - .u-map-name { - font-weight: 700; - font-size: 15px; - line-height: 30px; - } - .u-times { - font-weight: 400; - font-size: 14px; - line-height: 24px; - text-align: right; - &.is-exist { - line-height: 14px; - } - } - .u-times-lately { - color: #fba524; - } - i { - margin-right: 5px; - cursor: pointer; - } - .is-exist { - font-size: 12px; - } + @media screen and(max-width:@phone) { + .w(98px); } } + .u-times-info { + .flex; + flex-direction: column; + // justify-content: space-between; + align-items: flex-end; + height: 60px; + } + .u-map-name { + font-weight: 700; + font-size: 12px; + line-height: 16px; + } + .u-times-chitu { + .flex; + gap: 5px; + align-items: center; + font-size: 12px; + color: #afafaf; + } + .u-times { + font-size: 14px; + font-weight: 700; + } + .u-no { + color: #afafaf; + font-size: 12px; + height: 58px; + line-height: 58px; + text-align: center; + } + .u-times-lately { + color: #fba524; + } + i { + margin-left: 5px; + cursor: pointer; + } } // 公告新闻 @@ -670,4 +717,50 @@ } } } + + // 家园声望 + + .m-simple-reputation { + display: flex; + flex-direction: column; + justify-content: flex-start; + align-items: flex-start; + padding: 10px; + gap: 10px; + margin-bottom: 10px; + + .w(100%); + height: 119px; + box-sizing: border-box; + + background: #ffffff; + border-radius: 10px; + flex: none; + font-size: 14px; + line-height: 18px; + color: #000000; + .u-reputation-title { + font-size: 14px; + line-height: 18px; + .bold; + color: #afafaf; + } + + .m-reputations { + display: grid; + grid-template-columns: repeat(4, 1fr); + gap: 10px; + width: 100%; + .h(71px); + .u-reputation { + box-sizing: border-box; + padding: 10px; + background-color: #f6f6f6; + font-size: 14px; + line-height: 18px; + color: #000; + .r(10px); + } + } + } } diff --git a/src/components/gonggao/Daily.vue b/src/components/gonggao/Daily.vue index baa772eb2..5ee5109c5 100644 --- a/src/components/gonggao/Daily.vue +++ b/src/components/gonggao/Daily.vue @@ -25,13 +25,9 @@
-
园宅会赛
-
- -
-
- -
+
家园
+ +
抓马播报
@@ -49,6 +45,7 @@ import SimpleServer from "./daily/SimpleServer.vue"; import SimpleDaily from "./daily/SimpleDaily.vue"; import SimpleWeek from "./daily/SimpleWeek.vue"; import SimpleCelebrity from "./daily/SimpleCelebrity.vue"; +import SimpleReputation from "./daily/SimpleReputation.vue"; import SimpleFurniture from "./daily/SimpleFurniture.vue"; import SimpleHorse from "./daily/SimpleHorse.vue"; import dailyKeys from "@/assets/data/daily_keys.json"; @@ -58,6 +55,7 @@ export default { SimpleNotice, SimpleServer, SimpleDaily, + SimpleReputation, SimpleCelebrity, SimpleWeek, SimpleFurniture, diff --git a/src/components/gonggao/daily/SimpleFurniture.vue b/src/components/gonggao/daily/SimpleFurniture.vue index 9f2f97f08..de4dfb8a2 100644 --- a/src/components/gonggao/daily/SimpleFurniture.vue +++ b/src/components/gonggao/daily/SimpleFurniture.vue @@ -1,20 +1,23 @@ @@ -26,10 +29,10 @@ export default { type: Object, required: true, }, - title : { - type: String, - default: '' - } + nextFurniture: { + type: Object, + required: true, + }, }, }; diff --git a/src/components/gonggao/daily/SimpleHorse.vue b/src/components/gonggao/daily/SimpleHorse.vue index 08f21ae3b..b34f77e3e 100644 --- a/src/components/gonggao/daily/SimpleHorse.vue +++ b/src/components/gonggao/daily/SimpleHorse.vue @@ -1,54 +1,134 @@ @@ -66,6 +146,8 @@ export default { return { noList: [], list: [], + // 固定三大马场 + defaultList: [], params: { pageIndex: 1, pageSize: 50, @@ -85,6 +167,8 @@ export default { time: "", }, chituLoading: false, + listIndex: 0, + remainNum: 2, // 第一页还能展示几个播报 }; }, computed: { @@ -101,6 +185,9 @@ export default { server() { return this.$store.state.server; }, + defaultKeys() { + return Object.values(this.chituMap); + }, }, watch: { server: { @@ -115,9 +202,11 @@ export default { }, }, methods: { + switchList() { + this.listIndex = ~~!this.listIndex; + }, loadChituData() { const server = this.server; - console.log(server); // 周二7点到下周一7点为一个CD, 7天内随机刷一只,地图为黑戈壁、阴山大草原、鲲鹏岛 this.chituLoading = true; getChituHorse(server) @@ -126,17 +215,6 @@ export default { if (!list.length) { return; } - // // 最近刷新时间 - // const created_at = dayjs.tz(list?.[0].created_at); - // // 本周时间 - // const weekTime = [dayjs.tz().startOf("isoWeek"), dayjs.tz().endOf("isoWeek")]; - // // 本CD时间 - // const cdTime = [ - // dayjs.tz(weekTime[0]).add(1, "day").add(7, "hour"), - // dayjs.tz(weekTime[1]).add(1, "day").add(7, "hour"), - // ]; - // // 本cd是否刷新 - // const isBetween = dayjs.tz(created_at).isBetween(cdTime[0], cdTime[1]); // 最近刷新时间 const created_at = dayjs.tz(list?.[0].created_at || dayjs.tz()); @@ -191,8 +269,8 @@ export default { // 预测 mapId = String(item.map_id); mapName = item.map_name; - coordinates = horseSites[mapId].coordinates; - horses = horseSites[mapId].horses[item.horseIndex]; + coordinates = item.horseIndex !== -1 ? horseSites[mapId].coordinates : []; + horses = item.horseIndex !== -1 ? horseSites[mapId].horses[item.horseIndex] : []; } else { // 播报 mapName = item.content.match(/在(\S*)出没/) ? item.content.match(/在(\S*)出没/)[1] : ""; @@ -204,14 +282,16 @@ export default { } } } - const coor = coordinates[0]; - result[mapId] = [ - { - content: `${horses.join()} + const coor = coordinates?.[0]; + result[mapId] = coor + ? [ + { + content: `${horses.join()}
坐标:(${coor.x},${coor.y},${coor.z})`, - ...coor, - }, - ]; + ...coor, + }, + ] + : []; const obj = { mapDatas: result, map_id: mapId, @@ -255,12 +335,20 @@ export default { minute: minute, horseIndex: index, }); + } else { + newThreeList.push({ + map_name: item.map_name, + id: index ? Number(index + item.id.toString()) : item.id, + subtype: item.subtype, + map_id: item.map_id, + horseIndex: -1, // 没有马驹 + }); } } }); }); const newList = newThreeList.concat(bList); - this.list = newList + const allList = newList .map((item) => { let fromTime = ""; let toTime = ""; @@ -285,6 +373,17 @@ export default { .sort(function (a, b) { return dayjs.tz(b.created_at).valueOf() - dayjs.tz(a.created_at).valueOf(); }); + this.list = allList.filter( + (item) => item.subtype !== "npc_chat" && !this.defaultKeys.includes(item.map_name) + ); + this.defaultList = this.defaultKeys.map((name) => { + const item = allList.find((item) => item.map_name === name) || { + map_name: name, + id: name, + horses: [], + }; + return item; + }); }); }, }, diff --git a/src/components/gonggao/daily/SimpleReputation.vue b/src/components/gonggao/daily/SimpleReputation.vue new file mode 100644 index 000000000..5f4b44af3 --- /dev/null +++ b/src/components/gonggao/daily/SimpleReputation.vue @@ -0,0 +1,51 @@ + + + + + diff --git a/src/components/gonggao/daily/SimpleWeek.vue b/src/components/gonggao/daily/SimpleWeek.vue index 32124edd2..49c557a51 100644 --- a/src/components/gonggao/daily/SimpleWeek.vue +++ b/src/components/gonggao/daily/SimpleWeek.vue @@ -52,8 +52,9 @@ export default { }, methods: { getItem(val) { - if (val.indexOf("英雄") > -1) { - return val.split("英雄")[1]; + const str = "英雄"; + if (val.indexOf(str) > -1) { + return val.split(str)[1]; } return val; },