refactor(components): 使用defineAsyncComponent优化异步组件加载
fix(public.js): 添加getScriptParameter函数并处理请求参数 style(index.html): 移除多余空行和注释 perf(bi.js): 移除冗余ajax方法并优化请求参数处理 docs(sign-in.txt): 调整样式和响应式布局
This commit is contained in:
DESKTOP-RQ919RC\Pc
@@ -194,8 +194,18 @@ class BiCard extends HTMLElement {
|
||||
console.log(`用户卡片 ${this.getAttribute("username")} 已卸载`);
|
||||
}
|
||||
|
||||
getScriptParameter(paramName) {
|
||||
const currentScript = document.currentScript;
|
||||
if (currentScript && currentScript.src) {
|
||||
const url = new URL(currentScript.src, window.location.origin);
|
||||
return url.searchParams.get(paramName);
|
||||
}
|
||||
return null;
|
||||
}
|
||||
|
||||
fetchData(url, data) {
|
||||
return new Promise((resolve, reject) => {
|
||||
if (data) data["v"] = this.getScriptParameter("v") || "v2";
|
||||
var xhr = new XMLHttpRequest();
|
||||
xhr.responseType = "json";
|
||||
xhr.withCredentials = true;
|
||||
@@ -218,6 +228,9 @@ class BiCard extends HTMLElement {
|
||||
|
||||
fetchGetData(url) {
|
||||
return new Promise((resolve, reject) => {
|
||||
const paramSymbol = url.includes("?") ? "&" : "?";
|
||||
url = `${url}${paramSymbol}v=${this.getScriptParameter("v") || "v2"}`;
|
||||
|
||||
const xhr = new XMLHttpRequest();
|
||||
xhr.withCredentials = true;
|
||||
|
||||
@@ -234,64 +247,6 @@ class BiCard extends HTMLElement {
|
||||
xhr.send();
|
||||
});
|
||||
}
|
||||
|
||||
$ajax(url) {
|
||||
var data = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : {};
|
||||
return new Promise(function (resolve, reject) {
|
||||
axios
|
||||
.post(url, data, {
|
||||
emulateJSON: true,
|
||||
withCredentials: true,
|
||||
})
|
||||
.then(function (res) {
|
||||
var data = typeof res.data == "string" ? JSON.parse(res.data) : res.data;
|
||||
|
||||
if (data.code == 401) {
|
||||
// 需要登录
|
||||
showWindow("login", "https://passport.gter.net/login/ajax", "get", -1, {
|
||||
cover: true,
|
||||
});
|
||||
reject();
|
||||
}
|
||||
resolve(data);
|
||||
})
|
||||
.catch((err) => {
|
||||
if (err.response.status == 401)
|
||||
showWindow("login", "https://passport.gter.net/login/ajax", "get", -1, {
|
||||
cover: true,
|
||||
});
|
||||
});
|
||||
});
|
||||
}
|
||||
|
||||
$ajaxget(url) {
|
||||
var data = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : {};
|
||||
return new Promise(function (resolve, reject) {
|
||||
axios
|
||||
.get(
|
||||
url,
|
||||
{},
|
||||
{
|
||||
emulateJSON: true,
|
||||
withCredentials: true,
|
||||
}
|
||||
)
|
||||
.then(function (res) {
|
||||
var data = typeof res.data == "string" ? JSON.parse(res.data) : res.data;
|
||||
if (data.code == 401) {
|
||||
// 需要登录
|
||||
showWindow("login", "https://passport.gter.net/login/ajax", "get", -1, {
|
||||
cover: true,
|
||||
});
|
||||
reject();
|
||||
}
|
||||
resolve(data);
|
||||
})
|
||||
.catch((error) => {
|
||||
reject(error);
|
||||
});
|
||||
});
|
||||
}
|
||||
}
|
||||
|
||||
// 3. 注册组件（确保只注册一次）
|
||||
|
||||
@@ -19,6 +19,7 @@ export const headTop = defineComponent({
|
||||
let isPaused = ref(false); // 是否暂停轮播
|
||||
|
||||
onMounted(() => {
|
||||
console.log("getScriptParameter", getScriptParameter("v"));
|
||||
getHistorySearch();
|
||||
// 写一个函数 ，判断本地缓存有没有 wConfig 并判断 是否过一天 如果过了一天 则更新 wConfig
|
||||
checkWConfig();
|
||||
|
||||
@@ -1,151 +1,151 @@
|
||||
// my-component.js
|
||||
// 引入全局 Vue 对象（因在 HTML 中通过 script 引入，Vue 已挂载到 window）
|
||||
const { defineComponent, ref, inject } = Vue;
|
||||
const { defineComponent, ref, inject, defineAsyncComponent } = Vue;
|
||||
|
||||
const { like } = await import(withVer("../like/like.js"));
|
||||
const like = defineAsyncComponent(() => import(withVer("../like/like.js")).then(m => m.like));
|
||||
|
||||
// 定义组件（直接使用模板）
|
||||
export const itemBottom = defineComponent({
|
||||
name: "item-bottom",
|
||||
props: {
|
||||
itemdata: {
|
||||
type: Object,
|
||||
default: () => {},
|
||||
props: {
|
||||
itemdata: {
|
||||
type: Object,
|
||||
default: () => {},
|
||||
},
|
||||
},
|
||||
},
|
||||
|
||||
setup(props) {
|
||||
let item = ref({ ...props.itemdata });
|
||||
setup(props) {
|
||||
let item = ref({ ...props.itemdata });
|
||||
|
||||
let isLogin = inject("isLogin");
|
||||
let userInfoWin = inject("userInfoWin");
|
||||
let realname = inject("realname");
|
||||
let goLogin = inject("goLogin");
|
||||
let openAttest = inject("openAttest");
|
||||
let isLogin = inject("isLogin");
|
||||
let userInfoWin = inject("userInfoWin");
|
||||
let realname = inject("realname");
|
||||
let goLogin = inject("goLogin");
|
||||
let openAttest = inject("openAttest");
|
||||
|
||||
let isLikeGif = ref(false);
|
||||
let isLikeGif = ref(false);
|
||||
|
||||
let cancelOperate = inject("cancelOperate");
|
||||
let cancelOperate = inject("cancelOperate");
|
||||
|
||||
const likeClick = () => {
|
||||
if (realname.value == 0 && userInfoWin.value?.uin > 0) {
|
||||
openAttest();
|
||||
return;
|
||||
}
|
||||
const likeClick = () => {
|
||||
if (realname.value == 0 && userInfoWin.value?.uin > 0) {
|
||||
openAttest();
|
||||
return;
|
||||
}
|
||||
|
||||
if (!isLogin.value) {
|
||||
goLogin();
|
||||
return;
|
||||
}
|
||||
if (!isLogin.value) {
|
||||
goLogin();
|
||||
return;
|
||||
}
|
||||
|
||||
const token = item.value.token || "";
|
||||
const token = item.value.token || "";
|
||||
|
||||
if (["offer", "offer_summary", "interviewexperience"].includes(item.value["type"]) && item.value["is_like"]) {
|
||||
creationAlertBox("error", "不可取消点赞");
|
||||
return;
|
||||
}
|
||||
if (["offer", "offer_summary", "interviewexperience"].includes(item.value["type"]) && item.value["is_like"]) {
|
||||
creationAlertBox("error", "不可取消点赞");
|
||||
return;
|
||||
}
|
||||
|
||||
ajax(`/v2/api/forum/postTopicLike`, {
|
||||
token,
|
||||
})
|
||||
.then((res) => {
|
||||
if (res.code != 200) {
|
||||
creationAlertBox("error", res.message);
|
||||
return;
|
||||
}
|
||||
|
||||
let data = res.data;
|
||||
creationAlertBox("success", res.message);
|
||||
|
||||
item.value["is_like"] = data.status;
|
||||
item.value["likes"] = data.likes;
|
||||
|
||||
if (data.status) {
|
||||
isLikeGif.value = true;
|
||||
setTimeout(() => (isLikeGif.value = false), 2000);
|
||||
}
|
||||
|
||||
if (data.status == 0) cancelOperate("like", token);
|
||||
|
||||
// wx.hideLoading();
|
||||
ajax(`/v2/api/forum/postTopicLike`, {
|
||||
token,
|
||||
})
|
||||
.catch(() => {});
|
||||
};
|
||||
.then((res) => {
|
||||
if (res.code != 200) {
|
||||
creationAlertBox("error", res.message);
|
||||
return;
|
||||
}
|
||||
|
||||
const collectClick = () => {
|
||||
if (!isLogin.value) {
|
||||
goLogin();
|
||||
return;
|
||||
}
|
||||
let data = res.data;
|
||||
creationAlertBox("success", res.message);
|
||||
|
||||
const token = item.value.token || "";
|
||||
item.value["is_like"] = data.status;
|
||||
item.value["likes"] = data.likes;
|
||||
|
||||
ajax(`/v2/api/forum/postTopicCollect`, {
|
||||
token,
|
||||
})
|
||||
.then((res) => {
|
||||
if (res.code != 200) {
|
||||
creationAlertBox("error", res.message);
|
||||
return;
|
||||
}
|
||||
if (data.status) {
|
||||
isLikeGif.value = true;
|
||||
setTimeout(() => (isLikeGif.value = false), 2000);
|
||||
}
|
||||
|
||||
if (data.status == 0) cancelOperate("like", token);
|
||||
|
||||
// wx.hideLoading();
|
||||
})
|
||||
.catch(() => {});
|
||||
};
|
||||
|
||||
const collectClick = () => {
|
||||
if (!isLogin.value) {
|
||||
goLogin();
|
||||
return;
|
||||
}
|
||||
|
||||
const token = item.value.token || "";
|
||||
|
||||
ajax(`/v2/api/forum/postTopicCollect`, {
|
||||
token,
|
||||
})
|
||||
.then((res) => {
|
||||
if (res.code != 200) {
|
||||
creationAlertBox("error", res.message);
|
||||
return;
|
||||
}
|
||||
const data = res.data || {};
|
||||
|
||||
item.value["is_collect"] = data.status;
|
||||
item.value["collections"] = data.collections;
|
||||
creationAlertBox("success", res.message);
|
||||
// 调用父组件的方法
|
||||
if (data.status == 0) cancelOperate("collection", token);
|
||||
})
|
||||
.catch((err) => {
|
||||
if (err?.code == 401) goLogin();
|
||||
});
|
||||
};
|
||||
|
||||
const copyLinkClick = () => {
|
||||
copyForumUid(`${location.origin}/details/${item.value.uniqid}`);
|
||||
};
|
||||
|
||||
let QRcode = ref("");
|
||||
const showQRcode = () => {
|
||||
if (QRcode.value) return;
|
||||
// return
|
||||
ajaxGet(`/v2/api/forum/getQrcode?token=${item.value.token}`).then((res) => {
|
||||
if (res.code != 200) return;
|
||||
const data = res.data || {};
|
||||
|
||||
item.value["is_collect"] = data.status;
|
||||
item.value["collections"] = data.collections;
|
||||
creationAlertBox("success", res.message);
|
||||
// 调用父组件的方法
|
||||
if (data.status == 0) cancelOperate("collection", token);
|
||||
})
|
||||
.catch((err) => {
|
||||
if (err?.code == 401) goLogin();
|
||||
QRcode.value = data.url || "";
|
||||
});
|
||||
};
|
||||
};
|
||||
|
||||
const copyLinkClick = () => {
|
||||
copyForumUid(`${location.origin}/details/${item.value.uniqid}`);
|
||||
};
|
||||
let isright = ref(false);
|
||||
|
||||
let QRcode = ref("");
|
||||
const showQRcode = () => {
|
||||
if (QRcode.value) return;
|
||||
// return
|
||||
ajaxGet(`/v2/api/forum/getQrcode?token=${item.value.token}`).then((res) => {
|
||||
if (res.code != 200) return;
|
||||
const data = res.data || {};
|
||||
QRcode.value = data.url || "";
|
||||
});
|
||||
};
|
||||
const share = () => {
|
||||
const token = item.value.token || "";
|
||||
ajax(`/v2/api/forum/postTopicShare`, { token });
|
||||
|
||||
let isright = ref(false);
|
||||
if (!shareBoxRef.value) return;
|
||||
|
||||
const share = () => {
|
||||
const token = item.value.token || "";
|
||||
ajax(`/v2/api/forum/postTopicShare`, { token });
|
||||
// 1. 获取元素相对于可视窗口的位置信息
|
||||
const rect = shareBoxRef.value.getBoundingClientRect();
|
||||
|
||||
if (!shareBoxRef.value) return
|
||||
// 2. 获取可视窗口宽度（不包含滚动条，更准确）
|
||||
const clientWidth = document.documentElement.clientWidth;
|
||||
|
||||
// 1. 获取元素相对于可视窗口的位置信息
|
||||
const rect = shareBoxRef.value.getBoundingClientRect();
|
||||
// 3. 计算距离：可视窗口宽度 - 元素右边缘到左边缘的距离
|
||||
const distance = clientWidth - rect.right;
|
||||
console.log("distance", distance);
|
||||
|
||||
// 2. 获取可视窗口宽度（不包含滚动条，更准确）
|
||||
const clientWidth = document.documentElement.clientWidth;
|
||||
if (distance < 140) isright.value = true;
|
||||
else isright.value = false;
|
||||
};
|
||||
|
||||
// 3. 计算距离：可视窗口宽度 - 元素右边缘到左边缘的距离
|
||||
const distance = clientWidth - rect.right;
|
||||
console.log('distance', distance);
|
||||
const shareBoxRef = ref(null);
|
||||
|
||||
if (distance < 140) isright.value = true;
|
||||
else isright.value = false;
|
||||
};
|
||||
return { isright, shareBoxRef, share, QRcode, showQRcode, copyLinkClick, collectClick, item, likeClick, isLogin, isLikeGif };
|
||||
},
|
||||
|
||||
const shareBoxRef = ref(null);
|
||||
components: {
|
||||
like,
|
||||
},
|
||||
|
||||
return { isright, shareBoxRef, share, QRcode, showQRcode, copyLinkClick, collectClick, item, likeClick, isLogin, isLikeGif };
|
||||
},
|
||||
|
||||
components: {
|
||||
like,
|
||||
},
|
||||
|
||||
template: `<a class="comment flexacenter" v-if="item?.commentreviews && !Array.isArray(item?.commentreviews)" :href="item.url" target="_blank"> <img class="icon" :src="item?.commentreviews?.avatar" /> <div class="text one-line-display">{{ item?.commentreviews?.content || "[图]" }}</div></a><template v-if="item.comment_list?.length != 0"> <a class="comment flexacenter" style="margin-bottom: 15px" v-for="(item, index) in item.comment_list" :key="index" :href="item.url" target="_blank"> <img class="icon" :src="item.avatar" /> <div class="text one-line-display">{{ item.content || "[图]" }}</div> </a></template><div class="bottom flexacenter"> <div class="bottom-item like flexacenter" @click="likeClick()" v-if="item?.type != 'tenement'"> <img v-if="item.is_like" class="icon" src="/img/like-red-icon.png" /> <img v-else class="icon" src="/img/like-icon.png" /> <div class="text">{{ item.likes || "赞" }}</div> </div> <div class="bottom-item flexacenter" @click="collectClick()"> <img v-if="item.is_collect" class="icon" src="/img/collect-golden.svg" /> <img v-else class="icon" src="/img/collect-gray.png" /> <div class="text">{{ item.collections || "收藏" }}</div> </div> <a class="bottom-item flexacenter" v-if="item?.type != 'tenement'" :href="'/details/' + item.uniqid" target="_blank"> <img class="icon" src="/img/discuss-icon.png" /> <div class="text">{{ item.comments || "讨论" }}</div> </a> <a class="bottom-item flexacenter" v-if="item?.type != 'tenement'" :href="'/details/' + item.uniqid" target="_blank"> <img class="icon" src="/img/bi-copper-icon.png" /> <div class="text">{{ item.coins || "投币" }}</div> </a> <!-- 鼠标移入事件 --> <div class="bottom-item share flexacenter" @mouseenter="share"> <img class="icon" src="/img/share-gray.png" style="width: 19px; height: 19px;" /> <div class="text">{{ item.shares || '转发'}}</div> <div class="share-box flexcenter" ref="shareBoxRef"> <div class="share-item flexcenter" @click="copyLinkClick()"> <img class="share-icon" src="/img/copy-black-icon.png" /> <div class="text">复制链接</div> </div> <!-- 鼠标移入 加载二维码 --> <div class="share-item wenxin flexcenter" @mouseenter="showQRcode"> <img class="share-icon" src="/img/weixin-icon.png" /> <div class="text">微信转发</div> <div class="QRcode-box flexcenter" :class="{'right': isright}"> <img v-if="QRcode" class="QRcode" :src="QRcode" /> <div v-else class="QRcode flexcenter"> <img class="load" src="/img/load-icon.svg" /> </div> <div class="text">微信扫码</div> </div> </div> </div> </div></div><like v-if="isLikeGif"></like>`,
|
||||
template: `<a class="comment flexacenter" v-if="item?.commentreviews && !Array.isArray(item?.commentreviews)" :href="item.url" target="_blank"> <img class="icon" :src="item?.commentreviews?.avatar" /> <div class="text one-line-display">{{ item?.commentreviews?.content || "[图]" }}</div></a><template v-if="item.comment_list?.length != 0"> <a class="comment flexacenter" style="margin-bottom: 15px" v-for="(item, index) in item.comment_list" :key="index" :href="item.url" target="_blank"> <img class="icon" :src="item.avatar" /> <div class="text one-line-display">{{ item.content || "[图]" }}</div> </a></template><div class="bottom flexacenter"> <div class="bottom-item like flexacenter" @click="likeClick()" v-if="item?.type != 'tenement'"> <img v-if="item.is_like" class="icon" src="/img/like-red-icon.png" /> <img v-else class="icon" src="/img/like-icon.png" /> <div class="text">{{ item.likes || "赞" }}</div> </div> <div class="bottom-item flexacenter" @click="collectClick()"> <img v-if="item.is_collect" class="icon" src="/img/collect-golden.svg" /> <img v-else class="icon" src="/img/collect-gray.png" /> <div class="text">{{ item.collections || "收藏" }}</div> </div> <a class="bottom-item flexacenter" v-if="item?.type != 'tenement'" :href="'/details/' + item.uniqid" target="_blank"> <img class="icon" src="/img/discuss-icon.png" /> <div class="text">{{ item.comments || "讨论" }}</div> </a> <a class="bottom-item flexacenter" v-if="item?.type != 'tenement'" :href="'/details/' + item.uniqid" target="_blank"> <img class="icon" src="/img/bi-copper-icon.png" /> <div class="text">{{ item.coins || "投币" }}</div> </a> <!-- 鼠标移入事件 --> <div class="bottom-item share flexacenter" @mouseenter="share"> <img class="icon" src="/img/share-gray.png" style="width: 19px; height: 19px;" /> <div class="text">{{ item.shares || '转发'}}</div> <div class="share-box flexcenter" ref="shareBoxRef"> <div class="share-item flexcenter" @click="copyLinkClick()"> <img class="share-icon" src="/img/copy-black-icon.png" /> <div class="text">复制链接</div> </div> <!-- 鼠标移入 加载二维码 --> <div class="share-item wenxin flexcenter" @mouseenter="showQRcode"> <img class="share-icon" src="/img/weixin-icon.png" /> <div class="text">微信转发</div> <div class="QRcode-box flexcenter" :class="{'right': isright}"> <img v-if="QRcode" class="QRcode" :src="QRcode" /> <div v-else class="QRcode flexcenter"> <img class="load" src="/img/load-icon.svg" /> </div> <div class="text">微信扫码</div> </div> </div> </div> </div></div><like v-if="isLikeGif"></like>`,
|
||||
});
|
||||
|
||||
@@ -1,9 +1,11 @@
|
||||
// my-component.js
|
||||
// 引入全局 Vue 对象（因在 HTML 中通过 script 引入，Vue 已挂载到 window）
|
||||
const { defineComponent, ref } = Vue;
|
||||
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));
|
||||
|
||||
const { itemBottom } = await import(withVer("../item-bottom/item-bottom.js"));
|
||||
const { itemHead } = await import(withVer("../item-head/item-head.js"));
|
||||
// const { itemBottom } = await import(withVer("../item-bottom/item-bottom.js"));
|
||||
// const { itemHead } = await import(withVer("../item-head/item-head.js"));
|
||||
|
||||
// 定义组件（直接使用模板）
|
||||
export const itemForum = defineComponent({
|
||||
@@ -27,7 +29,7 @@ export const itemForum = defineComponent({
|
||||
|
||||
let item = ref({ ...res });
|
||||
|
||||
item.value['url'] = '/details/' + item.value.uniqid;
|
||||
item.value["url"] = "/details/" + item.value.uniqid;
|
||||
|
||||
return { item };
|
||||
},
|
||||
|
||||
@@ -1,8 +1,9 @@
|
||||
// my-component.js
|
||||
// 引入全局 Vue 对象（因在 HTML 中通过 script 引入，Vue 已挂载到 window）
|
||||
const { defineComponent, ref, provide, onMounted, inject } = Vue;
|
||||
const { defineComponent, ref, provide, onMounted, inject, defineAsyncComponent } = Vue;
|
||||
|
||||
const { report } = await import(withVer("../report/report.js"));
|
||||
// const { report } = await import(withVer("../report/report.js"));
|
||||
const report = defineAsyncComponent(() => import(withVer("../report/report.js")).then((m) => m.report));
|
||||
|
||||
// 定义组件（直接使用模板）
|
||||
export const itemHead = defineComponent({
|
||||
|
||||
@@ -1,9 +1,11 @@
|
||||
// my-component.js
|
||||
// 引入全局 Vue 对象（因在 HTML 中通过 script 引入，Vue 已挂载到 window）
|
||||
const { defineComponent, ref } = Vue;
|
||||
const { defineComponent, ref, defineAsyncComponent } = Vue;
|
||||
|
||||
const { itemBottom } = await import(withVer("../item-bottom/item-bottom.js"));
|
||||
const { itemHead } = await import(withVer("../item-head/item-head.js"));
|
||||
// const { itemBottom } = await import(withVer("../item-bottom/item-bottom.js"));
|
||||
// const { itemHead } = await import(withVer("../item-head/item-head.js"));
|
||||
const itemHead = defineAsyncComponent(() => import(withVer("../item-head/item-head.js")).then((m) => m.itemHead));
|
||||
const itemBottom = defineAsyncComponent(() => import(withVer("../item-bottom/item-bottom.js")).then((m) => m.itemHead));
|
||||
|
||||
// 定义组件（直接使用模板）
|
||||
export const itemMj = defineComponent({
|
||||
@@ -21,7 +23,7 @@ export const itemMj = defineComponent({
|
||||
|
||||
setup(props) {
|
||||
let item = ref({ ...props.itemdata });
|
||||
item.value['url'] = '/details/' + item.value.uniqid;
|
||||
item.value["url"] = "/details/" + item.value.uniqid;
|
||||
return { item };
|
||||
},
|
||||
|
||||
|
||||
@@ -1,9 +1,9 @@
|
||||
// my-component.js
|
||||
// 引入全局 Vue 对象（因在 HTML 中通过 script 引入，Vue 已挂载到 window）
|
||||
const { defineComponent, ref, provide } = Vue;
|
||||
const { defineComponent, ref, provide, defineAsyncComponent } = Vue;
|
||||
|
||||
const { itemBottom } = await import(withVer("../item-bottom/item-bottom.js"));
|
||||
const { itemHead } = await import(withVer("../item-head/item-head.js"));
|
||||
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 itemOffer = defineComponent({
|
||||
|
||||
@@ -1,9 +1,9 @@
|
||||
// my-component.js
|
||||
// 引入全局 Vue 对象（因在 HTML 中通过 script 引入，Vue 已挂载到 window）
|
||||
const { defineComponent, ref } = Vue;
|
||||
const { defineComponent, ref, defineAsyncComponent } = Vue;
|
||||
|
||||
const { itemBottom } = await import(withVer("../item-bottom/item-bottom.js"));
|
||||
const { itemHead } = await import(withVer("../item-head/item-head.js"));
|
||||
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 itemSummary = defineComponent({
|
||||
|
||||
@@ -1,9 +1,9 @@
|
||||
// my-component.js
|
||||
// 引入全局 Vue 对象（因在 HTML 中通过 script 引入，Vue 已挂载到 window）
|
||||
const { defineComponent, ref } = Vue;
|
||||
const { defineComponent, ref, defineAsyncComponent } = Vue;
|
||||
|
||||
const { itemBottom } = await import(withVer("../item-bottom/item-bottom.js"));
|
||||
const { itemHead } = await import(withVer("../item-head/item-head.js"));
|
||||
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 itemTenement = defineComponent({
|
||||
|
||||
@@ -1,9 +1,9 @@
|
||||
// my-component.js
|
||||
// 引入全局 Vue 对象（因在 HTML 中通过 script 引入，Vue 已挂载到 window）
|
||||
const { defineComponent, ref } = Vue;
|
||||
const { defineComponent, ref, defineAsyncComponent } = Vue;
|
||||
|
||||
const { itemBottom } = await import(withVer("../item-bottom/item-bottom.js"));
|
||||
const { itemHead } = await import(withVer("../item-head/item-head.js"));
|
||||
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({
|
||||
|
||||
@@ -2,9 +2,6 @@
|
||||
// 引入全局 Vue 对象（因在 HTML 中通过 script 引入，Vue 已挂载到 window）
|
||||
const { defineComponent, ref, onMounted, nextTick } = Vue;
|
||||
|
||||
const { itemBottom } = await import(withVer("../item-bottom/item-bottom.js"));
|
||||
const { itemHead } = await import(withVer("../item-head/item-head.js"));
|
||||
|
||||
// 定义组件（直接使用模板）
|
||||
export const latestList = defineComponent({
|
||||
name: "latestList",
|
||||
@@ -85,8 +82,6 @@ export const latestList = defineComponent({
|
||||
},
|
||||
|
||||
components: {
|
||||
itemBottom,
|
||||
itemHead,
|
||||
},
|
||||
|
||||
template: `<div class="posts-box box-newest " :class="['boxtype-' + boxtype]"> <div v-if="boxtype == 'newest'" class="box-newest-head flexacenter"> <img class="icon" src="/img/newest-icon.png" alt="" /> 最新 </div> <div v-else-if="boxtype == 'essence'" class="box-newest-head flexacenter"> <img class="icon" src="/img/essence.png" alt="" /> 精华阅读 </div> <div v-else class="slideshow-box"> <div class="tab-list flexacenter"> <div class="tab-item newest" :class="{'pitch': postsTab == 'newest'}" @click="tabPostsItem('newest')">最新 </div> <div class="tab-item essence" :class="{'pitch': postsTab == 'essence'}" @click="tabPostsItem('essence')">精华 </div> </div> </div> <div class="slideshow-content flexflex"> <!-- newest 最新 --> <div class="newest-side-box side-box"> <img class="bounding" src="/img/bounding-circle-green.svg" alt="" /> <div class="box"> <template v-for="(item, index) in latestList" :key="index"> <a v-if="item.title || item.content" class="item flexacenter vuehide" :href="'/details/' + item.uniqid" target="_blank"> <div class="dot dot-green"></div> <div class="text one-line-display">{{ item.title || item.content }}</div> </a> </template> </div> </div> <!-- essence 精选 --> <div class="essence-side-box side-box"> <img class="bounding" src="/img/bounding-circle-blue.svg" alt="" /> <div class="box"> <template v-for="(item, index) in topList" :key="index"> <a v-if="item.title || item.content" class="item flexacenter vuehide" :href="'/details/' + item.uniqid" target="_blank"> <div class="dot"></div> <div class="text one-line-display">{{ item.title || item.content }}</div> </a> </template> </div> </div> </div></div>`,
|
||||
|
||||
File diff suppressed because one or more lines are too long
@@ -51,14 +51,14 @@
|
||||
|
||||
.signInBox-mask a {
|
||||
text-decoration: none;
|
||||
color: unset;
|
||||
color: unset;
|
||||
}
|
||||
|
||||
.signInBox-mask .signInBox {
|
||||
width: min(1060px, 95vw);
|
||||
width: 1060px;
|
||||
background-color: #fff;
|
||||
border-radius: 20px;
|
||||
position: relative;
|
||||
position: relative;
|
||||
filter: drop-shadow(0 -5px 0 #f7c308);
|
||||
}
|
||||
|
||||
@@ -97,19 +97,21 @@
|
||||
|
||||
.signInBox-mask .signInBox .signInBox-content {
|
||||
align-items: flex-start;
|
||||
height: auto;
|
||||
gap: 16px;
|
||||
flex-wrap: wrap;
|
||||
height: 595px;
|
||||
}
|
||||
|
||||
.signInBox-mask .signInBox .signInBox-content .left-box {
|
||||
flex: 1 1 520px;
|
||||
max-width: 560px;
|
||||
width: 50%;
|
||||
max-width: 538px;
|
||||
padding: 20px 30px 40px;
|
||||
border-right: 1px dotted #d7d7d7;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.signInBox-mask .signInBox .signInBox-content .left-box .content-header {
|
||||
width: 100%;
|
||||
font-size: 15px;
|
||||
color: #555555;
|
||||
line-height: 40px;
|
||||
@@ -144,19 +146,19 @@
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.signInBox-mask .signInBox .signInBox-content .left-box .content-header .outer-ring {
|
||||
.signInBox-mask .signInBox .signInBox-content .sign-in-box .outer-ring {
|
||||
position: absolute;
|
||||
left: calc(100% + 31px);
|
||||
top: -21px;
|
||||
left: 0;
|
||||
top: 0;
|
||||
z-index: 1;
|
||||
width: 522px;
|
||||
height: 596px;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
background-color: #fdda55;
|
||||
padding: 20px;
|
||||
border-radius: 0 0 20px 0;
|
||||
border-radius: 20px;
|
||||
}
|
||||
|
||||
.signInBox-mask .signInBox .signInBox-content .left-box .content-header .outer-ring::after {
|
||||
.signInBox-mask .signInBox .signInBox-content .sign-in-box .outer-ring::after {
|
||||
content: "";
|
||||
position: absolute;
|
||||
top: 26px;
|
||||
@@ -171,7 +173,7 @@
|
||||
border-right-color: #fdda55;
|
||||
}
|
||||
|
||||
.signInBox-mask .signInBox .signInBox-content .left-box .content-header .outer-ring .rule-box {
|
||||
.signInBox-mask .signInBox .signInBox-content .sign-in-box .outer-ring .rule-box {
|
||||
background-color: #fff;
|
||||
-moz-box-shadow: 0px 0px 3px rgba(0, 0, 0, 0.07058824);
|
||||
-webkit-box-shadow: 0px 0px 3px rgba(0, 0, 0, 0.07058824);
|
||||
@@ -182,7 +184,7 @@
|
||||
padding-bottom: 62px;
|
||||
}
|
||||
|
||||
.signInBox-mask .signInBox .signInBox-content .left-box .content-header .outer-ring .rule-box .rule-header {
|
||||
.signInBox-mask .signInBox .signInBox-content .sign-in-box .outer-ring .rule-box .rule-header {
|
||||
font-weight: 650;
|
||||
font-size: 24px;
|
||||
color: #ab8705;
|
||||
@@ -194,7 +196,7 @@
|
||||
margin-bottom: 14px;
|
||||
}
|
||||
|
||||
.signInBox-mask .signInBox .signInBox-content .left-box .content-header .outer-ring .rule-box .rule-header::after {
|
||||
.signInBox-mask .signInBox .signInBox-content .sign-in-box .outer-ring .rule-box .rule-header::after {
|
||||
content: "";
|
||||
display: block;
|
||||
position: absolute;
|
||||
@@ -208,12 +210,12 @@
|
||||
z-index: -1;
|
||||
}
|
||||
|
||||
.signInBox-mask .signInBox .signInBox-content .left-box .content-header .outer-ring .rule-box .rule-list {
|
||||
.signInBox-mask .signInBox .signInBox-content .sign-in-box .outer-ring .rule-box .rule-list {
|
||||
flex-direction: column;
|
||||
margin: 0 23px;
|
||||
}
|
||||
|
||||
.signInBox-mask .signInBox .signInBox-content .left-box .content-header .outer-ring .rule-box .rule-list .rule-item .rule-item-icon {
|
||||
.signInBox-mask .signInBox .signInBox-content .sign-in-box .outer-ring .rule-box .rule-list .rule-item .rule-item-icon {
|
||||
width: 52px;
|
||||
height: 52px;
|
||||
background-color: #f6f6f6;
|
||||
@@ -225,23 +227,23 @@
|
||||
margin-right: 30px;
|
||||
}
|
||||
|
||||
.signInBox-mask .signInBox .signInBox-content .left-box .content-header .outer-ring .rule-box .rule-list .rule-item .rule-item-img {
|
||||
.signInBox-mask .signInBox .signInBox-content .sign-in-box .outer-ring .rule-box .rule-list .rule-item .rule-item-img {
|
||||
width: 30px;
|
||||
height: 36px;
|
||||
}
|
||||
|
||||
.signInBox-mask .signInBox .signInBox-content .left-box .content-header .outer-ring .rule-box .rule-list .rule-item .rule-item-text {
|
||||
.signInBox-mask .signInBox .signInBox-content .sign-in-box .outer-ring .rule-box .rule-list .rule-item .rule-item-text {
|
||||
color: #333;
|
||||
line-height: 28px;
|
||||
font-size: 16px;
|
||||
padding: 40px 0;
|
||||
}
|
||||
|
||||
.signInBox-mask .signInBox .signInBox-content .left-box .content-header .outer-ring .rule-box .rule-list .rule-item:not(:last-of-type) .rule-item-text {
|
||||
.signInBox-mask .signInBox .signInBox-content .sign-in-box .outer-ring .rule-box .rule-list .rule-item:not(:last-of-type) .rule-item-text {
|
||||
border-bottom: 1px dotted #ebebeb;
|
||||
}
|
||||
|
||||
.signInBox-mask .signInBox .signInBox-content .left-box .content-header .outer-ring .rule-box .rule-close {
|
||||
.signInBox-mask .signInBox .signInBox-content .sign-in-box .outer-ring .rule-box .rule-close {
|
||||
font-family: "PingFangSC-Regular", "PingFang SC", sans-serif;
|
||||
font-weight: 400;
|
||||
font-style: normal;
|
||||
@@ -256,7 +258,9 @@
|
||||
|
||||
.signInBox-mask .signInBox .signInBox-content .left-box .calendar-box {
|
||||
width: 100%;
|
||||
height: auto;
|
||||
max-width: 477px;
|
||||
min-width: min-content;
|
||||
height: 479px;
|
||||
background-color: #fbfbfb;
|
||||
border-radius: 12px;
|
||||
flex-direction: column;
|
||||
@@ -281,15 +285,17 @@
|
||||
.signInBox-mask .signInBox .signInBox-content .left-box .calendar-box .calendar {
|
||||
margin: 0 0 14px;
|
||||
display: grid;
|
||||
grid-template-columns: repeat(7, minmax(32px, 1fr));
|
||||
column-gap: 12px;
|
||||
row-gap: 10px;
|
||||
grid-template-columns: repeat(7, minmax(40px, 1fr));
|
||||
justify-items: center;
|
||||
gap: 10px;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.signInBox-mask .signInBox .signInBox-content .left-box .calendar-box .calendar .calendar-item {
|
||||
width: 100%;
|
||||
aspect-ratio: 1 / 1;
|
||||
width: 40px;
|
||||
height: 40px;
|
||||
border-radius: 50%;
|
||||
margin-bottom: 10px;
|
||||
font-size: 17px;
|
||||
color: #aaaaaa;
|
||||
position: relative;
|
||||
@@ -329,7 +335,7 @@
|
||||
}
|
||||
|
||||
.signInBox-mask .signInBox .signInBox-content .left-box .calendar-box .sign-in-btn {
|
||||
min-height: 48px;
|
||||
height: 48px;
|
||||
border-radius: 219px;
|
||||
background-color: #f7c308;
|
||||
color: #fff;
|
||||
@@ -351,29 +357,16 @@
|
||||
color: #555555;
|
||||
font-size: 15px;
|
||||
flex-direction: column;
|
||||
flex: 1 1 420px;
|
||||
min-height: 320px;
|
||||
height: auto;
|
||||
overflow: auto;
|
||||
height: inherit;
|
||||
position: relative;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
@media (max-width: 768px) {
|
||||
.signInBox-mask .signInBox {
|
||||
width: 95vw;
|
||||
}
|
||||
.signInBox-mask .signInBox .signInBox-content {
|
||||
|
||||
.signInBox-mask .signInBox .signInBox-content .sign-in-box .sign-in-scroll-wrapper {
|
||||
overflow: auto;
|
||||
flex: 1;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 12px;
|
||||
}
|
||||
.signInBox-mask .signInBox .signInBox-content .left-box {
|
||||
max-width: 100%;
|
||||
border-right: none;
|
||||
border-bottom: 1px dotted #d7d7d7;
|
||||
}
|
||||
.signInBox-mask .signInBox .signInBox-content .sign-in-box {
|
||||
margin: 0;
|
||||
border-radius: 12px;
|
||||
}
|
||||
}
|
||||
|
||||
.signInBox-mask .signInBox .signInBox-content .sign-in-box .sign-in-header {
|
||||
@@ -657,6 +650,333 @@
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
@media screen and (max-width: 1200px) {
|
||||
.signInBox-mask .signInBox {
|
||||
width: 95%;
|
||||
max-width: 1060px;
|
||||
}
|
||||
}
|
||||
|
||||
@media screen and (max-width: 768px) {
|
||||
.signInBox-mask {
|
||||
align-items: flex-end; /* Align box to bottom */
|
||||
}
|
||||
|
||||
.signInBox-mask .signInBox {
|
||||
width: 100%; /* Full width */
|
||||
max-width: none; /* Remove max width */
|
||||
height: 90vh;
|
||||
border-radius: 20px 20px 0 0; /* Rounded top corners only */
|
||||
margin: 0; /* No margins */
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
/* overflow-y: hidden; */ /* Container fixed, inner scrolls */
|
||||
}
|
||||
|
||||
.signInBox-mask .signInBox .signInBox-head {
|
||||
flex-shrink: 0;
|
||||
}
|
||||
|
||||
.signInBox-mask .signInBox .signInBox-content {
|
||||
flex-direction: column;
|
||||
height: 0; /* Allow growing */
|
||||
flex: 1;
|
||||
align-items: stretch;
|
||||
}
|
||||
|
||||
.signInBox-mask .signInBox .signInBox-content .left-box {
|
||||
width: 100%;
|
||||
height: auto; /* Let it grow */
|
||||
flex: 0 0 auto; /* Don't shrink below content */
|
||||
border-right: none;
|
||||
border-bottom: 1px dotted #d7d7d7;
|
||||
padding: 15px 20px; /* Restore comfortable padding */
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
overflow: visible; /* Default overflow */
|
||||
max-width: inherit;
|
||||
}
|
||||
|
||||
.signInBox-mask .signInBox .signInBox-content .left-box .content-header {
|
||||
width: 100%;
|
||||
justify-content: center;
|
||||
flex-shrink: 0;
|
||||
margin-bottom: 16px; /* Restore margin */
|
||||
transform: none; /* Restore size */
|
||||
}
|
||||
|
||||
.signInBox-mask .signInBox .signInBox-content .left-box .content-header .outer-ring {
|
||||
left: 50%;
|
||||
top: 50%;
|
||||
transform: translate(-50%, -50%);
|
||||
width: 90%;
|
||||
height: auto;
|
||||
max-height: 80vh;
|
||||
border-radius: 20px;
|
||||
background-color: rgba(253, 218, 85, 0.95);
|
||||
position: fixed;
|
||||
z-index: 10010;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.signInBox-mask .signInBox .signInBox-content .left-box .content-header .outer-ring::after {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.signInBox-mask .signInBox .signInBox-content .left-box .content-header .outer-ring .rule-box {
|
||||
padding-bottom: 30px;
|
||||
height: auto;
|
||||
max-height: 100%;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.signInBox-mask .signInBox .signInBox-content .left-box .content-header .outer-ring .rule-box .rule-list {
|
||||
overflow-y: auto;
|
||||
flex: 1;
|
||||
}
|
||||
|
||||
.signInBox-mask .signInBox .signInBox-content .left-box .content-header .outer-ring .rule-box .rule-header {
|
||||
font-size: 20px;
|
||||
padding-top: 25px;
|
||||
margin-bottom: 10px;
|
||||
}
|
||||
|
||||
.signInBox-mask .signInBox .signInBox-content .left-box .content-header .outer-ring .rule-box .rule-header::after {
|
||||
width: 100px;
|
||||
height: 18px;
|
||||
bottom: -2px;
|
||||
}
|
||||
|
||||
.signInBox-mask .signInBox .signInBox-content .left-box .content-header .outer-ring .rule-box .rule-list .rule-item .rule-item-icon {
|
||||
width: 42px;
|
||||
height: 42px;
|
||||
margin-right: 15px;
|
||||
border-radius: 12px;
|
||||
}
|
||||
|
||||
.signInBox-mask .signInBox .signInBox-content .left-box .content-header .outer-ring .rule-box .rule-list .rule-item .rule-item-img {
|
||||
width: 24px;
|
||||
height: 28px;
|
||||
}
|
||||
|
||||
.signInBox-mask .signInBox .signInBox-content .left-box .content-header .outer-ring .rule-box .rule-list .rule-item .rule-item-text {
|
||||
font-size: 14px;
|
||||
line-height: 24px;
|
||||
padding: 20px 0;
|
||||
}
|
||||
|
||||
.signInBox-mask .signInBox .signInBox-content .left-box .calendar-box {
|
||||
max-width: 100%;
|
||||
height: auto;
|
||||
padding: 0; /* Remove all padding */
|
||||
padding: 10px 0; /* Add vertical margin */
|
||||
flex-shrink: 0;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.signInBox-mask .signInBox .signInBox-content .left-box .calendar-box .sign-in-text {
|
||||
margin-bottom: 15px; /* Restore margin */
|
||||
font-size: 14px; /* Restore font size */
|
||||
line-height: 28px;
|
||||
}
|
||||
|
||||
.signInBox-mask .signInBox .signInBox-content .left-box .calendar-box .calendar {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(7, 1fr); /* Force 7 columns */
|
||||
gap: 1.5%; /* Relative gap */
|
||||
width: 100%; /* Full width */
|
||||
max-width: none; /* Remove limit */
|
||||
justify-items: center; /* Center items in their cells */
|
||||
margin-bottom: 15px; /* Restore margin */
|
||||
}
|
||||
|
||||
.signInBox-mask .signInBox .signInBox-content .left-box .calendar-box .calendar .calendar-item {
|
||||
width: 100%; /* Fill grid cell */
|
||||
max-width: 40px; /* Limit max size to original desktop size */
|
||||
aspect-ratio: 1; /* Keep square */
|
||||
height: auto; /* Auto height based on width */
|
||||
line-height: normal; /* Reset line-height */
|
||||
display: flex; /* Use flex for centering content */
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
font-size: min(14px, 3vw); /* Fluid font size */
|
||||
margin: 0; /* Grid handles spacing */
|
||||
border-width: 1px; /* Default border width */
|
||||
}
|
||||
|
||||
.signInBox-mask .signInBox .signInBox-content .left-box .calendar-box .sign-in-btn {
|
||||
height: 40px; /* Reduced height */
|
||||
font-size: 16px; /* Adjusted font size */
|
||||
width: auto; /* Restore width */
|
||||
min-width: auto;
|
||||
padding: 0 30px; /* Add padding for auto width */
|
||||
}
|
||||
|
||||
/* Adjust border width for 'today' item to be relative if possible, but px is usually safer for borders.
|
||||
We can use thin/medium or keep 1px as it's already quite thin.
|
||||
Let's keep 1px but ensure box-sizing handles it well. */
|
||||
|
||||
.signInBox-mask .signInBox .signInBox-content .left-box .calendar-box .calendar .calendar-item.today {
|
||||
border-width: 1px;
|
||||
}
|
||||
|
||||
.signInBox-mask .signInBox .signInBox-content .left-box .calendar-box .calendar .calendar-item.already .yellow-tick {
|
||||
width: 30%; /* Relative tick size */
|
||||
height: 30%;
|
||||
top: -5%;
|
||||
right: -5%;
|
||||
}
|
||||
|
||||
/* Remove previous margin overrides as grid handles it */
|
||||
.signInBox-mask .signInBox .signInBox-content .left-box .calendar-box .calendar .calendar-item:not(:nth-child(7n)) {
|
||||
margin-right: 0;
|
||||
}
|
||||
|
||||
/* List Styling Adjustments */
|
||||
.signInBox-mask .signInBox .signInBox-content .sign-in-box {
|
||||
width: 100%;
|
||||
height: auto; /* Auto height */
|
||||
flex: 1; /* Take remaining height */
|
||||
margin: 0;
|
||||
padding: 0 20px;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
/* overflow: hidden; */
|
||||
}
|
||||
|
||||
.signInBox-mask .signInBox .signInBox-content .sign-in-box .sign-in-header {
|
||||
padding: 15px 10px; /* Compact header */
|
||||
font-size: 13px;
|
||||
}
|
||||
|
||||
.signInBox-mask .signInBox .signInBox-content .sign-in-box .sign-in-list .sign-in-item {
|
||||
padding: 8px 0 0 10px; /* Compact item padding */
|
||||
}
|
||||
|
||||
.signInBox-mask .signInBox .signInBox-content .sign-in-box .sign-in-list .sign-in-item .sign-in-index {
|
||||
font-size: 13px;
|
||||
width: 30px;
|
||||
}
|
||||
|
||||
.signInBox-mask .signInBox .signInBox-content .sign-in-box .sign-in-list .sign-in-item .sign-in-value {
|
||||
width: 32px;
|
||||
height: 32px;
|
||||
font-size: 14px;
|
||||
margin-right: 10px;
|
||||
}
|
||||
|
||||
.signInBox-mask .signInBox .signInBox-content .sign-in-box .sign-in-list .sign-in-item .sign-in-info .sign-in-name {
|
||||
font-size: 13px;
|
||||
}
|
||||
|
||||
.signInBox-mask .signInBox .signInBox-content .sign-in-box .sign-in-list .sign-in-item .sign-in-info .sign-in-time {
|
||||
font-size: 12px;
|
||||
}
|
||||
}
|
||||
|
||||
@media screen and (max-width: 480px) {
|
||||
.signInBox-mask .signInBox .signInBox-head .header-bi {
|
||||
width: 60px;
|
||||
height: 72px;
|
||||
top: -45px;
|
||||
}
|
||||
|
||||
.signInBox-mask .signInBox .signInBox-head .header-halo {
|
||||
width: 120px;
|
||||
height: 115px;
|
||||
top: -65px;
|
||||
}
|
||||
|
||||
.signInBox-mask .signInBox .signInBox-content .left-box {
|
||||
padding: 15px;
|
||||
}
|
||||
|
||||
.signInBox-mask .signInBox .signInBox-content .left-box .content-header .bi-value {
|
||||
font-size: 24px;
|
||||
}
|
||||
|
||||
.signInBox-mask .signInBox .signInBox-content .left-box .calendar-box {
|
||||
padding: 20px 5px; /* Very tight padding for mobile */
|
||||
}
|
||||
|
||||
.signInBox-mask .signInBox .signInBox-content .left-box .calendar-box .calendar {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(7, 1fr);
|
||||
gap: 1.5%; /* Relative gap */
|
||||
justify-items: center;
|
||||
}
|
||||
|
||||
.signInBox-mask .signInBox .signInBox-content .left-box .calendar-box .calendar .calendar-item {
|
||||
width: 100%;
|
||||
max-width: none; /* Fully fluid */
|
||||
aspect-ratio: 1;
|
||||
height: auto;
|
||||
font-size: 4vw; /* Large relative font for mobile */
|
||||
margin: 0;
|
||||
/* display: none; Remove hide default */
|
||||
border-width: 1px;
|
||||
}
|
||||
|
||||
.signInBox-mask .signInBox .signInBox-content .left-box .calendar-box .calendar .calendar-item.already .yellow-tick {
|
||||
width: 35%; /* Larger relative tick for mobile */
|
||||
height: 35%;
|
||||
}
|
||||
|
||||
/* .signInBox-mask .signInBox .signInBox-content .left-box .calendar-box .calendar .calendar-item.show-mobile {
|
||||
display: flex;
|
||||
} Remove show logic */
|
||||
|
||||
/* Override any previous margin settings */
|
||||
.signInBox-mask .signInBox .signInBox-content .left-box .calendar-box .calendar .calendar-item:not(:nth-child(7n)) {
|
||||
margin-right: 0;
|
||||
}
|
||||
|
||||
.signInBox-mask .signInBox .signInBox-content .left-box .calendar-box .sign-in-btn {
|
||||
height: 36px;
|
||||
font-size: 15px;
|
||||
margin-top: 10px;
|
||||
}
|
||||
|
||||
/* Adjust Success Modal for mobile */
|
||||
.signInBox-mask .succeed-mask .succeed-box {
|
||||
transform: scale(0.9);
|
||||
}
|
||||
|
||||
/* Further compact list for mobile */
|
||||
.signInBox-mask .signInBox .signInBox-content .sign-in-box .sign-in-list .sign-in-item .sign-in-value {
|
||||
width: 28px;
|
||||
height: 28px;
|
||||
font-size: 13px;
|
||||
}
|
||||
|
||||
.signInBox-mask .signInBox .signInBox-content .sign-in-box .outer-ring .rule-box .rule-header {
|
||||
font-size: 18px;
|
||||
}
|
||||
|
||||
.signInBox-mask .signInBox .signInBox-content .sign-in-box .outer-ring .rule-box .rule-list .rule-item .rule-item-icon {
|
||||
width: 36px;
|
||||
height: 36px;
|
||||
margin-right: 10px;
|
||||
}
|
||||
|
||||
.signInBox-mask .signInBox .signInBox-content .sign-in-box .outer-ring .rule-box .rule-list .rule-item .rule-item-img {
|
||||
width: 20px;
|
||||
height: 24px;
|
||||
}
|
||||
|
||||
.signInBox-mask .signInBox .signInBox-content .sign-in-box .outer-ring .rule-box .rule-list .rule-item .rule-item-text {
|
||||
font-size: 13px;
|
||||
padding: 15px 0;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
<div class="signInBox-mask flexcenter">
|
||||
<div class="signInBox">
|
||||
@@ -672,14 +992,6 @@
|
||||
<div class="bi-value" data-field="integral">0</div>
|
||||
<div class="bi-text">寄托币</div>
|
||||
<div class="bi-rule">签到规则</div>
|
||||
<div class="outer-ring" hidden>
|
||||
<div class="rule-box flexflex">
|
||||
<div class="rule-header">签到规则</div>
|
||||
<div class="rule-list flexflex" data-list="tips"></div>
|
||||
<div class="flex1"></div>
|
||||
<div class="rule-close">关闭</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="calendar-box flexflex">
|
||||
@@ -694,16 +1006,27 @@
|
||||
</div>
|
||||
|
||||
<div class="sign-in-box flex1 flexflex">
|
||||
<div class="sign-in-header flexflex">今日已签到 <div class="sign-in-header-value" data-field="todaycount">0</div>人
|
||||
<div class="sign-in-scroll-wrapper flex1 flexcolumn">
|
||||
<div class="sign-in-header flexflex">今日已签到 <div class="sign-in-header-value" data-field="todaycount">0</div>人
|
||||
</div>
|
||||
<div class="discuss-list-no flexcenter flex1">
|
||||
<img class="empty-icon" src="https://app.gter.net/image/gter/commonCom/sign-in/img/empty-icon.png">
|
||||
<div class="discuss-list-no-text">- 暂无数据 -</div>
|
||||
</div>
|
||||
<div class="sign-in-list"></div>
|
||||
<div class="sign-in-finish flexcenter">- End -</div>
|
||||
<div class="sign-in-more flexcenter">更多 <img class="sign-in-more-icon"
|
||||
src="https://app.gter.net/image/gter/commonCom/sign-in/img/arrows-circle-black.png"></div>
|
||||
</div>
|
||||
<div class="discuss-list-no flexcenter flex1">
|
||||
<img class="empty-icon" src="https://app.gter.net/image/gter/commonCom/sign-in/img/empty-icon.png">
|
||||
<div class="discuss-list-no-text">- 暂无数据 -</div>
|
||||
|
||||
<div class="outer-ring" hidden>
|
||||
<div class="rule-box flexflex">
|
||||
<div class="rule-header">签到规则</div>
|
||||
<div class="rule-list flexflex" data-list="tips"></div>
|
||||
<div class="flex1"></div>
|
||||
<div class="rule-close">关闭</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="sign-in-list"></div>
|
||||
<div class="sign-in-finish flexcenter">- End -</div>
|
||||
<div class="sign-in-more flexcenter">更多 <img class="sign-in-more-icon"
|
||||
src="https://app.gter.net/image/gter/commonCom/sign-in/img/arrows-circle-black.png"></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
@@ -736,4 +1059,4 @@
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
118
css/public.css
118
css/public.css
@@ -2093,124 +2093,6 @@ td {
|
||||
margin: 0 auto;
|
||||
box-sizing: content-box;
|
||||
}
|
||||
@media (max-width: 1200px) {
|
||||
.head-pop .head-more-pop {
|
||||
width: 80vw;
|
||||
}
|
||||
.head-pop .head-more-pop .head-more-userinfo {
|
||||
margin-left: 20px;
|
||||
padding-right: 20px;
|
||||
}
|
||||
.head-pop .head-more-pop .tab-list {
|
||||
padding-right: 20px;
|
||||
margin-left: 20px;
|
||||
}
|
||||
.head-pop .head-more-pop .tab-list .tab-item {
|
||||
height: 50px;
|
||||
padding-left: 20px;
|
||||
font-size: 14px;
|
||||
}
|
||||
.head-pop .head-more-pop .head-more-post {
|
||||
margin: 40px 0 90px;
|
||||
}
|
||||
.head-pop .head-more-pop .cross-icon {
|
||||
left: calc(50% + 40px);
|
||||
}
|
||||
}
|
||||
@media (max-width: 768px) {
|
||||
.head-pop .head-more-pop {
|
||||
width: 100vw;
|
||||
height: 100vh;
|
||||
}
|
||||
.head-pop .head-more-pop .head-more-userinfo {
|
||||
margin-left: 16px;
|
||||
padding-right: 16px;
|
||||
}
|
||||
.head-pop .head-more-pop .head-more-userinfo .head-more-right {
|
||||
width: auto;
|
||||
height: auto;
|
||||
}
|
||||
.head-pop .head-more-pop .tab-list {
|
||||
padding-right: 16px;
|
||||
margin-left: 16px;
|
||||
}
|
||||
.head-pop .head-more-pop .tab-list .tab-item {
|
||||
height: 46px;
|
||||
padding-left: 16px;
|
||||
font-size: 13px;
|
||||
}
|
||||
.head-pop .head-more-pop .head-more-post {
|
||||
margin: 36px 0 80px;
|
||||
font-size: 16px;
|
||||
}
|
||||
.head-pop .head-more-pop .head-more-post .head-more-post-icon {
|
||||
width: 18px;
|
||||
height: 18px;
|
||||
margin-right: 6px;
|
||||
}
|
||||
.head-pop .head-more-pop .cross-icon {
|
||||
left: 50%;
|
||||
transform: translateX(-50%);
|
||||
bottom: 15px;
|
||||
}
|
||||
}
|
||||
@media (max-width: 480px) {
|
||||
.head-pop .head-more-pop .head-more-userinfo {
|
||||
margin-left: 12px;
|
||||
padding-right: 12px;
|
||||
}
|
||||
.head-pop .head-more-pop .head-more-userinfo .head-more-left .head-more-userinfo-avatar {
|
||||
width: 36px;
|
||||
height: 36px;
|
||||
margin-right: 8px;
|
||||
}
|
||||
.head-pop .head-more-pop .head-more-userinfo .head-more-left .head-more-userinfo-username {
|
||||
font-size: 12px;
|
||||
}
|
||||
.head-pop .head-more-pop .head-more-userinfo .head-more-right .information-box {
|
||||
width: 14px;
|
||||
height: 14px;
|
||||
}
|
||||
.head-pop .head-more-pop .head-more-userinfo .head-more-right .information-box .information-icon {
|
||||
width: 14px;
|
||||
height: 14px;
|
||||
}
|
||||
.head-pop .head-more-pop .head-more-userinfo .head-more-right .loginBtn {
|
||||
width: 72px;
|
||||
height: 28px;
|
||||
font-size: 12px;
|
||||
}
|
||||
.head-pop .head-more-pop .tab-list {
|
||||
padding-right: 12px;
|
||||
margin-left: 12px;
|
||||
}
|
||||
.head-pop .head-more-pop .tab-list .tab-item {
|
||||
height: 42px;
|
||||
padding-left: 14px;
|
||||
font-size: 12px;
|
||||
}
|
||||
.head-pop .head-more-pop .head-more-post {
|
||||
margin: 24px 0 60px;
|
||||
font-size: 14px;
|
||||
}
|
||||
.head-pop .head-more-pop .head-more-post .head-more-post-icon {
|
||||
width: 16px;
|
||||
height: 16px;
|
||||
margin-right: 6px;
|
||||
}
|
||||
.head-pop .head-more-pop .head-more-post .head-more-post-icon .head-more-post-img {
|
||||
width: 8px;
|
||||
height: 8px;
|
||||
}
|
||||
.head-pop .head-more-pop .cross-icon {
|
||||
width: 10px;
|
||||
height: 10px;
|
||||
padding: 12px;
|
||||
bottom: 12px;
|
||||
left: 50%;
|
||||
transform: translateX(-50%);
|
||||
}
|
||||
}
|
||||
@media screen and (max-width: 1200px) {
|
||||
header.page-header {
|
||||
min-width: auto !important;
|
||||
|
||||
122
css/public.less
122
css/public.less
@@ -2508,128 +2508,6 @@ td {
|
||||
margin: 0 auto;
|
||||
box-sizing: content-box;
|
||||
}
|
||||
|
||||
// 响应式断点：1200 / 768 / 480
|
||||
@media (max-width: 1200px) {
|
||||
width: 80vw;
|
||||
.head-more-userinfo {
|
||||
margin-left: 20px;
|
||||
padding-right: 20px;
|
||||
}
|
||||
.tab-list {
|
||||
padding-right: 20px;
|
||||
margin-left: 20px;
|
||||
.tab-item {
|
||||
height: 50px;
|
||||
padding-left: 20px;
|
||||
font-size: 14px;
|
||||
}
|
||||
}
|
||||
.head-more-post {
|
||||
margin: 40px 0 90px;
|
||||
}
|
||||
.cross-icon {
|
||||
left: calc(50% + 40px);
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width: 768px) {
|
||||
width: 100vw;
|
||||
height: 100vh;
|
||||
.head-more-userinfo {
|
||||
margin-left: 16px;
|
||||
padding-right: 16px;
|
||||
.head-more-right {
|
||||
width: auto;
|
||||
height: auto;
|
||||
}
|
||||
}
|
||||
.tab-list {
|
||||
padding-right: 16px;
|
||||
margin-left: 16px;
|
||||
.tab-item {
|
||||
height: 46px;
|
||||
padding-left: 16px;
|
||||
font-size: 13px;
|
||||
}
|
||||
}
|
||||
.head-more-post {
|
||||
margin: 36px 0 80px;
|
||||
font-size: 16px;
|
||||
.head-more-post-icon {
|
||||
width: 18px;
|
||||
height: 18px;
|
||||
margin-right: 6px;
|
||||
}
|
||||
}
|
||||
.cross-icon {
|
||||
left: 50%;
|
||||
transform: translateX(-50%);
|
||||
bottom: 15px;
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width: 480px) {
|
||||
.head-more-userinfo {
|
||||
margin-left: 12px;
|
||||
padding-right: 12px;
|
||||
.head-more-left {
|
||||
.head-more-userinfo-avatar {
|
||||
width: 36px;
|
||||
height: 36px;
|
||||
margin-right: 8px;
|
||||
}
|
||||
.head-more-userinfo-username {
|
||||
font-size: 12px;
|
||||
}
|
||||
}
|
||||
.head-more-right {
|
||||
.information-box {
|
||||
width: 14px;
|
||||
height: 14px;
|
||||
.information-icon {
|
||||
width: 14px;
|
||||
height: 14px;
|
||||
}
|
||||
}
|
||||
.loginBtn {
|
||||
width: 72px;
|
||||
height: 28px;
|
||||
font-size: 12px;
|
||||
}
|
||||
}
|
||||
}
|
||||
.tab-list {
|
||||
padding-right: 12px;
|
||||
margin-left: 12px;
|
||||
.tab-item {
|
||||
height: 42px;
|
||||
padding-left: 14px;
|
||||
font-size: 12px;
|
||||
}
|
||||
}
|
||||
.head-more-post {
|
||||
margin: 24px 0 60px;
|
||||
font-size: 14px;
|
||||
.head-more-post-icon {
|
||||
width: 16px;
|
||||
height: 16px;
|
||||
margin-right: 6px;
|
||||
.head-more-post-img {
|
||||
width: 8px;
|
||||
height: 8px;
|
||||
}
|
||||
}
|
||||
}
|
||||
.cross-icon {
|
||||
width: 10px;
|
||||
height: 10px;
|
||||
padding: 12px;
|
||||
bottom: 12px;
|
||||
left: 50%;
|
||||
transform: translateX(-50%);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
@@ -29,6 +29,7 @@
|
||||
|
||||
<script>
|
||||
setTimeout(() => {
|
||||
return
|
||||
if (window["userInfoWin"]?.uin > 0 || window["userInfoWin"]?.uid > 0) {
|
||||
// 登录
|
||||
const headMoreLeft = document.querySelector(".head-pop .head-more-left")
|
||||
@@ -64,7 +65,7 @@
|
||||
</div>
|
||||
<sign-in-box></sign-in-box>
|
||||
<div class="container" id="details" v-cloak>
|
||||
<div class="templateValue" ref="uniqidRef">WObXKrbm1CSn</div>
|
||||
<div class="templateValue" ref="uniqidRef">Wq5LnDubWjyr</div>
|
||||
|
||||
<div class="head-top flexacenter">
|
||||
<img class="logo" src="https://oss.gter.net/logo" alt="" />
|
||||
@@ -228,7 +229,7 @@
|
||||
<div class="input-box">
|
||||
<div class="top flexflex">
|
||||
<img class="avatar" v-if="userInfoWin.avatar" :src="userInfoWin.avatar" />
|
||||
<textarea ref="input-textarea" class="input-textarea flex1" maxlength="500" @focus="judgeLogin" v-model="inputTextarea" @input="autoResize" @paste="handleInputPaste" placeholder="说说你的看法…"></textarea>
|
||||
<textarea ref="inputTextareaRef" class="input-textarea flex1" maxlength="500" @focus="judgeLogin" v-model="inputTextarea" @input="autoResize" @paste="handleInputPaste" placeholder="说说你的看法…"></textarea>
|
||||
</div>
|
||||
<div class="picture-box flexacenter" v-if="picture.length != 0">
|
||||
<div class="picture" v-for="(item, index) in picture" :key="index">
|
||||
@@ -299,7 +300,7 @@
|
||||
<div class="input-box" v-if="item['childState']">
|
||||
<img class="cross" @click="closeAnswerCommentsChild(index)" src="./img/cross-icon.png" />
|
||||
<div class="top flexflex">
|
||||
<textarea class="input-textarea flex1" maxlength="500" placeholder="说说你的看法…" @focus="judgeLogin" v-model="item['commentInput']" @input="autoResize" @paste="handleInputPaste($event, index)"></textarea>
|
||||
<textarea class="input-textarea flex1" :class="[`input-textarea-${item.id}`]" maxlength="500" placeholder="说说你的看法…" @focus="judgeLogin" v-model="item['commentInput']" @input="autoResize" @paste="handleInputPaste($event, index)"></textarea>
|
||||
</div>
|
||||
<div class="picture-box flexacenter" v-if="item?.picture?.length != 0">
|
||||
<div class="picture" v-for="it in item.picture" :key="it.url">
|
||||
@@ -370,7 +371,7 @@
|
||||
<div class="input-box" v-if="ite['childState']">
|
||||
<img class="cross" @click="closeAnswerCommentsChild(index)" src="./img/cross-icon.png" />
|
||||
<div class="top flexflex">
|
||||
<textarea class="input-textarea flex1" maxlength="500" v-model="ite['commentInput']" @focus="judgeLogin" :placeholder="'回复“' + (ite.nickname || ite.user['nickname'] || '匿名用户') + '”：'" @input="autoResize" @paste="handleInputPaste($event, index, i)"></textarea>
|
||||
<textarea class="input-textarea flex1" maxlength="500" :class="[`input-textarea-${ite.id}`]" v-model="ite['commentInput']" @focus="judgeLogin" :placeholder="'回复“' + (ite.nickname || ite.user['nickname'] || '匿名用户') + '”：'" @input="autoResize" @paste="handleInputPaste($event, index, i)"></textarea>
|
||||
</div>
|
||||
<div class="picture-box flexacenter" v-if="ite.picture?.length != 0">
|
||||
<div class="picture" v-for="it in ite.picture" :key="it.url">
|
||||
|
||||
@@ -493,11 +493,8 @@
|
||||
|
||||
startCarousel();
|
||||
|
||||
|
||||
|
||||
</script>
|
||||
<script src="./component/sign-in/sign-in.js"></script>
|
||||
|
||||
</body>
|
||||
|
||||
</html>
|
||||
2455
js/details.js
2455
js/details.js
File diff suppressed because it is too large
Load Diff
15
js/public.js
15
js/public.js
@@ -4,12 +4,22 @@ axios.defaults.emulateJSON = true;
|
||||
|
||||
const withVer = (p) => `${p}?v=${window.__ASSET_VERSION__}`;
|
||||
|
||||
const getScriptParameter = (paramName) => {
|
||||
const currentScript = document.currentScript;
|
||||
if (currentScript && currentScript.src) {
|
||||
const url = new URL(currentScript.src, window.location.origin);
|
||||
return url.searchParams.get(paramName);
|
||||
}
|
||||
return null;
|
||||
};
|
||||
|
||||
// 导出ajax函数
|
||||
const ajax = (url, data) => {
|
||||
axios.defaults.withCredentials = true;
|
||||
axios.defaults.emulateJSON = true;
|
||||
|
||||
url = url.indexOf("https://") > -1 ? url : forumBaseURL + url;
|
||||
if (data) data["v"] = getScriptParameter("v") || "v2";
|
||||
return new Promise(function (resolve, reject) {
|
||||
if (location.hostname == "127.0.0.1") axios.defaults.headers.common["Authorization"] = "n1pstcsmw6m6bcx49z705xhvduqviw29";
|
||||
|
||||
@@ -41,6 +51,7 @@ const ajaxdelete = (url, data) => {
|
||||
|
||||
url = url.indexOf("https://") > -1 ? url : forumBaseURL + url;
|
||||
return new Promise(function (resolve, reject) {
|
||||
if (data) data["v"] = getScriptParameter("v") || "v2";
|
||||
axios
|
||||
.delete(url, {
|
||||
emulateJSON: true,
|
||||
@@ -70,6 +81,10 @@ const ajaxGet = (url) => {
|
||||
axios.defaults.emulateJSON = true;
|
||||
|
||||
url = url.indexOf("https://") > -1 ? url : forumBaseURL + url;
|
||||
|
||||
const paramSymbol = url.includes("?") ? "&" : "?";
|
||||
url = `${url}${paramSymbol}v=${getScriptParameter("v") || "v2" }`;
|
||||
|
||||
return new Promise(function (resolve, reject) {
|
||||
if (location.hostname == "127.0.0.1") axios.defaults.headers.common["Authorization"] = "n1pstcsmw6m6bcx49z705xhvduqviw29";
|
||||
|
||||
|
||||
Reference in New Issue
Block a user