ea6ae8d7fc
修复个人主页的响应式布局问题，优化移动端显示效果 调整分类和排序区域的样式，移除不必要的margin-left 更新投票组件的内容显示类名为one-line-display-v2 修复主页加载逻辑，优化数据获取和分页处理 移除未使用的代码和注释，清理CSS样式
86 lines
4.1 KiB
JavaScript
86 lines
4.1 KiB
JavaScript
// my-component.js
|
||
// 引入全局 Vue 对象（因在 HTML 中通过 script 引入，Vue 已挂载到 window）
|
||
const { defineComponent, ref, defineAsyncComponent } = Vue;
|
||
|
||
const itemBottom = defineAsyncComponent(() => import(withVer("../item-bottom/item-bottom.js")).then((m) => m.itemBottom));
|
||
const itemHead = defineAsyncComponent(() => import(withVer("../item-head/item-head.js")).then((m) => m.itemHead));
|
||
|
||
// 定义组件（直接使用模板）
|
||
export const itemVote = defineComponent({
|
||
name: "item-vote",
|
||
props: {
|
||
itemdata: {
|
||
type: Object,
|
||
default: () => {},
|
||
},
|
||
page: {
|
||
type: String,
|
||
default: "",
|
||
},
|
||
},
|
||
|
||
setup(props) {
|
||
// 处理 截止时间
|
||
const handleDeadline = (dateTimeStamp = "") => {
|
||
if (typeof dateTimeStamp == "number") dateTimeStamp = dateTimeStamp ? dateTimeStamp * 1000 : null;
|
||
if (typeof dateTimeStamp == "string" && dateTimeStamp.match(/^\d{4}-\d{2}-\d{2}$/)) dateTimeStamp += " 23:59:59";
|
||
const timestamp = new Date(dateTimeStamp.replace(/-/g, "/")).getTime();
|
||
const now = Date.now();
|
||
const diffValue = timestamp - now;
|
||
|
||
if (diffValue < 0) return null;
|
||
|
||
const units = [
|
||
{
|
||
value: 24 * 60 * 60 * 1000,
|
||
unit: "天",
|
||
},
|
||
{
|
||
value: 60 * 60 * 1000,
|
||
unit: "小时",
|
||
},
|
||
{
|
||
value: 60 * 1000,
|
||
unit: "分钟",
|
||
},
|
||
{
|
||
value: 1000,
|
||
unit: "秒",
|
||
},
|
||
];
|
||
|
||
for (const { value, unit } of units) {
|
||
if (diffValue >= value) {
|
||
return {
|
||
num: Math.round(diffValue / value),
|
||
unit,
|
||
};
|
||
}
|
||
}
|
||
return {
|
||
num: 0,
|
||
unit: "秒",
|
||
};
|
||
};
|
||
|
||
let item = ref({ ...props.itemdata });
|
||
item.value["time"] = handleDeadline(item.value.data.deadline);
|
||
item.value["url"] = "/details/" + item.value.uniqid;
|
||
const option = item.value.data.option || [];
|
||
item.value["isvote"] = option.some((item) => item.selected == 1);
|
||
|
||
let valueUrl = ref("");
|
||
const valueA = document.querySelector(".valueA");
|
||
valueUrl.value = valueA.innerText;
|
||
|
||
return { valueUrl, item };
|
||
},
|
||
|
||
components: {
|
||
itemBottom,
|
||
itemHead,
|
||
},
|
||
|
||
template: `<div class="item-box item-vote"> <item-head :itemdata="item" :page="page"></item-head> <a class="title" :href="item.url" target="_blank">{{ item.title }}</a> <a class="message one-line-display-v2" v-if="item.content">{{ item.content }}</a> <a class="info flexacenter" target="_blank" :href="item.url"> <template v-if="item?.data.status == 1"> <div class="status">进行中</div> <div class="line"></div> <div class="num">{{ item?.time.num }}</div>{{ item.time.unit }}后结束 </template> <div v-else class="status end">已结束</div> <div class="line"></div> <div class="num">{{ item?.data?.votes }}</div>人参与 </a> <a class="list" :class="{ 'voted': !item.time || item.isvote }" target="_blank" :href="item.url"> <div class="list-item flexcenter " v-for="(item, index) in item?.data?.option" :key="index"> <div class="list-top flexacenter"> <img v-if="item.selected" class="list-tick" :src="valueUrl + '/img/vote-tick.svg'"> <div v-else class="list-serial flexcenter">{{ index + 1 }}</div> <div class="list-text one-line-display flex1">{{ item.value }}</div> </div> <div class="list-bottom flexacenter"> <div class="list-length" :style="{ width: item.percentage + '%' }"></div>{{ item.count }} </div> </div> </a> <item-bottom :itemdata="item" :page="page"></item-bottom></div>`,
|
||
});
|