feat: 新增编辑页面和分享功能，优化链接跳转和样式
- 添加edit.html编辑页面及相关CSS样式 - 实现内容编辑区的富文本功能 - 为item-bottom组件添加分享功能，包括复制链接和微信转发 - 更新多个组件的链接跳转地址 - 优化CSS样式，包括圆角、阴影和hover效果 - 修复部分样式问题和布局错位 - 移除不再使用的section-index.html文件
This commit is contained in:
A1300399510
16
1/base.html
Normal file
16
1/base.html
Normal file
@@ -0,0 +1,16 @@
|
||||
<html>
|
||||
|
||||
<head>
|
||||
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
|
||||
<title>{block name="title"}标题{/block}</title>
|
||||
</head>
|
||||
|
||||
<body>
|
||||
{block name="menu"}菜单{/block}
|
||||
{block name="left"}左边分栏{/block}
|
||||
{block name="main"}主内容{/block}
|
||||
{block name="right"}右边分栏{/block}
|
||||
{block name="footer"}底部{/block}
|
||||
</body>
|
||||
|
||||
</html>
|
||||
1
1/header.html
Normal file
1
1/header.html
Normal file
@@ -0,0 +1 @@
|
||||
模板被引用
|
||||
35
1/index.html
Normal file
35
1/index.html
Normal file
@@ -0,0 +1,35 @@
|
||||
{extend name="forum/base" /}
|
||||
|
||||
{block name="title"}{$title}{/block}
|
||||
|
||||
{block name="menu"}
|
||||
<a href="/">首页</a>
|
||||
<a href="/info/">资讯</a>
|
||||
<a href="/bbs/">论坛</a>
|
||||
|
||||
|
||||
{include file="forum/header" /}
|
||||
|
||||
|
||||
{/block}
|
||||
|
||||
{block name="left"}{/block}
|
||||
|
||||
{block name="main"}
|
||||
{volist name="list" id="vo"}
|
||||
<a href="/new/{$vo.id}">{$vo.title}</a><br />
|
||||
{$vo.content}
|
||||
{/volist}
|
||||
{/block}
|
||||
|
||||
{block name="right"}
|
||||
最新资讯：
|
||||
{volist name="news" id="new"}
|
||||
<a href="/new/{$new.id}">{$new.title}</a><br />
|
||||
{/volist}
|
||||
{/block}
|
||||
|
||||
{block name="footer"}
|
||||
{__block__}
|
||||
@寄托天下 版权所有
|
||||
{/block}
|
||||
@@ -19,5 +19,5 @@ export const headTop = defineComponent({
|
||||
return { signInAlreadyState };
|
||||
},
|
||||
|
||||
template: `<div class="head-top flexacenter"> <img class="logo" src="https://oss.gter.net/logo" alt="" /> <div class="flex1"></div> <div class="input-box flexacenter"> <input class="input flex1" type="text" placeholder="大家都在搜：屯特" /> <img class="icon" /> </div> <div class="sign-in sign-in-already flexcenter" v-if="signInAlreadyState" v-cloak onclick="showWindow('dsu_paulsign', 'https://bbs.gter.net/plugin.php?id=dsu_paulsign:sign&show=sign')"> <img class="sign-icon" src="//framework.x-php.com/gter/image/gter/forum/assets/forum/sign-icon.png" /> <span>已签到，明天再来</span> </div> <div class="sign-in sign-in-no flexacenter" v-else onclick="showWindow('dsu_paulsign', 'https://bbs.gter.net/plugin.php?id=dsu_paulsign:sign&show=sign')" v-cloak> <img class="sign-in-bj" src="//framework.x-php.com/gter/image/gter/forum/assets/forum/sign-in-bj.svg" /> <img class="coin-bj" src="//framework.x-php.com/gter/image/gter/forum/assets/forum/coin-bj.svg" /> <img class="coin-icon" src="//framework.x-php.com/gter/image/gter/forum/assets/forum/coin-icon.png" /> <span class="text flex1">签到领寄托币</span> <div class="sign-go flexcenter"> <img class="sign-go-bj" src="//framework.x-php.com/gter/image/gter/forum/assets/forum/sign-go.svg" /> GO </div> <img class="petal1" src="//framework.x-php.com/gter/image/gter/forum/assets/forum/petal1.png" /> <img class="petal2" src="//framework.x-php.com/gter/image/gter/forum/assets/forum/petal2.png" /> <img class="petal3" src="//framework.x-php.com/gter/image/gter/forum/assets/forum/petal3.png" /> </div></div>`,
|
||||
template: `<div class="head-top flexacenter"> <img class="logo" src="https://oss.gter.net/logo" alt="" /> <div class="flex1"></div> <div class="input-box flexacenter"> <input class="input flex1" type="text" placeholder="大家都在搜：屯特" /> <img class="icon" src="./img/search-icon.svg" /> </div> <div class="sign-in sign-in-already flexcenter" v-if="signInAlreadyState" v-cloak onclick="showWindow('dsu_paulsign', 'https://bbs.gter.net/plugin.php?id=dsu_paulsign:sign&show=sign')"> <img class="sign-icon" src="//framework.x-php.com/gter/image/gter/forum/assets/forum/sign-icon.png" /> <span>已签到，明天再来</span> </div> <div class="sign-in sign-in-no flexacenter" v-else onclick="showWindow('dsu_paulsign', 'https://bbs.gter.net/plugin.php?id=dsu_paulsign:sign&show=sign')" v-cloak> <img class="sign-in-bj" src="//framework.x-php.com/gter/image/gter/forum/assets/forum/sign-in-bj.svg" /> <img class="coin-bj" src="//framework.x-php.com/gter/image/gter/forum/assets/forum/coin-bj.svg" /> <img class="coin-icon" src="//framework.x-php.com/gter/image/gter/forum/assets/forum/coin-icon.png" /> <span class="text flex1">签到领寄托币</span> <div class="sign-go flexcenter"> <img class="sign-go-bj" src="//framework.x-php.com/gter/image/gter/forum/assets/forum/sign-go.svg" /> GO </div> <img class="petal1" src="//framework.x-php.com/gter/image/gter/forum/assets/forum/petal1.png" /> <img class="petal2" src="//framework.x-php.com/gter/image/gter/forum/assets/forum/petal2.png" /> <img class="petal3" src="//framework.x-php.com/gter/image/gter/forum/assets/forum/petal3.png" /> </div></div>`,
|
||||
});
|
||||
|
||||
@@ -3,7 +3,7 @@
|
||||
<div class="flex1"></div>
|
||||
<div class="input-box flexacenter">
|
||||
<input class="input flex1" type="text" placeholder="大家都在搜：屯特" />
|
||||
<img class="icon" />
|
||||
<img class="icon" src="./img/search-icon.svg" />
|
||||
</div>
|
||||
|
||||
<div class="sign-in sign-in-already flexcenter" v-if="signInAlreadyState" v-cloak onclick="showWindow('dsu_paulsign', 'https://bbs.gter.net/plugin.php?id=dsu_paulsign:sign&show=sign')">
|
||||
|
||||
@@ -25,5 +25,5 @@ export const hotSearch = defineComponent({
|
||||
|
||||
components: {},
|
||||
|
||||
template: `<div class="hot-tag" v-if="list.length > 0"> <div class="hot-tag-title"> <img class="icon" src="./img/triangle-violet.svg" /> 热门搜索 </div> <div class="list flexflex"> <a class="item" v-for="item in list" :href="'/search.html?kw=' + item.keyword" target="_blank">{{ item.keyword }}</a> </div></div>`,
|
||||
template: `<div class="hot-tag" v-if="list.length > 0"> <div class="hot-tag-title"> <img class="icon" src="./img/triangle-violet.svg" /> 热门搜索 </div> <div class="list flexflex"> <a class="item" v-for="item in list" :href="'http://14.22.79.19:9551/?tpl=forum/search&kw=' + item.keyword" target="_blank">{{ item.keyword }}</a> </div></div>`,
|
||||
});
|
||||
|
||||
@@ -4,6 +4,6 @@
|
||||
热门搜索
|
||||
</div>
|
||||
<div class="list flexflex">
|
||||
<a class="item" v-for="item in list" :href="'/search.html?kw=' + item.keyword" target="_blank">{{ item.keyword }}</a>
|
||||
<a class="item" v-for="item in list" :href="'http://14.22.79.19:9551/?tpl=forum/search&kw=' + item.keyword" target="_blank">{{ item.keyword }}</a>
|
||||
</div>
|
||||
</div>
|
||||
@@ -25,5 +25,5 @@ export const hotTag = defineComponent({
|
||||
|
||||
components: {},
|
||||
|
||||
template: `<div class="hot-tag" v-if="list.length > 0"> <div class="hot-tag-title"> <img class="icon" src="./img/triangle-orange.svg" /> 热门标签 </div> <div class="list flexflex"> <a class="item" v-for="item in list" :href="'/search-tag.html?tag=' + item.tagname" target="_blank">{{ item.tagname }}</a> </div></div>`,
|
||||
template: `<div class="hot-tag" v-if="list.length > 0"> <div class="hot-tag-title"> <img class="icon" src="./img/triangle-orange.svg" /> 热门标签 </div> <div class="list flexflex"> <a class="item" v-for="item in list" :href="'http://14.22.79.19:9551/?tpl=forum/search-tag&tag=' + item.tagname" target="_blank">{{ item.tagname }}</a> </div></div>`,
|
||||
});
|
||||
|
||||
@@ -4,6 +4,6 @@
|
||||
热门标签
|
||||
</div>
|
||||
<div class="list flexflex">
|
||||
<a class="item" v-for="item in list" :href="'/search-tag.html?tag=' + item.tagname" target="_blank">{{ item.tagname }}</a>
|
||||
<a class="item" v-for="item in list" :href="'http://14.22.79.19:9551/?tpl=forum/search-tag&tag=' + item.tagname" target="_blank">{{ item.tagname }}</a>
|
||||
</div>
|
||||
</div>
|
||||
@@ -98,12 +98,16 @@ export const itemBottom = defineComponent({
|
||||
});
|
||||
};
|
||||
|
||||
return { collectClick, item, likeClick, isLogin, isLikeGif };
|
||||
const copyLinkClick = () => {
|
||||
copyUid(`http://14.22.79.19:9551/?tpl=forum/details&uniqid=${item.value.uniqid}`);
|
||||
}
|
||||
|
||||
return { copyLinkClick, collectClick, item, likeClick, isLogin, isLikeGif };
|
||||
},
|
||||
|
||||
components: {
|
||||
like,
|
||||
},
|
||||
|
||||
template: `<div class="comment flexacenter" v-if="item?.commentreviews && !Array.isArray(item?.commentreviews)"> <img class="icon" :src="item?.commentreviews?.avatar" /> <div class="text one-line-display">{{ item?.commentreviews?.content || "[图]" }}</div></div> <template v-if="item.comment_list?.length != 0"> <div class="comment flexacenter" style="margin-bottom: 15px;" v-for="(item, index) in item.comment_list" :key="index"> <img class="icon" :src="item.avatar" /> <div class="text one-line-display">{{ item.content || "[图]" }}</div> </div></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> <div class="bottom-item flexacenter" v-if="item?.type != 'tenement'"> <img class="icon" src="./img/discuss-icon.png" /> <div class="text">{{ item.comments || "讨论" }}</div> </div> <div class="bottom-item flexacenter" v-if="item?.type != 'tenement'"> <img class="icon" src="./img/bi-copper-icon.png" /> <div class="text">{{ item.coins || "投币" }}</div> </div> <div class="bottom-item flexacenter"> <img class="icon" src="./img/share-gray.png" /> <div class="text">转发</div> </div></div><like v-if="isLikeGif"></like>`,
|
||||
template: `<div class="comment flexacenter" v-if="item?.commentreviews && !Array.isArray(item?.commentreviews)"> <img class="icon" :src="item?.commentreviews?.avatar" /> <div class="text one-line-display">{{ item?.commentreviews?.content || "[图]" }}</div></div><template v-if="item.comment_list?.length != 0"> <div class="comment flexacenter" style="margin-bottom: 15px" v-for="(item, index) in item.comment_list" :key="index"> <img class="icon" :src="item.avatar" /> <div class="text one-line-display">{{ item.content || "[图]" }}</div> </div></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> <div class="bottom-item flexacenter" v-if="item?.type != 'tenement'"> <img class="icon" src="./img/discuss-icon.png" /> <div class="text">{{ item.comments || "讨论" }}</div> </div> <div class="bottom-item flexacenter" v-if="item?.type != 'tenement'"> <img class="icon" src="./img/bi-copper-icon.png" /> <div class="text">{{ item.coins || "投币" }}</div> </div> <div class="bottom-item share flexacenter"> <img class="icon" src="./img/share-gray.png" /> <div class="text">转发</div> <div class="share-box flexcenter"> <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"> <img class="share-icon" src="./img/weixin-icon.png" /> <div class="text">微信转发</div> <div class="QRcode-box flexcenter"> <img class="QRcode" src="https://o.x-php.com/Zvt57TuJSUvkyhw-xG7Y2l-c-5kpcnzqqsgFptxhcq_cQnrlJKN1WgxCBq_D-81qNDQyOQ~~" /> <div class="text">微信扫码</div> </div> </div> </div> </div></div><like v-if="isLikeGif"></like>`,
|
||||
});
|
||||
|
||||
@@ -3,7 +3,7 @@
|
||||
<div class="text one-line-display">{{ item?.commentreviews?.content || "[图]" }}</div>
|
||||
</div>
|
||||
<template v-if="item.comment_list?.length != 0">
|
||||
<div class="comment flexacenter" style="margin-bottom: 15px;" v-for="(item, index) in item.comment_list" :key="index">
|
||||
<div class="comment flexacenter" style="margin-bottom: 15px" v-for="(item, index) in item.comment_list" :key="index">
|
||||
<img class="icon" :src="item.avatar" />
|
||||
<div class="text one-line-display">{{ item.content || "[图]" }}</div>
|
||||
</div>
|
||||
@@ -31,9 +31,24 @@
|
||||
<div class="text">{{ item.coins || "投币" }}</div>
|
||||
</div>
|
||||
|
||||
<div class="bottom-item flexacenter">
|
||||
<div class="bottom-item share flexacenter">
|
||||
<img class="icon" src="./img/share-gray.png" />
|
||||
<div class="text">转发</div>
|
||||
<div class="share-box flexcenter">
|
||||
<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">
|
||||
<img class="share-icon" src="./img/weixin-icon.png" />
|
||||
<div class="text">微信转发</div>
|
||||
|
||||
<div class="QRcode-box flexcenter">
|
||||
<img class="QRcode" src="https://o.x-php.com/Zvt57TuJSUvkyhw-xG7Y2l-c-5kpcnzqqsgFptxhcq_cQnrlJKN1WgxCBq_D-81qNDQyOQ~~" />
|
||||
<div class="text">微信扫码</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
@@ -29,5 +29,5 @@ export const itemForum = defineComponent({
|
||||
itemHead,
|
||||
},
|
||||
|
||||
template: `<div class="item-box item-forum"> <item-head :itemdata="item"></item-head> <div v-if="item.title" class="title">{{ item.title }}</div> <div class="message two-line-display">{{ item.content }}</div> <item-bottom :itemdata="item"></item-bottom></div>`,
|
||||
template: `<div class="item-box item-forum"> <item-head :itemdata="item"></item-head> <a v-if="item.title" class="title" :href="'http://14.22.79.19:9551/?tpl=forum/details&uniqid=' + item.uniqid" target="_blank">{{ item.title }}</a> <a class="message two-line-display" :href="'http://14.22.79.19:9551/?tpl=forum/details&uniqid=' + item.uniqid" target="_blank">{{ item.content }}</a> <item-bottom :itemdata="item"></item-bottom></div>`,
|
||||
});
|
||||
|
||||
@@ -1,9 +1,8 @@
|
||||
<div class="item-box item-forum">
|
||||
<item-head :itemdata="item"></item-head>
|
||||
|
||||
<div v-if="item.title" class="title">{{ item.title }}</div>
|
||||
|
||||
<div class="message two-line-display">{{ item.content }}</div>
|
||||
<a v-if="item.title" class="title" :href="'http://14.22.79.19:9551/?tpl=forum/details&uniqid=' + item.uniqid" target="_blank">{{ item.title }}</a>
|
||||
<a class="message two-line-display" :href="'http://14.22.79.19:9551/?tpl=forum/details&uniqid=' + item.uniqid" target="_blank">{{ item.content }}</a>
|
||||
|
||||
<item-bottom :itemdata="item"></item-bottom>
|
||||
</div>
|
||||
@@ -33,9 +33,7 @@ export const itemHead = defineComponent({
|
||||
let show = ref(false);
|
||||
|
||||
const cutShow = () => {
|
||||
console.log(show.value);
|
||||
show.value = !show.value; // 修改为切换显示状态
|
||||
console.log("show.value", show.value);
|
||||
};
|
||||
|
||||
let reportState = ref(false);
|
||||
@@ -96,5 +94,5 @@ export const itemHead = defineComponent({
|
||||
report,
|
||||
},
|
||||
|
||||
template: `<div class="item-head flexacenter"> <img class="avatar" :src="item?.user?.avatar || item.avatar" /> <div class="name">{{ item?.user?.nickname || item.nickname || "匿名用户" }}</div> <!-- <img class="group" src="https://o.x-php.com/Zvt57TuJSUvkyhw-xG7Y2l-c_ZMtdXfqqsgFptxhcq_cQnrlcPJ0DVESBq_D-81qNDQyOQ~~" /> --> <div class="time">{{ timestamp }}</div> <div class="flex1"></div> <div class="view flexacenter"> <img class="icon" src="https://app.gter.net/image/miniApp/offer/eye-icon.svg" /> <div class="text">{{ item.views }}</div> </div> <div class="btn flexcenter" @click.stop="cutShow"> <img class="icon" src="https://app.gter.net/image/miniApp/offer/dot-dot-dot-gray.png" /> </div> <div v-if="show"> <div class="mask" @click.stop="cutShow"></div> <div class="operate"> <div class="item" @click.stop="report">举报</div> <template v-if="ismanager"> <div class="item" @click.stop="hide">{{ item.hidden == 0 ? "隐藏" : "显示" }}</div> <div class="item" @click.stop="recommend">{{ item.recommend == 1 ? "取消" : "" }}推荐</div> <div class="item" @click.stop="essence">{{ item.best == 1 ? "取消" : "" }}精华</div> </template> </div> </div></div><div class="label flexflex" v-if="sectionn?.length || tags?.length || item.recommend == 1 || item.best == 1"> <img class="item icon" v-if="item.recommend == 1 && item.best != 1" src="./img/recommend-icon.png" /> <img class="item icon" v-if="item.best == 1" src="./img/essence-icon.png" /> <div class="item blue" v-for="(item, index) in sectionn" :key="item">{{ item }}</div> <div class="item" v-for="(item, index) in tags" :key="item">{{ item }}</div></div><report v-if="reportState" :itemdata="item"></report>`,
|
||||
template: `<div class="item-head flexacenter"> <img class="avatar" :src="item?.user?.avatar || item.avatar" /> <div class="name">{{ item?.user?.nickname || item.nickname || "匿名用户" }}</div> <!-- <img class="group" src="https://o.x-php.com/Zvt57TuJSUvkyhw-xG7Y2l-c_ZMtdXfqqsgFptxhcq_cQnrlcPJ0DVESBq_D-81qNDQyOQ~~" /> --> <div class="time">{{ timestamp }}</div> <div class="flex1"></div> <div class="view flexacenter"> <img class="icon" src="https://app.gter.net/image/miniApp/offer/eye-icon.svg" /> <div class="text">{{ item.views }}</div> </div> <div class="btn flexcenter" @click.stop="cutShow"> <img class="icon" src="https://app.gter.net/image/miniApp/offer/dot-dot-dot-gray.png" /> </div> <div v-if="show"> <div class="mask" @click.stop="cutShow"></div> <div class="operate"> <div class="item" @click.stop="report">举报</div> <template v-if="ismanager"> <div class="item" @click.stop="hide">{{ item.hidden == 0 ? "隐藏" : "显示" }}</div> <div class="item" @click.stop="recommend">{{ item.recommend == 1 ? "取消" : "" }}推荐</div> <div class="item" @click.stop="essence">{{ item.best == 1 ? "取消" : "" }}精华</div> </template> </div> </div></div><div class="label flexflex" v-if="sectionn?.length || tags?.length || item.recommend == 1 || item.best == 1"> <img class="item icon" v-if="item.recommend == 1 && item.best != 1" src="./img/recommend-icon.png" /> <img class="item icon" v-if="item.best == 1" src="./img/essence-icon.png" /> <a class="item blue" v-for="(item, index) in sectionn" :key="item" :href="'http://14.22.79.19:9551/?tpl=forum/search-tag&tag=' + item" target="_blank">{{ item }}</a> <a class="item" v-for="(item, index) in tags" :key="item" :href="'http://14.22.79.19:9551/?tpl=forum/search-tag&tag=' + item" target="_blank">{{ item }}</a></div><report v-if="reportState" :itemdata="item"></report>`,
|
||||
});
|
||||
|
||||
@@ -30,8 +30,8 @@
|
||||
<div class="label flexflex" v-if="sectionn?.length || tags?.length || item.recommend == 1 || item.best == 1">
|
||||
<img class="item icon" v-if="item.recommend == 1 && item.best != 1" src="./img/recommend-icon.png" />
|
||||
<img class="item icon" v-if="item.best == 1" src="./img/essence-icon.png" />
|
||||
<div class="item blue" v-for="(item, index) in sectionn" :key="item">{{ item }}</div>
|
||||
<div class="item" v-for="(item, index) in tags" :key="item">{{ item }}</div>
|
||||
<a class="item blue" v-for="(item, index) in sectionn" :key="item" :href="'http://14.22.79.19:9551/?tpl=forum/search-tag&tag=' + item" target="_blank">{{ item }}</a>
|
||||
<a class="item" v-for="(item, index) in tags" :key="item" :href="'http://14.22.79.19:9551/?tpl=forum/search-tag&tag=' + item" target="_blank">{{ item }}</a>
|
||||
</div>
|
||||
|
||||
<report v-if="reportState" :itemdata="item"></report>
|
||||
|
||||
@@ -8,6 +8,10 @@ import { itemHead } from "../item-head/item-head.js";
|
||||
export const latestList = defineComponent({
|
||||
name: "latestList",
|
||||
props: {
|
||||
boxtype: {
|
||||
type: String,
|
||||
default: "",
|
||||
},
|
||||
itemdata: {
|
||||
type: Object,
|
||||
default: () => {},
|
||||
@@ -18,9 +22,19 @@ export const latestList = defineComponent({
|
||||
let item = ref({ ...props.itemdata });
|
||||
let postsTab = ref("newest"); // newest essence
|
||||
|
||||
let boxtype = ref(props.boxtype);
|
||||
console.log(boxtype.value);
|
||||
onMounted(() => {
|
||||
getTopicLatest();
|
||||
topicHandpicked();
|
||||
if (props.boxtype == "newest") {
|
||||
// boxtype.value = "newest";
|
||||
getTopicLatest();
|
||||
} else if (props.boxtype == "essence") {
|
||||
// boxtype.value = "essence";
|
||||
topicHandpicked();
|
||||
} else {
|
||||
getTopicLatest();
|
||||
topicHandpicked();
|
||||
}
|
||||
});
|
||||
|
||||
let count = 0;
|
||||
@@ -35,18 +49,24 @@ export const latestList = defineComponent({
|
||||
nextTick(() => {
|
||||
count += 1;
|
||||
examineCount();
|
||||
if (props.boxtype == "newest") {
|
||||
tabPostsItem("newest");
|
||||
}
|
||||
});
|
||||
});
|
||||
};
|
||||
|
||||
let topList = ref([]);
|
||||
const topicHandpicked = () => {
|
||||
ajaxget(`/v2/api/forum/topicHandpicked`).then((res) => {
|
||||
ajaxget(`/v2/api/forum/topicLists?simple=1&best=1`).then((res) => {
|
||||
const data = res.data;
|
||||
topList.value = data;
|
||||
topList.value = data.data;
|
||||
nextTick(() => {
|
||||
count += 1;
|
||||
examineCount();
|
||||
if (props.boxtype == "essence") {
|
||||
tabPostsItem("essence");
|
||||
}
|
||||
});
|
||||
});
|
||||
};
|
||||
@@ -59,39 +79,38 @@ export const latestList = defineComponent({
|
||||
const tabPostsArr = ["newest", "essence"];
|
||||
const tabPostsItem = (key) => {
|
||||
if (key == postsTab.value) return;
|
||||
|
||||
const boxbox = document.querySelector(`.posts-box`);
|
||||
const boxbox = document.querySelector(`.posts-box.boxtype-${boxtype.value}`);
|
||||
boxbox.classList.add(`box-${key}`);
|
||||
boxbox.classList.remove(`box-${postsTab.value}`);
|
||||
|
||||
let index = tabPostsArr.indexOf(key);
|
||||
// let index = tabPostsArr.indexOf(key);
|
||||
|
||||
// 修改 tab 状态的
|
||||
if (postsTab.value) {
|
||||
let oldNode = boxbox.querySelector(`.slideshow-box .tab-item.${postsTab.value}`);
|
||||
oldNode.classList.toggle("pitch");
|
||||
boxbox.classList.remove(`box-${postsTab.value}`);
|
||||
}
|
||||
// if (postsTab.value) {
|
||||
// let oldNode = boxbox.querySelector(`.slideshow-box .tab-item.${postsTab.value}`);
|
||||
// oldNode.classList.toggle("pitch");
|
||||
// boxbox.classList.remove(`box-${postsTab.value}`);
|
||||
// }
|
||||
|
||||
let targetTabNode = boxbox.querySelector(`.slideshow-box .tab-item.${key}`);
|
||||
targetTabNode.classList.toggle("pitch");
|
||||
let targetHeight = targetTabNode.offsetHeight;
|
||||
// let targetTabNode = boxbox.querySelector(`.slideshow-box .tab-item.${key}`);
|
||||
// targetTabNode.classList.toggle("pitch");
|
||||
|
||||
// 修改全局背景状态的
|
||||
let targetContentNode = boxbox.querySelector(`.slideshow-content .${key}-side-box`);
|
||||
let targetContentHeight = targetContentNode.offsetHeight;
|
||||
// // 修改全局背景状态的
|
||||
// let targetContentNode = boxbox.querySelector(`.slideshow-content .${key}-side-box`);
|
||||
// let targetContentHeight = targetContentNode.offsetHeight;
|
||||
|
||||
boxbox.style.height = targetContentHeight + 66 + "px";
|
||||
// boxbox.style.height = targetContentHeight + 66 + "px";
|
||||
|
||||
let slideshowContent = boxbox.querySelector(".slideshow-content");
|
||||
slideshowContent.scrollTo({
|
||||
left: 290 * index,
|
||||
behavior: "smooth",
|
||||
});
|
||||
// let slideshowContent = boxbox.querySelector(".slideshow-content");
|
||||
// slideshowContent.scrollTo({
|
||||
// left: 290 * index,
|
||||
// behavior: "smooth",
|
||||
// });
|
||||
|
||||
postsTab.value = key;
|
||||
};
|
||||
|
||||
return { tabPostsItem, postsTab, topList, latestList, item };
|
||||
return { boxtype, tabPostsItem, postsTab, topList, latestList, item };
|
||||
},
|
||||
|
||||
components: {
|
||||
@@ -99,5 +118,5 @@ export const latestList = defineComponent({
|
||||
itemHead,
|
||||
},
|
||||
|
||||
template: `<div class="posts-box box-newest"> <div 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="//framework.x-php.com/gter/image/gter/forum/assets/forum/bounding-circle-green.svg?v=5.2.91_202030101" alt=""> <div class="box"> <a v-for="(item, index) in latestList" :key="index" class="item flexacenter vuehide" href="https://bbs.gter.net/thread-2646177-1-1.html" target="_blank"> <div class="dot dot-green"></div> <div class="text one-line-display">{{ item.title }}</div> </a> </div> </div> <!-- essence 精选 --> <div class="essence-side-box side-box"> <img class="bounding" src="//framework.x-php.com/gter/image/gter/forum/assets/forum/bounding-circle-blue.svg?v=5.2.91_202030101" alt=""> <div class="box"> <a v-for="(item, index) in topList" :key="index" class="item flexacenter vuehide" href="https://bbs.gter.net/thread-2640196-1-1.html" target="_blank"> <div class="dot"></div> <div class="text one-line-display">{{ item.title }}</div> </a> </div> </div> </div></div>`,
|
||||
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="//framework.x-php.com/gter/image/gter/forum/assets/forum/bounding-circle-green.svg?v=5.2.91_202030101" alt="" /> <div class="box"> <a v-for="(item, index) in latestList" :key="index" class="item flexacenter vuehide" :href="'http://14.22.79.19:9551/?tpl=forum/details&uniqid=' + item.uniqid" target="_blank"> <div class="dot dot-green"></div> <div class="text one-line-display">{{ item.title }}</div> </a> </div> </div> <!-- essence 精选 --> <div class="essence-side-box side-box"> <img class="bounding" src="//framework.x-php.com/gter/image/gter/forum/assets/forum/bounding-circle-blue.svg?v=5.2.91_202030101" alt="" /> <div class="box"> <a v-for="(item, index) in topList" :key="index" class="item flexacenter vuehide" :href="'http://14.22.79.19:9551/?tpl=forum/details&uniqid=' + item.uniqid" target="_blank"> <div class="dot"></div> <div class="text one-line-display">{{ item.title }}</div> </a> </div> </div> </div></div>`,
|
||||
});
|
||||
|
||||
@@ -1,17 +1,24 @@
|
||||
<div class="posts-box box-newest">
|
||||
<div class="slideshow-box">
|
||||
<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 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="//framework.x-php.com/gter/image/gter/forum/assets/forum/bounding-circle-green.svg?v=5.2.91_202030101" alt="">
|
||||
<img class="bounding" src="//framework.x-php.com/gter/image/gter/forum/assets/forum/bounding-circle-green.svg?v=5.2.91_202030101" alt="" />
|
||||
<div class="box">
|
||||
<a v-for="(item, index) in latestList" :key="index" class="item flexacenter vuehide" href="https://bbs.gter.net/thread-2646177-1-1.html" target="_blank">
|
||||
<a v-for="(item, index) in latestList" :key="index" class="item flexacenter vuehide" :href="'http://14.22.79.19:9551/?tpl=forum/details&uniqid=' + item.uniqid" target="_blank">
|
||||
<div class="dot dot-green"></div>
|
||||
<div class="text one-line-display">{{ item.title }}</div>
|
||||
</a>
|
||||
@@ -20,14 +27,13 @@
|
||||
|
||||
<!-- essence 精选 -->
|
||||
<div class="essence-side-box side-box">
|
||||
<img class="bounding" src="//framework.x-php.com/gter/image/gter/forum/assets/forum/bounding-circle-blue.svg?v=5.2.91_202030101" alt="">
|
||||
<img class="bounding" src="//framework.x-php.com/gter/image/gter/forum/assets/forum/bounding-circle-blue.svg?v=5.2.91_202030101" alt="" />
|
||||
<div class="box">
|
||||
<a v-for="(item, index) in topList" :key="index" class="item flexacenter vuehide" href="https://bbs.gter.net/thread-2640196-1-1.html" target="_blank">
|
||||
<a v-for="(item, index) in topList" :key="index" class="item flexacenter vuehide" :href="'http://14.22.79.19:9551/?tpl=forum/details&uniqid=' + item.uniqid" target="_blank">
|
||||
<div class="dot"></div>
|
||||
<div class="text one-line-display">{{ item.title }}</div>
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
@@ -17,14 +17,13 @@ export const slideshowBox = defineComponent({
|
||||
|
||||
onMounted(() => getTopicLatest());
|
||||
|
||||
let tabPitch = ref("offer"); // offer vote interviewexperience
|
||||
let tabPitch = ref("thread"); // thread offer vote interviewexperience
|
||||
|
||||
let latestList = ref({});
|
||||
const getTopicLatest = () => {
|
||||
ajaxget(`/v2/api/forum/getTopicLatest?limit=4`).then((res) => {
|
||||
const data = res.data || [];
|
||||
|
||||
data.vote.forEach((item) => {
|
||||
(data.vote || []).forEach((item) => {
|
||||
if (!item.title) {
|
||||
item.title = item.content;
|
||||
item.content = "";
|
||||
@@ -67,6 +66,7 @@ export const slideshowBox = defineComponent({
|
||||
boxbox.style.height = targetContentHeight + 66 + "px";
|
||||
|
||||
let slideshowContent = boxbox.querySelector(".slideshow-content");
|
||||
|
||||
slideshowContent.scrollTo({
|
||||
left: 272 * index,
|
||||
behavior: "smooth",
|
||||
@@ -78,5 +78,5 @@ export const slideshowBox = defineComponent({
|
||||
return { tabItem, tabPitch, tabPitch, latestList };
|
||||
},
|
||||
|
||||
template: `<div class="box-box" :class="['box-' + tabPitch]"> <div class="slideshow-box"> <div class="tab-list flexacenter"> <div class="tab-item thread" :class="{'pitch': tabPitch == 'thread'}" @click="tabItem('thread')">帖子</div> <div class="tab-item offer" :class="{'pitch': tabPitch == 'offer'}" @click="tabItem('offer')">Offer</div> <div class="tab-item vote" :class="{'pitch': tabPitch == 'vote'}" @click="tabItem('vote')">投票</div> <div class="tab-item interviewexperience" :class="{'pitch': tabPitch == 'interviewexperience'}" @click="tabItem('interviewexperience')">面经</div> </div> </div> <div class="slideshow-content flexflex"> <!-- 问答 --> <div class="thread-side-box side-box"> <div class="box"> <a v-for="item in latestList.thread" :key="item.uniqid" class="item" target="_blank" href="https://ask.gter.net/index.html?uniqid=fyT5SDvfizTf"> <div class="question flexacenter"> <div class="text flex1 ellipsis">{{ item.title }}</div> </div> <div class="answer flexacenter"> <div class="text flex1"> <div class="texttext">{{ item.content }}</div> </div> </div> </a> <a class="add-btn flexcenter" href="https://ask.gter.net" target="_blank"> <div>more</div> <img class="" style="margin-left: 8px;" src="./img/right-arrow-black.svg"> </a> </div> </div> <!-- offer --> <div class="offer-side-box side-box"> <div class="box"> <a v-for="item in latestList.offer" :key="item.thread_id" class="item flexflex" href="https://offer.gter.net/details/44qD8Ce4uDaO" target="_blank"> <img class="school-img" :src="item.data.schoollogo" /> <div class="school-detail flex1 flexflex"> <div class="school-name one-line-display">{{ item.data.schoolname }}</div> <div class="school-brief one-line-display">{{ item.data.professional }}</div> <div class="school-offer flexacenter"> <span>{{ item.data.degree }}</span> <span class="long-string">|</span> <span>{{ item.data.semester }}</span> <span class="long-string">|</span> <span>{{ item.data.apply_results_text }}</span> </div> </div> </a> <a class="add-btn flexcenter" href="https://offer.gter.net" target="_blank"> <div>more</div> <img class="" style="margin-left: 8px;" src="./img/right-arrow-black.svg"> </a> </div> </div> <!-- 投票 --> <div class="vote-side-box side-box"> <div class="box"> <a v-for="item in latestList.vote" :key="item.thread_id" class="item flexflex vuehide" target="_blank" href="https://vote.gter.net/details/{{ item.thread_id }}"> <div class="name one-line-display">{{ item.title }}</div> <div class="brief">{{ item.content }}</div> </a> <a class="add-btn flexcenter" href="https://vote.gter.net" target="_blank"> <div>more</div> <img class="" style="margin-left: 8px;" src="./img/right-arrow-black.svg"> </a> </div> </div> <!-- mj --> <div class="interviewexperience-side-box side-box"> <div class="box"> <a v-for="item in latestList.interviewexperience" :key="item.thread_id" class="item flexflex" href="https://interviewexperience.gter.net/details/{{ item.thread_id }}" target="_blank"> <div class="school one-line-display">{{ item.data.schoolname }}</div> <div class="major one-line-display"></div> <div class="info"> <img class="icon" :src="item.user.avatar" /> <span class="text">{{ item.title || item.content }} </span> </div> </a> <a class="add-btn flexcenter" href="https://interviewexperience.gter.net" target="_blank"> <div>more</div> <img class="" style="margin-left: 8px;" src="./img/right-arrow-black.svg"> </a> </div> </div> </div></div>`,
|
||||
template: `<div class="box-box" :class="['box-' + tabPitch]"> <div class="slideshow-box"> <div class="tab-list flexacenter"> <div class="tab-item thread" :class="{'pitch': tabPitch == 'thread'}" @click="tabItem('thread')">帖子</div> <div class="tab-item offer" :class="{'pitch': tabPitch == 'offer'}" @click="tabItem('offer')">Offer</div> <div class="tab-item vote" :class="{'pitch': tabPitch == 'vote'}" @click="tabItem('vote')">投票</div> <div class="tab-item interviewexperience" :class="{'pitch': tabPitch == 'interviewexperience'}" @click="tabItem('interviewexperience')">面经</div> </div> </div> <div class="slideshow-content flexflex"> <!-- 问答 --> <div class="thread-side-box side-box"> <div class="box"> <a v-for="item in latestList.thread" :key="item.uniqid" class="item" target="_blank" :href="'http://14.22.79.19:9551/?tpl=forum/details&uniqid=' + item.uniqid"> <div class="question flexacenter"> <div class="text flex1 ellipsis">{{ item.title }}</div> </div> <div class="answer flexacenter"> <div class="text flex1"> <div class="texttext">{{ item.content }}</div> </div> </div> </a> <a class="add-btn flexcenter" href="https://ask.gter.net" target="_blank"> <div>more</div> <img class="" style="margin-left: 8px;" src="./img/right-arrow-black.svg"> </a> </div> </div> <!-- offer --> <div class="offer-side-box side-box"> <div class="box"> <a v-for="item in latestList.offer" :key="item.uniqid" class="item flexflex" :href="'https://offer.gter.net/details/' + item.uniqid" target="_blank"> <img class="school-img" :src="item.data.schoollogo" /> <div class="school-detail flex1 flexflex"> <div class="school-name one-line-display">{{ item.data.schoolname }}</div> <div class="school-brief one-line-display">{{ item.data.professional }}</div> <div class="school-offer flexacenter"> <span>{{ item.data.degree }}</span> <span class="long-string">|</span> <span>{{ item.data.semester }}</span> <span class="long-string">|</span> <span>{{ item.data.apply_results_text }}</span> </div> </div> </a> <a class="add-btn flexcenter" href="https://offer.gter.net" target="_blank"> <div>more</div> <img class="" style="margin-left: 8px;" src="./img/right-arrow-black.svg"> </a> </div> </div> <!-- 投票 --> <div class="vote-side-box side-box"> <div class="box"> <a v-for="item in latestList.vote" :key="item.uniqid" class="item flexflex vuehide" target="_blank" :href="'https://vote.gter.net/details/' + item.uniqid"> <div class="name one-line-display">{{ item.title }}</div> <div class="brief">{{ item.content }}</div> </a> <a class="add-btn flexcenter" href="https://vote.gter.net" target="_blank"> <div>more</div> <img class="" style="margin-left: 8px;" src="./img/right-arrow-black.svg"> </a> </div> </div> <!-- mj --> <div class="interviewexperience-side-box side-box"> <div class="box"> <a v-for="item in latestList.interviewexperience" :key="item.thread_id" class="item flexflex" :href="'https://interviewexperience.gter.net/details/' + item.uniqid" target="_blank"> <div class="school one-line-display">{{ item.data.schoolname }}</div> <div class="major one-line-display"></div> <div class="info"> <img class="icon" :src="item.user.avatar" /> <span class="text">{{ item.title || item.content }} </span> </div> </a> <a class="add-btn flexcenter" href="https://interviewexperience.gter.net" target="_blank"> <div>more</div> <img class="" style="margin-left: 8px;" src="./img/right-arrow-black.svg"> </a> </div> </div> </div></div>`,
|
||||
});
|
||||
|
||||
@@ -11,7 +11,7 @@
|
||||
<!-- 问答 -->
|
||||
<div class="thread-side-box side-box">
|
||||
<div class="box">
|
||||
<a v-for="item in latestList.thread" :key="item.uniqid" class="item" target="_blank" href="https://ask.gter.net/index.html?uniqid=fyT5SDvfizTf">
|
||||
<a v-for="item in latestList.thread" :key="item.uniqid" class="item" target="_blank" :href="'http://14.22.79.19:9551/?tpl=forum/details&uniqid=' + item.uniqid">
|
||||
<div class="question flexacenter">
|
||||
<div class="text flex1 ellipsis">{{ item.title }}</div>
|
||||
</div>
|
||||
@@ -31,7 +31,7 @@
|
||||
<!-- offer -->
|
||||
<div class="offer-side-box side-box">
|
||||
<div class="box">
|
||||
<a v-for="item in latestList.offer" :key="item.thread_id" class="item flexflex" href="https://offer.gter.net/details/44qD8Ce4uDaO" target="_blank">
|
||||
<a v-for="item in latestList.offer" :key="item.uniqid" class="item flexflex" :href="'https://offer.gter.net/details/' + item.uniqid" target="_blank">
|
||||
<img class="school-img" :src="item.data.schoollogo" />
|
||||
<div class="school-detail flex1 flexflex">
|
||||
<div class="school-name one-line-display">{{ item.data.schoolname }}</div>
|
||||
@@ -56,7 +56,7 @@
|
||||
<!-- 投票 -->
|
||||
<div class="vote-side-box side-box">
|
||||
<div class="box">
|
||||
<a v-for="item in latestList.vote" :key="item.thread_id" class="item flexflex vuehide" target="_blank" href="https://vote.gter.net/details/{{ item.thread_id }}">
|
||||
<a v-for="item in latestList.vote" :key="item.uniqid" class="item flexflex vuehide" target="_blank" :href="'https://vote.gter.net/details/' + item.uniqid">
|
||||
<div class="name one-line-display">{{ item.title }}</div>
|
||||
<div class="brief">{{ item.content }}</div>
|
||||
</a>
|
||||
@@ -71,7 +71,7 @@
|
||||
<!-- mj -->
|
||||
<div class="interviewexperience-side-box side-box">
|
||||
<div class="box">
|
||||
<a v-for="item in latestList.interviewexperience" :key="item.thread_id" class="item flexflex" href="https://interviewexperience.gter.net/details/{{ item.thread_id }}" target="_blank">
|
||||
<a v-for="item in latestList.interviewexperience" :key="item.thread_id" class="item flexflex" :href="'https://interviewexperience.gter.net/details/' + item.uniqid" target="_blank">
|
||||
<div class="school one-line-display">{{ item.data.schoolname }}</div>
|
||||
<div class="major one-line-display"></div>
|
||||
<div class="info">
|
||||
|
||||
112
css/details.css
112
css/details.css
@@ -44,6 +44,9 @@
|
||||
font-size: 13px;
|
||||
color: #aaaaaa;
|
||||
}
|
||||
#details .matter .matter-left .matter-head .operate {
|
||||
position: relative;
|
||||
}
|
||||
#details .matter .matter-left .matter-head .operate .view {
|
||||
font-size: 12px;
|
||||
color: #aaaaaa;
|
||||
@@ -65,6 +68,53 @@
|
||||
width: 18px;
|
||||
height: 18px;
|
||||
}
|
||||
#details .matter .matter-left .matter-head .operate .mask {
|
||||
position: fixed;
|
||||
top: 0;
|
||||
left: 0;
|
||||
width: 100vw;
|
||||
height: 100vh;
|
||||
z-index: 2;
|
||||
background-color: rgba(0, 0, 0, 0.1);
|
||||
}
|
||||
#details .matter .matter-left .matter-head .operate .operate {
|
||||
position: absolute;
|
||||
top: 23px;
|
||||
right: 0;
|
||||
width: 100px;
|
||||
background-color: #f2f2f2;
|
||||
border-radius: 8px;
|
||||
padding: 5px;
|
||||
z-index: 2;
|
||||
}
|
||||
#details .matter .matter-left .matter-head .operate .operate::after {
|
||||
content: "";
|
||||
width: calc(100% - 10px);
|
||||
height: calc(100% - 10px);
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
left: 50%;
|
||||
display: block;
|
||||
transform: translate(-50%, -50%);
|
||||
background-color: #fbfbfb;
|
||||
z-index: -1;
|
||||
}
|
||||
#details .matter .matter-left .matter-head .operate .operate .item {
|
||||
text-align: center;
|
||||
font-size: 18px;
|
||||
color: #333333;
|
||||
padding: 14px 0;
|
||||
cursor: pointer;
|
||||
}
|
||||
#details .matter .matter-left .matter-head .operate .operate .item:first-of-type {
|
||||
padding-top: 24px;
|
||||
}
|
||||
#details .matter .matter-left .matter-head .operate .operate .item:last-of-type {
|
||||
padding-bottom: 24px;
|
||||
}
|
||||
#details .matter .matter-left .matter-head .operate .operate .item:not(:last-of-type) {
|
||||
border-bottom: 1px dotted #d7d7d7;
|
||||
}
|
||||
#details .matter .matter-left .label {
|
||||
padding: 20px 30px 20px;
|
||||
flex-wrap: wrap;
|
||||
@@ -140,6 +190,67 @@
|
||||
#details .matter .matter-left .action-bar .action-bar-item:not(:last-child) {
|
||||
margin-right: 60px;
|
||||
}
|
||||
#details .matter .matter-left .action-bar .action-bar-item.share {
|
||||
position: relative;
|
||||
}
|
||||
#details .matter .matter-left .action-bar .action-bar-item.share:hover .share-box {
|
||||
display: flex;
|
||||
}
|
||||
#details .matter .matter-left .action-bar .action-bar-item .share-box {
|
||||
z-index: 2;
|
||||
position: absolute;
|
||||
left: 50%;
|
||||
transform: translateX(-50%);
|
||||
bottom: 42px;
|
||||
width: 130px;
|
||||
height: 100px;
|
||||
background-color: #ffffff;
|
||||
border-radius: 6px;
|
||||
box-shadow: 0px 0px 5px rgba(0, 0, 0, 0.16862745);
|
||||
flex-direction: column;
|
||||
display: none;
|
||||
}
|
||||
#details .matter .matter-left .action-bar .action-bar-item .share-box .share-item {
|
||||
width: 100%;
|
||||
height: 40px;
|
||||
color: #555555;
|
||||
font-size: 14px;
|
||||
}
|
||||
#details .matter .matter-left .action-bar .action-bar-item .share-box .share-item:hover {
|
||||
background-color: #f0fafd;
|
||||
}
|
||||
#details .matter .matter-left .action-bar .action-bar-item .share-box .share-item .share-icon {
|
||||
width: 18px;
|
||||
height: 18px;
|
||||
margin-right: 13px;
|
||||
}
|
||||
#details .matter .matter-left .action-bar .action-bar-item .share-box .share-item.wenxin:hover .QRcode-box {
|
||||
display: flex;
|
||||
}
|
||||
#details .matter .matter-left .action-bar .action-bar-item .share-box .share-item .QRcode-box {
|
||||
z-index: 1;
|
||||
display: none;
|
||||
position: absolute;
|
||||
top: 48px;
|
||||
left: 100%;
|
||||
width: 140px;
|
||||
height: 166px;
|
||||
background-color: #ffffff;
|
||||
border-radius: 6px;
|
||||
padding: 20px;
|
||||
box-shadow: 0px 0px 5px rgba(0, 0, 0, 0.16862745);
|
||||
flex-direction: column;
|
||||
}
|
||||
#details .matter .matter-left .action-bar .action-bar-item .share-box .share-item .QRcode-box .QRcode {
|
||||
width: 100px;
|
||||
height: 100px;
|
||||
margin-bottom: 4px;
|
||||
}
|
||||
#details .matter .matter-left .action-bar .action-bar-item .share-box .share-item .QRcode-box .text {
|
||||
color: #555555;
|
||||
font-size: 14px;
|
||||
line-height: normal;
|
||||
}
|
||||
#details .matter .matter-left .related .related-head {
|
||||
padding-left: 30px;
|
||||
padding-top: 20px;
|
||||
@@ -320,6 +431,7 @@
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
background-color: rgba(0, 0, 0, 0.5);
|
||||
z-index: 2;
|
||||
}
|
||||
#details .coins-area .coins-box {
|
||||
width: 624px;
|
||||
|
||||
130
css/details.less
130
css/details.less
@@ -50,6 +50,7 @@
|
||||
}
|
||||
|
||||
.operate {
|
||||
position: relative;
|
||||
.view {
|
||||
.icon {
|
||||
width: 13px;
|
||||
@@ -74,6 +75,60 @@
|
||||
height: 18px;
|
||||
}
|
||||
}
|
||||
|
||||
.mask {
|
||||
position: fixed;
|
||||
top: 0;
|
||||
left: 0;
|
||||
width: 100vw;
|
||||
height: 100vh;
|
||||
z-index: 2;
|
||||
background-color: rgba(0, 0, 0, 0.1);
|
||||
}
|
||||
|
||||
.operate {
|
||||
position: absolute;
|
||||
top: 23px;
|
||||
right: 0;
|
||||
width: 100px;
|
||||
background-color: rgba(242, 242, 242, 1);
|
||||
border-radius: 8px;
|
||||
padding: 5px;
|
||||
z-index: 2;
|
||||
|
||||
&::after {
|
||||
content: "";
|
||||
width: calc(100% - 10px);
|
||||
height: calc(100% - 10px);
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
left: 50%;
|
||||
display: block;
|
||||
transform: translate(-50%, -50%);
|
||||
background-color: rgba(251, 251, 251, 1);
|
||||
z-index: -1;
|
||||
}
|
||||
|
||||
.item {
|
||||
text-align: center;
|
||||
font-size: 18px;
|
||||
color: #333333;
|
||||
padding: 14px 0;
|
||||
cursor: pointer;
|
||||
|
||||
&:first-of-type {
|
||||
padding-top: 24px;
|
||||
}
|
||||
|
||||
&:last-of-type {
|
||||
padding-bottom: 24px;
|
||||
}
|
||||
|
||||
&:not(:last-of-type) {
|
||||
border-bottom: 1px dotted #d7d7d7;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@@ -161,6 +216,80 @@
|
||||
&:not(:last-child) {
|
||||
margin-right: 60px;
|
||||
}
|
||||
|
||||
&.share {
|
||||
position: relative;
|
||||
&:hover {
|
||||
.share-box {
|
||||
display: flex;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.share-box {
|
||||
z-index: 2;
|
||||
position: absolute;
|
||||
left: 50%;
|
||||
transform: translateX(-50%);
|
||||
bottom: 42px;
|
||||
width: 130px;
|
||||
height: 100px;
|
||||
background-color: rgba(255, 255, 255, 1);
|
||||
border-radius: 6px;
|
||||
box-shadow: 0px 0px 5px rgba(0, 0, 0, 0.168627450980392);
|
||||
flex-direction: column;
|
||||
display: none;
|
||||
|
||||
.share-item {
|
||||
width: 100%;
|
||||
height: 40px;
|
||||
color: #555555;
|
||||
font-size: 14px;
|
||||
|
||||
&:hover {
|
||||
background-color: rgba(240, 250, 253, 1);
|
||||
}
|
||||
|
||||
.share-icon {
|
||||
width: 18px;
|
||||
height: 18px;
|
||||
margin-right: 13px;
|
||||
}
|
||||
|
||||
&.wenxin:hover {
|
||||
.QRcode-box {
|
||||
display: flex;
|
||||
}
|
||||
}
|
||||
|
||||
.QRcode-box {
|
||||
z-index: 1;
|
||||
display: none;
|
||||
position: absolute;
|
||||
top: 48px;
|
||||
left: 100%;
|
||||
width: 140px;
|
||||
height: 166px;
|
||||
background-color: #ffffff;
|
||||
border-radius: 6px;
|
||||
padding: 20px;
|
||||
box-shadow: 0px 0px 5px rgba(0, 0, 0, 0.16862745);
|
||||
flex-direction: column;
|
||||
|
||||
.QRcode {
|
||||
width: 100px;
|
||||
height: 100px;
|
||||
margin-bottom: 4px;
|
||||
}
|
||||
|
||||
.text {
|
||||
color: #555555;
|
||||
font-size: 14px;
|
||||
line-height: normal;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@@ -380,6 +509,7 @@
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
background-color: rgba(0, 0, 0, 0.5);
|
||||
z-index: 2;
|
||||
|
||||
.coins-box {
|
||||
width: 624px;
|
||||
|
||||
266
css/edit.css
Normal file
266
css/edit.css
Normal file
@@ -0,0 +1,266 @@
|
||||
#edit {
|
||||
margin: 0 auto;
|
||||
}
|
||||
#edit a {
|
||||
text-decoration: none;
|
||||
}
|
||||
#edit .edit-head {
|
||||
width: 100%;
|
||||
height: 60px;
|
||||
background: linear-gradient(180deg, #ffffff -41%, #eef8f9 96%);
|
||||
margin-bottom: 20px;
|
||||
}
|
||||
#edit .edit-head .edit-head-container {
|
||||
width: 1200px;
|
||||
margin: 0 auto;
|
||||
}
|
||||
#edit .edit-head .edit-head-container .icon {
|
||||
width: 135px;
|
||||
height: 33px;
|
||||
margin-right: 20px;
|
||||
}
|
||||
#edit .edit-head .edit-head-container .dot {
|
||||
width: 6px;
|
||||
height: 6px;
|
||||
background-color: #d35110;
|
||||
border-radius: 50%;
|
||||
margin-right: 20px;
|
||||
}
|
||||
#edit .edit-head .edit-head-container .title {
|
||||
font-family: "PingFangSC-Semibold", "PingFang SC Semibold", "PingFang SC", sans-serif;
|
||||
font-weight: 650;
|
||||
font-style: normal;
|
||||
font-size: 18px;
|
||||
color: #000000;
|
||||
margin-right: 20px;
|
||||
}
|
||||
#edit .edit-head .edit-head-container .hint {
|
||||
font-size: 13px;
|
||||
color: #aaaaaa;
|
||||
}
|
||||
#edit .edit-head .edit-head-container .avatar {
|
||||
width: 32px;
|
||||
height: 32px;
|
||||
border-radius: 50%;
|
||||
}
|
||||
#edit .edit-container {
|
||||
width: 890px;
|
||||
background-color: #ffffff;
|
||||
border: 1px solid #e9eef2;
|
||||
border-radius: 10px;
|
||||
margin: 0 auto;
|
||||
}
|
||||
#edit .edit-container .title-input {
|
||||
width: 100%;
|
||||
height: 100px;
|
||||
border: none;
|
||||
outline: none;
|
||||
border-radius: 10px 10px 0 0;
|
||||
font-family: "PingFangSC-Semibold", "PingFang SC Semibold", "PingFang SC", sans-serif;
|
||||
font-weight: 650;
|
||||
font-style: normal;
|
||||
font-size: 24px;
|
||||
padding: 0 36px;
|
||||
border-bottom: 1px solid #ebebeb;
|
||||
}
|
||||
#edit .edit-container .editor-toolbar {
|
||||
height: 36px;
|
||||
background-color: #fbfbfb;
|
||||
padding-left: 35px;
|
||||
}
|
||||
#edit .edit-container .editor-toolbar .toolbar-item {
|
||||
cursor: pointer;
|
||||
height: 100%;
|
||||
font-family: "PingFangSC-Regular", "PingFang SC", sans-serif;
|
||||
font-weight: 400;
|
||||
font-style: normal;
|
||||
font-size: 14px;
|
||||
color: #000000;
|
||||
line-height: 23px;
|
||||
margin-right: 50px;
|
||||
position: relative;
|
||||
}
|
||||
#edit .edit-container .editor-toolbar .toolbar-item .icon {
|
||||
width: 16px;
|
||||
height: 16px;
|
||||
margin-right: 5px;
|
||||
}
|
||||
#edit .edit-container .editor-toolbar .toolbar-item .file {
|
||||
opacity: 0;
|
||||
/* 隐藏输入框 */
|
||||
background: transparent;
|
||||
border: none;
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
cursor: pointer;
|
||||
}
|
||||
#edit .edit-container .editor-toolbar .toolbar-item .file::after {
|
||||
content: "";
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
}
|
||||
#edit .edit-container .editor-toolbar .toolbar-item.expression.pitch .emoji-box-mask {
|
||||
display: block;
|
||||
}
|
||||
#edit .edit-container .editor-toolbar .toolbar-item.expression.pitch .emoji-box {
|
||||
display: flex;
|
||||
}
|
||||
#edit .edit-container .editor-toolbar .toolbar-item .emoji-box-mask {
|
||||
position: fixed;
|
||||
top: 0;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
z-index: 1;
|
||||
background-color: rgba(0, 0, 0, 0.20392157);
|
||||
display: none;
|
||||
}
|
||||
#edit .edit-container .editor-toolbar .toolbar-item .emoji-box {
|
||||
width: 582px;
|
||||
border-radius: 8px;
|
||||
background-color: #fff;
|
||||
filter: drop-shadow(0 0 11px rgba(0, 0, 0, 0.1));
|
||||
top: 45px;
|
||||
position: absolute;
|
||||
z-index: 1;
|
||||
left: 50%;
|
||||
transform: translateX(-50%);
|
||||
border: 1px solid #ebebeb;
|
||||
display: none;
|
||||
flex-wrap: wrap;
|
||||
font-size: 22px;
|
||||
padding: 8px;
|
||||
}
|
||||
#edit .edit-container .editor-toolbar .toolbar-item .emoji-box::after {
|
||||
content: "";
|
||||
width: 0;
|
||||
height: 0;
|
||||
border-left: 8px solid transparent;
|
||||
border-right: 8px solid transparent;
|
||||
border-bottom: 8px solid #ffffff;
|
||||
position: absolute;
|
||||
top: -8px;
|
||||
left: 50%;
|
||||
transform: translateX(-50%);
|
||||
}
|
||||
#edit .edit-container .editor-toolbar .toolbar-item .emoji-box .emoji-icon {
|
||||
margin: 5px;
|
||||
cursor: pointer;
|
||||
}
|
||||
#edit .edit-container .content-input {
|
||||
min-height: 509px;
|
||||
font-family: "PingFangSC-Regular", "PingFang SC", sans-serif;
|
||||
font-size: 15px;
|
||||
color: #555555;
|
||||
line-height: 26px;
|
||||
outline: none;
|
||||
padding: 36px 36px 20px;
|
||||
white-space: break-spaces;
|
||||
position: relative;
|
||||
}
|
||||
#edit .edit-container .content-input.empty:before {
|
||||
content: "输入正文";
|
||||
pointer-events: none;
|
||||
position: absolute;
|
||||
top: 36px;
|
||||
left: 36px;
|
||||
color: #757575;
|
||||
}
|
||||
#edit .edit-container .content-input img {
|
||||
display: block;
|
||||
max-width: 100%;
|
||||
height: 220px;
|
||||
}
|
||||
#edit .edit-container .content-input h2 {
|
||||
color: #000000;
|
||||
font-size: 18px;
|
||||
line-height: 30px;
|
||||
font-family: "PingFangSC-Semibold", "PingFang SC Semibold", "PingFang SC", sans-serif;
|
||||
font-weight: 650;
|
||||
}
|
||||
#edit .edit-container .content-input .blue {
|
||||
color: #026277;
|
||||
margin: 0 4px;
|
||||
}
|
||||
#edit .edit-container .content-input .fill {
|
||||
width: 100%;
|
||||
height: 26px;
|
||||
}
|
||||
#edit .edit-container .tags-list {
|
||||
padding: 0 36px;
|
||||
margin-bottom: 10px;
|
||||
flex-wrap: wrap;
|
||||
}
|
||||
#edit .edit-container .tags-list .tag-item {
|
||||
margin-bottom: 10px;
|
||||
height: 32px;
|
||||
line-height: 32px;
|
||||
background-color: #f6f6f6;
|
||||
border-radius: 73px;
|
||||
padding: 0 14px;
|
||||
font-size: 14px;
|
||||
color: #606060;
|
||||
margin-right: 10px;
|
||||
cursor: pointer;
|
||||
}
|
||||
#edit .edit-container .action-buttons {
|
||||
border-top: 1px solid #ebebeb;
|
||||
padding: 0 36px;
|
||||
justify-content: space-between;
|
||||
}
|
||||
#edit .edit-container .action-buttons .left-section {
|
||||
font-size: 14px;
|
||||
color: #333;
|
||||
cursor: pointer;
|
||||
}
|
||||
#edit .edit-container .action-buttons .left-section .icon-pitch {
|
||||
width: 16px;
|
||||
height: 16px;
|
||||
margin-right: 5px;
|
||||
}
|
||||
#edit .edit-container .action-buttons .left-section .icon {
|
||||
width: 16px;
|
||||
height: 16px;
|
||||
border: 1px solid #797979;
|
||||
margin-right: 5px;
|
||||
}
|
||||
#edit .edit-container .action-buttons .right-section {
|
||||
height: 102px;
|
||||
}
|
||||
#edit .edit-container .action-buttons .right-section .draft-btn,
|
||||
#edit .edit-container .action-buttons .right-section .publish-btn {
|
||||
font-size: 14px;
|
||||
border-radius: 8px;
|
||||
cursor: pointer;
|
||||
}
|
||||
#edit .edit-container .action-buttons .right-section .draft-btn {
|
||||
width: 100px;
|
||||
height: 42px;
|
||||
line-height: 42px;
|
||||
background-color: rgba(242, 242, 242, 0.69803922);
|
||||
color: #7f7f7f;
|
||||
font-size: 14px;
|
||||
margin-right: 15px;
|
||||
}
|
||||
#edit .edit-container .action-buttons .right-section .draft-btn .icon {
|
||||
width: 20px;
|
||||
height: 20px;
|
||||
margin-right: 6px;
|
||||
}
|
||||
#edit .edit-container .action-buttons .right-section .publish-btn {
|
||||
width: 150px;
|
||||
height: 40px;
|
||||
line-height: 40px;
|
||||
font-family: "PingFangSC-Semibold", "PingFang SC Semibold", "PingFang SC", sans-serif;
|
||||
font-weight: 650;
|
||||
font-style: normal;
|
||||
font-size: 16px;
|
||||
color: #000000;
|
||||
background-color: #50e3c2;
|
||||
}
|
||||
302
css/edit.less
Normal file
302
css/edit.less
Normal file
@@ -0,0 +1,302 @@
|
||||
#edit {
|
||||
margin: 0 auto;
|
||||
|
||||
a {
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
.edit-head {
|
||||
width: 100%;
|
||||
height: 60px;
|
||||
background: linear-gradient(180deg, rgba(255, 255, 255, 1) -41%, rgba(238, 248, 249, 1) 96%);
|
||||
margin-bottom: 20px;
|
||||
|
||||
.edit-head-container {
|
||||
width: 1200px;
|
||||
margin: 0 auto;
|
||||
.icon {
|
||||
width: 135px;
|
||||
height: 33px;
|
||||
margin-right: 20px;
|
||||
}
|
||||
|
||||
.dot {
|
||||
width: 6px;
|
||||
height: 6px;
|
||||
background-color: #d35110;
|
||||
border-radius: 50%;
|
||||
margin-right: 20px;
|
||||
}
|
||||
|
||||
.title {
|
||||
font-family: "PingFangSC-Semibold", "PingFang SC Semibold", "PingFang SC", sans-serif;
|
||||
font-weight: 650;
|
||||
font-style: normal;
|
||||
font-size: 18px;
|
||||
color: #000000;
|
||||
margin-right: 20px;
|
||||
}
|
||||
|
||||
.hint {
|
||||
font-size: 13px;
|
||||
color: #aaaaaa;
|
||||
}
|
||||
|
||||
.avatar {
|
||||
width: 32px;
|
||||
height: 32px;
|
||||
border-radius: 50%;
|
||||
;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.edit-container {
|
||||
width: 890px;
|
||||
background-color: rgba(255, 255, 255, 1);
|
||||
border: 1px solid rgba(233, 238, 242, 1);
|
||||
border-radius: 10px;
|
||||
margin: 0 auto;
|
||||
|
||||
.title-input {
|
||||
width: 100%;
|
||||
height: 100px;
|
||||
border: none;
|
||||
outline: none;
|
||||
border-radius: 10px 10px 0 0;
|
||||
font-family: "PingFangSC-Semibold", "PingFang SC Semibold", "PingFang SC", sans-serif;
|
||||
font-weight: 650;
|
||||
font-style: normal;
|
||||
font-size: 24px;
|
||||
padding: 0 36px;
|
||||
border-bottom: 1px solid #ebebeb;
|
||||
}
|
||||
|
||||
.editor-toolbar {
|
||||
height: 36px;
|
||||
background-color: rgba(251, 251, 251, 1);
|
||||
padding-left: 35px;
|
||||
.toolbar-item {
|
||||
.icon {
|
||||
width: 16px;
|
||||
height: 16px;
|
||||
margin-right: 5px;
|
||||
}
|
||||
|
||||
cursor: pointer;
|
||||
height: 100%;
|
||||
font-family: "PingFangSC-Regular", "PingFang SC", sans-serif;
|
||||
font-weight: 400;
|
||||
font-style: normal;
|
||||
font-size: 14px;
|
||||
color: #000000;
|
||||
line-height: 23px;
|
||||
margin-right: 50px;
|
||||
position: relative;
|
||||
|
||||
.file {
|
||||
opacity: 0; /* 隐藏输入框 */
|
||||
background: transparent;
|
||||
border: none;
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
cursor: pointer;
|
||||
|
||||
&::after {
|
||||
content: "";
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
}
|
||||
}
|
||||
|
||||
&.expression.pitch {
|
||||
.emoji-box-mask {
|
||||
display: block;
|
||||
}
|
||||
|
||||
.emoji-box {
|
||||
display: flex;
|
||||
}
|
||||
}
|
||||
|
||||
.emoji-box-mask {
|
||||
position: fixed;
|
||||
top: 0;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
z-index: 1;
|
||||
background-color: rgba(0, 0, 0, 0.20392157);
|
||||
display: none;
|
||||
}
|
||||
|
||||
.emoji-box {
|
||||
width: 582px;
|
||||
border-radius: 8px;
|
||||
background-color: #fff;
|
||||
filter: drop-shadow(0 0 11px rgba(0, 0, 0, 0.1));
|
||||
top: 45px;
|
||||
position: absolute;
|
||||
z-index: 1;
|
||||
left: 50%;
|
||||
transform: translateX(-50%);
|
||||
border: 1px solid #ebebeb;
|
||||
display: none;
|
||||
flex-wrap: wrap;
|
||||
font-size: 22px;
|
||||
padding: 8px;
|
||||
|
||||
&::after {
|
||||
content: "";
|
||||
width: 0;
|
||||
height: 0;
|
||||
border-left: 8px solid transparent;
|
||||
border-right: 8px solid transparent;
|
||||
border-bottom: 8px solid #ffffff;
|
||||
position: absolute;
|
||||
top: -8px;
|
||||
left: 50%;
|
||||
transform: translateX(-50%);
|
||||
}
|
||||
|
||||
.emoji-icon {
|
||||
margin: 5px;
|
||||
cursor: pointer;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.content-input {
|
||||
min-height: 509px;
|
||||
font-family: "PingFangSC-Regular", "PingFang SC", sans-serif;
|
||||
font-size: 15px;
|
||||
color: #555555;
|
||||
line-height: 26px;
|
||||
outline: none;
|
||||
padding: 36px 36px 20px;
|
||||
white-space: break-spaces;
|
||||
position: relative;
|
||||
|
||||
&.empty:before {
|
||||
content: "输入正文";
|
||||
pointer-events: none;
|
||||
position: absolute;
|
||||
top: 36px;
|
||||
left: 36px;
|
||||
color: rgba(117, 117, 117, 1);
|
||||
}
|
||||
|
||||
img {
|
||||
display: block;
|
||||
max-width: 100%;
|
||||
height: 220px;
|
||||
}
|
||||
|
||||
h2 {
|
||||
color: #000000;
|
||||
font-size: 18px;
|
||||
line-height: 30px;
|
||||
|
||||
font-family: "PingFangSC-Semibold", "PingFang SC Semibold", "PingFang SC", sans-serif;
|
||||
font-weight: 650;
|
||||
}
|
||||
|
||||
.blue {
|
||||
color: #026277;
|
||||
margin: 0 4px;
|
||||
}
|
||||
|
||||
.fill {
|
||||
width: 100%;
|
||||
height: 26px;
|
||||
}
|
||||
}
|
||||
|
||||
.tags-list {
|
||||
padding: 0 36px;
|
||||
margin-bottom: 10px;
|
||||
flex-wrap: wrap;
|
||||
.tag-item {
|
||||
margin-bottom: 10px;
|
||||
height: 32px;
|
||||
line-height: 32px;
|
||||
background-color: rgba(246, 246, 246, 1);
|
||||
border-radius: 73px;
|
||||
padding: 0 14px;
|
||||
font-size: 14px;
|
||||
color: #606060;
|
||||
margin-right: 10px;
|
||||
cursor: pointer;
|
||||
}
|
||||
}
|
||||
|
||||
.action-buttons {
|
||||
border-top: 1px solid #ebebeb;
|
||||
padding: 0 36px;
|
||||
justify-content: space-between;
|
||||
|
||||
.left-section {
|
||||
.icon-pitch {
|
||||
width: 16px;
|
||||
height: 16px;
|
||||
margin-right: 5px;
|
||||
}
|
||||
|
||||
.icon {
|
||||
width: 16px;
|
||||
height: 16px;
|
||||
border: 1px solid #797979;
|
||||
margin-right: 5px;
|
||||
}
|
||||
|
||||
font-size: 14px;
|
||||
color: #333;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.right-section {
|
||||
height: 102px;
|
||||
.draft-btn,
|
||||
.publish-btn {
|
||||
font-size: 14px;
|
||||
border-radius: 8px;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.draft-btn {
|
||||
width: 100px;
|
||||
height: 42px;
|
||||
line-height: 42px;
|
||||
background-color: rgba(242, 242, 242, 0.698039215686274);
|
||||
color: #7f7f7f;
|
||||
font-size: 14px;
|
||||
margin-right: 15px;
|
||||
|
||||
.icon {
|
||||
width: 20px;
|
||||
height: 20px;
|
||||
margin-right: 6px;
|
||||
}
|
||||
}
|
||||
.publish-btn {
|
||||
width: 150px;
|
||||
height: 40px;
|
||||
line-height: 40px;
|
||||
font-family: "PingFangSC-Semibold", "PingFang SC Semibold", "PingFang SC", sans-serif;
|
||||
font-weight: 650;
|
||||
font-style: normal;
|
||||
font-size: 16px;
|
||||
color: #000000;
|
||||
background-color: rgba(80, 227, 194, 1);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -304,10 +304,8 @@
|
||||
margin-bottom: 10px;
|
||||
}
|
||||
#appIndex .header-content-box .header-content-right .group-box .group {
|
||||
background-color: #f6f6f6;
|
||||
flex-wrap: wrap;
|
||||
height: 100%;
|
||||
border-radius: 8px;
|
||||
}
|
||||
#appIndex .header-content-box .header-content-right .group-box .group .group-item {
|
||||
width: 50%;
|
||||
@@ -316,10 +314,23 @@
|
||||
color: #333;
|
||||
text-decoration: none;
|
||||
flex-direction: column;
|
||||
overflow: hidden;
|
||||
background-color: #f6f6f6;
|
||||
font-size: 14px;
|
||||
text-align: center;
|
||||
line-height: 22px;
|
||||
position: relative;
|
||||
}
|
||||
#appIndex .header-content-box .header-content-right .group-box .group .group-item:nth-child(1) {
|
||||
border-top-left-radius: 8px;
|
||||
}
|
||||
#appIndex .header-content-box .header-content-right .group-box .group .group-item:nth-child(2) {
|
||||
border-top-right-radius: 8px;
|
||||
}
|
||||
#appIndex .header-content-box .header-content-right .group-box .group .group-item:nth-child(3) {
|
||||
border-bottom-left-radius: 8px;
|
||||
}
|
||||
#appIndex .header-content-box .header-content-right .group-box .group .group-item:nth-child(4) {
|
||||
border-bottom-right-radius: 8px;
|
||||
}
|
||||
#appIndex .header-content-box .header-content-right .group-box .group .group-item:nth-child(odd) {
|
||||
border-right: 1px solid #ebebeb;
|
||||
@@ -343,6 +354,31 @@
|
||||
#appIndex .header-content-box .header-content-right .group-box .group .group-item .subtitle {
|
||||
color: #555555;
|
||||
}
|
||||
#appIndex .header-content-box .header-content-right .group-box .group .group-item:hover .QRcode-box {
|
||||
display: flex;
|
||||
}
|
||||
#appIndex .header-content-box .header-content-right .group-box .group .group-item .QRcode-box {
|
||||
z-index: 1;
|
||||
display: none;
|
||||
position: absolute;
|
||||
top: 64px;
|
||||
width: 140px;
|
||||
height: 166px;
|
||||
background-color: #ffffff;
|
||||
border-radius: 6px;
|
||||
padding: 20px;
|
||||
box-shadow: 0px 0px 5px rgba(0, 0, 0, 0.16862745);
|
||||
flex-direction: column;
|
||||
}
|
||||
#appIndex .header-content-box .header-content-right .group-box .group .group-item .QRcode-box .QRcode {
|
||||
width: 100px;
|
||||
height: 100px;
|
||||
margin-bottom: 4px;
|
||||
}
|
||||
#appIndex .header-content-box .header-content-right .group-box .group .group-item .QRcode-box .text {
|
||||
color: #555555;
|
||||
font-size: 14px;
|
||||
}
|
||||
#appIndex .header-content-box .header-content-right .offer-box {
|
||||
width: 240px;
|
||||
height: 214px;
|
||||
@@ -447,7 +483,6 @@
|
||||
border-radius: 10px;
|
||||
}
|
||||
#appIndex .matter .sidebar .side-box {
|
||||
width: 100%;
|
||||
padding: 17px 10px 10px;
|
||||
margin-bottom: 12px;
|
||||
width: 291px;
|
||||
|
||||
@@ -362,10 +362,8 @@
|
||||
margin-bottom: 10px;
|
||||
|
||||
.group {
|
||||
background-color: rgba(246, 246, 246, 1);
|
||||
flex-wrap: wrap;
|
||||
height: 100%;
|
||||
border-radius: 8px;
|
||||
|
||||
.group-item {
|
||||
width: 50%;
|
||||
@@ -375,7 +373,22 @@
|
||||
color: #333;
|
||||
text-decoration: none;
|
||||
flex-direction: column;
|
||||
overflow: hidden;
|
||||
background-color: rgba(246, 246, 246, 1);
|
||||
|
||||
&:nth-child(1) {
|
||||
border-top-left-radius: 8px;
|
||||
}
|
||||
&:nth-child(2) {
|
||||
border-top-right-radius: 8px;
|
||||
}
|
||||
&:nth-child(3) {
|
||||
border-bottom-left-radius: 8px;
|
||||
}
|
||||
&:nth-child(4) {
|
||||
border-bottom-right-radius: 8px;
|
||||
}
|
||||
|
||||
// overflow: hidden;
|
||||
|
||||
&:nth-child(odd) {
|
||||
border-right: 1px solid #ebebeb;
|
||||
@@ -399,6 +412,7 @@
|
||||
text-align: center;
|
||||
line-height: 22px;
|
||||
|
||||
position: relative;
|
||||
.title {
|
||||
font-family: "PingFangSC-Semibold", "PingFang SC Semibold", "PingFang SC", sans-serif;
|
||||
font-weight: 650;
|
||||
@@ -408,6 +422,34 @@
|
||||
.subtitle {
|
||||
color: #555555;
|
||||
}
|
||||
|
||||
&:hover .QRcode-box {
|
||||
display: flex;
|
||||
}
|
||||
|
||||
.QRcode-box {
|
||||
z-index: 1;
|
||||
display: none;
|
||||
position: absolute;
|
||||
top: 64px;
|
||||
width: 140px;
|
||||
height: 166px;
|
||||
background-color: rgba(255, 255, 255, 1);
|
||||
border-radius: 6px;
|
||||
padding: 20px;
|
||||
box-shadow: 0px 0px 5px rgba(0, 0, 0, 0.168627450980392);
|
||||
flex-direction: column;
|
||||
.QRcode {
|
||||
width: 100px;
|
||||
height: 100px;
|
||||
margin-bottom: 4px;
|
||||
}
|
||||
|
||||
.text {
|
||||
color: #555555;
|
||||
font-size: 14px;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -537,7 +579,7 @@
|
||||
}
|
||||
|
||||
.side-box {
|
||||
width: 100%;
|
||||
width: 291px;
|
||||
padding: 17px 10px 10px;
|
||||
margin-bottom: 12px;
|
||||
width: 291px;
|
||||
|
||||
@@ -6,6 +6,9 @@
|
||||
font-weight: 400;
|
||||
font-style: normal;
|
||||
}
|
||||
a {
|
||||
text-decoration: none;
|
||||
}
|
||||
body {
|
||||
background-color: #eef2f5;
|
||||
}
|
||||
@@ -53,6 +56,7 @@ body {
|
||||
border: 1px solid #e9eef2;
|
||||
border-radius: 10px;
|
||||
padding: 18px 20px 0;
|
||||
display: block;
|
||||
}
|
||||
.item-box .item-head {
|
||||
margin-bottom: 14px;
|
||||
@@ -529,7 +533,9 @@ body {
|
||||
justify-content: flex-end;
|
||||
}
|
||||
.item-box .bottom .bottom-item {
|
||||
height: 100%;
|
||||
cursor: pointer;
|
||||
position: relative;
|
||||
}
|
||||
.item-box .bottom .bottom-item:not(:last-child) {
|
||||
margin-right: 60px;
|
||||
@@ -547,6 +553,63 @@ body {
|
||||
width: 18px;
|
||||
height: 18px;
|
||||
}
|
||||
.item-box .bottom .bottom-item.share:hover .share-box {
|
||||
display: flex;
|
||||
}
|
||||
.item-box .bottom .bottom-item .share-box {
|
||||
z-index: 2;
|
||||
position: absolute;
|
||||
left: 50%;
|
||||
transform: translateX(-50%);
|
||||
bottom: 42px;
|
||||
width: 130px;
|
||||
height: 100px;
|
||||
background-color: #ffffff;
|
||||
border-radius: 6px;
|
||||
box-shadow: 0px 0px 5px rgba(0, 0, 0, 0.16862745);
|
||||
flex-direction: column;
|
||||
display: none;
|
||||
}
|
||||
.item-box .bottom .bottom-item .share-box .share-item {
|
||||
width: 100%;
|
||||
height: 40px;
|
||||
color: #555555;
|
||||
font-size: 14px;
|
||||
}
|
||||
.item-box .bottom .bottom-item .share-box .share-item:hover {
|
||||
background-color: #f0fafd;
|
||||
}
|
||||
.item-box .bottom .bottom-item .share-box .share-item .share-icon {
|
||||
width: 18px;
|
||||
height: 18px;
|
||||
margin-right: 13px;
|
||||
}
|
||||
.item-box .bottom .bottom-item .share-box .share-item.wenxin:hover .QRcode-box {
|
||||
display: flex;
|
||||
}
|
||||
.item-box .bottom .bottom-item .share-box .share-item .QRcode-box {
|
||||
z-index: 1;
|
||||
display: none;
|
||||
position: absolute;
|
||||
top: 48px;
|
||||
left: 100%;
|
||||
width: 140px;
|
||||
height: 166px;
|
||||
background-color: #ffffff;
|
||||
border-radius: 6px;
|
||||
padding: 20px;
|
||||
box-shadow: 0px 0px 5px rgba(0, 0, 0, 0.16862745);
|
||||
flex-direction: column;
|
||||
}
|
||||
.item-box .bottom .bottom-item .share-box .share-item .QRcode-box .QRcode {
|
||||
width: 100px;
|
||||
height: 100px;
|
||||
margin-bottom: 4px;
|
||||
}
|
||||
.item-box .bottom .bottom-item .share-box .share-item .QRcode-box .text {
|
||||
color: #555555;
|
||||
font-size: 14px;
|
||||
}
|
||||
/* offer 录取结果 */
|
||||
.results.r1 {
|
||||
background-color: #76c45e;
|
||||
@@ -1200,6 +1263,27 @@ body {
|
||||
.box-interviewexperience .slideshow-box .tab-list .tab-item.pitch::before {
|
||||
background-color: #789feb;
|
||||
}
|
||||
.posts-box .box-newest-head {
|
||||
font-weight: 650;
|
||||
font-size: 16px;
|
||||
color: #000000;
|
||||
padding: 0;
|
||||
height: auto;
|
||||
line-height: normal;
|
||||
padding: 20px 16px 0;
|
||||
}
|
||||
.posts-box .box-newest-head .icon {
|
||||
width: 22px;
|
||||
height: 22px;
|
||||
margin-right: 8px;
|
||||
}
|
||||
.posts-box .slideshow-content {
|
||||
margin-left: 10px;
|
||||
transition: all 0.3s;
|
||||
}
|
||||
.posts-box.box-essence .slideshow-content {
|
||||
margin-left: -263px;
|
||||
}
|
||||
.box-newest .slideshow-box .tab-list .tab-item.pitch::before {
|
||||
background: linear-gradient(to right, #6ac83e, #6ad2cb);
|
||||
}
|
||||
@@ -1227,6 +1311,7 @@ body {
|
||||
background: #ffffff;
|
||||
position: relative;
|
||||
margin-bottom: 12px;
|
||||
overflow: hidden;
|
||||
}
|
||||
.box-essence .newest-side-box .bounding,
|
||||
.box-newest .essence-side-box .bounding {
|
||||
|
||||
109
css/public.less
109
css/public.less
@@ -7,6 +7,10 @@
|
||||
font-style: normal;
|
||||
}
|
||||
|
||||
a {
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
body {
|
||||
background-color: rgba(238, 242, 245, 1);
|
||||
}
|
||||
@@ -63,6 +67,7 @@ body {
|
||||
border: 1px solid rgba(233, 238, 242, 1);
|
||||
border-radius: 10px;
|
||||
padding: 18px 20px 0;
|
||||
display: block;
|
||||
|
||||
.item-head {
|
||||
margin-bottom: 14px;
|
||||
@@ -633,6 +638,7 @@ body {
|
||||
justify-content: flex-end;
|
||||
|
||||
.bottom-item {
|
||||
height: 100%;
|
||||
cursor: pointer;
|
||||
&:not(:last-child) {
|
||||
margin-right: 60px;
|
||||
@@ -655,6 +661,80 @@ body {
|
||||
height: 18px;
|
||||
}
|
||||
}
|
||||
|
||||
position: relative;
|
||||
|
||||
&.share {
|
||||
&:hover {
|
||||
.share-box {
|
||||
display: flex;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.share-box {
|
||||
z-index: 2;
|
||||
position: absolute;
|
||||
left: 50%;
|
||||
transform: translateX(-50%);
|
||||
bottom: 42px;
|
||||
width: 130px;
|
||||
height: 100px;
|
||||
background-color: rgba(255, 255, 255, 1);
|
||||
border-radius: 6px;
|
||||
box-shadow: 0px 0px 5px rgba(0, 0, 0, 0.168627450980392);
|
||||
flex-direction: column;
|
||||
display: none;
|
||||
|
||||
.share-item {
|
||||
width: 100%;
|
||||
height: 40px;
|
||||
color: #555555;
|
||||
font-size: 14px;
|
||||
|
||||
&:hover {
|
||||
background-color: rgba(240, 250, 253, 1);
|
||||
}
|
||||
|
||||
.share-icon {
|
||||
width: 18px;
|
||||
height: 18px;
|
||||
margin-right: 13px;
|
||||
}
|
||||
|
||||
&.wenxin:hover {
|
||||
.QRcode-box {
|
||||
display: flex;
|
||||
}
|
||||
}
|
||||
|
||||
.QRcode-box {
|
||||
z-index: 1;
|
||||
display: none;
|
||||
position: absolute;
|
||||
top: 48px;
|
||||
left: 100%;
|
||||
width: 140px;
|
||||
height: 166px;
|
||||
background-color: #ffffff;
|
||||
border-radius: 6px;
|
||||
padding: 20px;
|
||||
box-shadow: 0px 0px 5px rgba(0, 0, 0, 0.16862745);
|
||||
flex-direction: column;
|
||||
|
||||
.QRcode {
|
||||
width: 100px;
|
||||
height: 100px;
|
||||
margin-bottom: 4px;
|
||||
}
|
||||
|
||||
.text {
|
||||
color: #555555;
|
||||
font-size: 14px;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -1426,6 +1506,34 @@ body {
|
||||
background-color: #789feb;
|
||||
}
|
||||
|
||||
.posts-box {
|
||||
.box-newest-head {
|
||||
font-weight: 650;
|
||||
font-size: 16px;
|
||||
color: #000000;
|
||||
padding: 0;
|
||||
height: auto;
|
||||
line-height: normal;
|
||||
padding: 20px 16px 0;
|
||||
.icon {
|
||||
width: 22px;
|
||||
height: 22px;
|
||||
margin-right: 8px;
|
||||
}
|
||||
}
|
||||
|
||||
.slideshow-content {
|
||||
margin-left: 10px;
|
||||
transition: all 0.3s;
|
||||
}
|
||||
|
||||
&.box-essence {
|
||||
.slideshow-content {
|
||||
margin-left: -263px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.box-newest .slideshow-box .tab-list .tab-item.pitch::before {
|
||||
background: linear-gradient(to right, #6ac83e, #6ad2cb);
|
||||
}
|
||||
@@ -1458,6 +1566,7 @@ body {
|
||||
background: #ffffff;
|
||||
position: relative;
|
||||
margin-bottom: 12px;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.box-essence .newest-side-box .bounding,
|
||||
|
||||
@@ -71,7 +71,7 @@
|
||||
border-radius: 16px;
|
||||
z-index: -1;
|
||||
}
|
||||
#sectionIndex .matter .matter-content .info {
|
||||
#sectionIndex .matter .matter-content .info-box {
|
||||
width: 1035px;
|
||||
background: -webkit-linear-gradient(270.53908529deg, #ffffff 2%, #ebf8f9 98%);
|
||||
background: -moz-linear-gradient(179.46091471deg, #ffffff 2%, #ebf8f9 98%);
|
||||
@@ -83,13 +83,13 @@
|
||||
padding-bottom: 34px;
|
||||
margin-bottom: 20px;
|
||||
}
|
||||
#sectionIndex .matter .matter-content .info .img {
|
||||
#sectionIndex .matter .matter-content .info-box .img {
|
||||
width: 80px;
|
||||
height: 80px;
|
||||
border-radius: 10px;
|
||||
margin-right: 20px;
|
||||
}
|
||||
#sectionIndex .matter .matter-content .info .right .title {
|
||||
#sectionIndex .matter .matter-content .info-box .right .title {
|
||||
font-family: "PingFangSC-Semibold", "PingFang SC Semibold", "PingFang SC", sans-serif;
|
||||
font-weight: 650;
|
||||
font-style: normal;
|
||||
@@ -98,7 +98,7 @@
|
||||
margin-bottom: 15px;
|
||||
margin-top: 4px;
|
||||
}
|
||||
#sectionIndex .matter .matter-content .info .right .link {
|
||||
#sectionIndex .matter .matter-content .info-box .right .link {
|
||||
flex-wrap: wrap;
|
||||
border-top: 1px dotted #d7d7d7;
|
||||
border-bottom: 1px dotted #d7d7d7;
|
||||
@@ -106,38 +106,38 @@
|
||||
margin-bottom: 28px;
|
||||
width: fit-content;
|
||||
}
|
||||
#sectionIndex .matter .matter-content .info .right .link .item {
|
||||
#sectionIndex .matter .matter-content .info-box .right .link .item {
|
||||
padding: 12px 0;
|
||||
}
|
||||
#sectionIndex .matter .matter-content .info .right .link .item:not(:last-child) {
|
||||
#sectionIndex .matter .matter-content .info-box .right .link .item:not(:last-child) {
|
||||
margin-right: 72px;
|
||||
}
|
||||
#sectionIndex .matter .matter-content .info .right .link .item .text {
|
||||
#sectionIndex .matter .matter-content .info-box .right .link .item .text {
|
||||
font-size: 14px;
|
||||
color: #333333;
|
||||
margin-right: 8px;
|
||||
}
|
||||
#sectionIndex .matter .matter-content .info .right .link .item .icon {
|
||||
#sectionIndex .matter .matter-content .info-box .right .link .item .icon {
|
||||
width: 12px;
|
||||
height: 12px;
|
||||
}
|
||||
#sectionIndex .matter .matter-content .info .right .bottom {
|
||||
#sectionIndex .matter .matter-content .info-box .right .bottom {
|
||||
justify-content: space-between;
|
||||
margin-right: 20px;
|
||||
}
|
||||
#sectionIndex .matter .matter-content .info .right .bottom .data {
|
||||
#sectionIndex .matter .matter-content .info-box .right .bottom .data {
|
||||
font-family: "PingFangSC-Regular", "PingFang SC", sans-serif;
|
||||
font-weight: 400;
|
||||
color: #555555;
|
||||
font-size: 13px;
|
||||
}
|
||||
#sectionIndex .matter .matter-content .info .right .bottom .data .sum {
|
||||
#sectionIndex .matter .matter-content .info-box .right .bottom .data .sum {
|
||||
font-family: "PingFangSC-Semibold", "PingFang SC Semibold", "PingFang SC", sans-serif;
|
||||
font-weight: 650;
|
||||
color: #000000;
|
||||
margin: 0 5px;
|
||||
}
|
||||
#sectionIndex .matter .matter-content .info .right .bottom .btn {
|
||||
#sectionIndex .matter .matter-content .info-box .right .bottom .btn {
|
||||
width: 125px;
|
||||
height: 32px;
|
||||
background-color: #50e3c2;
|
||||
@@ -146,7 +146,7 @@
|
||||
color: #333;
|
||||
cursor: pointer;
|
||||
}
|
||||
#sectionIndex .matter .matter-content .info .right .bottom .btn .icon {
|
||||
#sectionIndex .matter .matter-content .info-box .right .bottom .btn .icon {
|
||||
width: 16px;
|
||||
height: 16px;
|
||||
margin-right: 3px;
|
||||
@@ -258,9 +258,30 @@
|
||||
#sectionIndex .matter .matter-content .details-box .content-box .list-box .item-box {
|
||||
margin-bottom: 12px;
|
||||
}
|
||||
#sectionIndex .matter .matter-content .details-box .side-box {
|
||||
#sectionIndex .matter .matter-content .details-box .adv {
|
||||
display: block;
|
||||
width: 291px;
|
||||
height: 300px;
|
||||
background-color: #ecf9fa;
|
||||
height: 220px;
|
||||
margin-bottom: 12px;
|
||||
cursor: pointer;
|
||||
}
|
||||
#sectionIndex .matter .matter-content .details-box .adv .adv-icon {
|
||||
width: 291px;
|
||||
height: 220px;
|
||||
border-radius: 10px;
|
||||
}
|
||||
#sectionIndex .matter .matter-content .details-box .side-box {
|
||||
padding: 17px 10px 10px;
|
||||
margin-bottom: 12px;
|
||||
width: 291px;
|
||||
border-radius: 10px;
|
||||
}
|
||||
#sectionIndex .matter .matter-content .details-box .side-box.offer-side-box {
|
||||
background: linear-gradient(154.12772232deg, #c7edf2 1%, #d3f2f5 100%);
|
||||
}
|
||||
#sectionIndex .matter .matter-content .details-box .side-box.vote-side-box {
|
||||
background: linear-gradient(151.77562139deg, #c6f4d9 1%, #d9f7e5 100%);
|
||||
}
|
||||
#sectionIndex .matter .matter-content .details-box .side-box.interviewexperience-side-box {
|
||||
background: linear-gradient(158.64328877deg, #d3e1fb 1%, #dee6f9 100%);
|
||||
}
|
||||
@@ -77,7 +77,7 @@
|
||||
}
|
||||
|
||||
.matter-content {
|
||||
.info {
|
||||
.info-box {
|
||||
width: 1035px;
|
||||
background: -webkit-linear-gradient(270.539085289936deg, rgba(255, 255, 255, 1) 2%, rgba(235, 248, 249, 1) 98%);
|
||||
background: -moz-linear-gradient(179.460914710064deg, rgba(255, 255, 255, 1) 2%, rgba(235, 248, 249, 1) 98%);
|
||||
@@ -287,12 +287,46 @@
|
||||
}
|
||||
}
|
||||
|
||||
// .side-box {
|
||||
// width: 291px;
|
||||
// height: 300px;
|
||||
// background-color: rgba(236, 249, 250, 1);
|
||||
// border-radius: 10px;
|
||||
// }
|
||||
|
||||
.adv {
|
||||
display: block;
|
||||
width: 291px;
|
||||
height: 220px;
|
||||
margin-bottom: 12px;
|
||||
cursor: pointer;
|
||||
.adv-icon {
|
||||
width: 291px;
|
||||
height: 220px;
|
||||
border-radius: 10px;
|
||||
}
|
||||
}
|
||||
// .sidebar {
|
||||
.side-box {
|
||||
width: 291px;
|
||||
height: 300px;
|
||||
background-color: rgba(236, 249, 250, 1);
|
||||
padding: 17px 10px 10px;
|
||||
margin-bottom: 12px;
|
||||
width: 291px;
|
||||
border-radius: 10px;
|
||||
|
||||
&.offer-side-box {
|
||||
background: linear-gradient(154.12772232deg, #c7edf2 1%, #d3f2f5 100%);
|
||||
}
|
||||
|
||||
&.vote-side-box {
|
||||
background: linear-gradient(151.77562139deg, #c6f4d9 1%, #d9f7e5 100%);
|
||||
}
|
||||
|
||||
&.interviewexperience-side-box {
|
||||
background: linear-gradient(158.64328877deg, #d3e1fb 1%, #dee6f9 100%);
|
||||
}
|
||||
}
|
||||
// }
|
||||
}
|
||||
}
|
||||
}
|
||||
86
edit.html
Normal file
86
edit.html
Normal file
@@ -0,0 +1,86 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="zh-CN">
|
||||
<head>
|
||||
<meta charset="UTF-8" />
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||||
<title>发布帖子 - 轻论坛</title>
|
||||
<link rel="stylesheet" href="./css/public.css" />
|
||||
<link rel="stylesheet" href="./css/edit.css" />
|
||||
<script src="./js/vue.global.js"></script>
|
||||
<style>
|
||||
[v-cloak] {
|
||||
display: none;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
|
||||
<body>
|
||||
<div class="container" id="edit" v-cloak>
|
||||
<div class="edit-head flexacenter">
|
||||
<div class="edit-head-container flexacenter">
|
||||
<img class="icon" src="./img/edit-logo-icon.png" />
|
||||
<div class="dot"></div>
|
||||
<div class="title">发帖</div>
|
||||
<div class="hint">发帖奖励 3 个寄托币/篇，每天最高奖励3篇</div>
|
||||
<div class="flex1"></div>
|
||||
<img v-if="userInfoWin.avatar" class="avatar" :src="userInfoWin.avatar" />
|
||||
</div>
|
||||
</div>
|
||||
<div class="edit-container">
|
||||
<!-- 标题输入 -->
|
||||
<div class="title-box">
|
||||
<input class="title-input" type="title" placeholder="输入标题（非必填）" v-model="info.title" :maxlength="titleLength" />
|
||||
</div>
|
||||
|
||||
<!-- 工具栏 -->
|
||||
<div class="editor-toolbar flexacenter">
|
||||
<div class="toolbar-item flexacenter" @click="paragraphTitle">
|
||||
<img class="icon" src="./img/t-icon.png" alt="段落标题" />
|
||||
<span>段落标题</span>
|
||||
</div>
|
||||
<div class="toolbar-item flexacenter" @click="insertImage">
|
||||
<img class="icon" src="./img/img-icon.png" alt="图片" />
|
||||
<span>图片</span>
|
||||
<input class="file" type="file" @change="insertImage" accept=".png, .jpg, .jpeg" />
|
||||
</div>
|
||||
<div class="toolbar-item flexacenter expression" :class="{'pitch': emojiState}" @click="openEmoji">
|
||||
<img class="icon" src="./img/smiling-face-round-black.png" alt="表情" />
|
||||
<span>表情</span>
|
||||
<div class="emoji-box-mask" @click.stop="closeEmoji"></div>
|
||||
<div class="emoji-box">
|
||||
<div class="emoji-icon" v-for="emoji in optionEmoji" :key="emoji" @click.stop="selectEmoji(emoji)">{{ emoji }}</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 内容编辑区 -->
|
||||
<div class="content-input" id="editor" contenteditable="true" :class="{ 'empty': isEmpty }" placeholder="输入正文" ref="editorRef" @input="onEditorInput" @focus="onEditorFocus" @blur="onEditorBlur" v-html="info.content"></div>
|
||||
|
||||
<!-- 标签选择 -->
|
||||
<div class="tags-list flexacenter">
|
||||
<div class="tag-item" v-for="item in tagList" :key="item.tagId" @click="insertLabel(item.tagId)">#{{ item.title }}</div>
|
||||
</div>
|
||||
|
||||
<!-- 操作按钮 -->
|
||||
<div class="action-buttons flexacenter">
|
||||
<div class="left-section flexacenter" @click="cutAnonymity">
|
||||
<img v-if="info.anonymous == 1" class="icon-pitch" src="./img/tick-box.svg" />
|
||||
<div v-else class="icon"></div>
|
||||
<div class="text">匿名发布</div>
|
||||
</div>
|
||||
<div class="right-section flexcenter">
|
||||
<div class="draft-btn flexcenter" @click="submit(0)">
|
||||
<img class="icon" src="./img/draft-icon.png" />
|
||||
存草稿
|
||||
</div>
|
||||
<div class="publish-btn flexcenter" @click="submit(1)">发表帖子</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<script src="./js/axios.min.js"></script>
|
||||
<script src="./js/public.js"></script>
|
||||
<script type="module" src="./js/edit.js"></script>
|
||||
</body>
|
||||
</html>
|
||||
BIN
img/copy-black-icon.png
Normal file
BIN
img/copy-black-icon.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 742 B |
BIN
img/draft-icon.png
Normal file
BIN
img/draft-icon.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 1.1 KiB |
BIN
img/edit-logo-icon.png
Normal file
BIN
img/edit-logo-icon.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 2.6 KiB |
BIN
img/essence.png
Normal file
BIN
img/essence.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 4.9 KiB |
BIN
img/img-icon.png
Normal file
BIN
img/img-icon.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 1.2 KiB |
BIN
img/mj-index-icon.png
Normal file
BIN
img/mj-index-icon.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 3.3 KiB |
BIN
img/newest-icon.png
Normal file
BIN
img/newest-icon.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 4.3 KiB |
BIN
img/offer-index-icon.png
Normal file
BIN
img/offer-index-icon.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 5.2 KiB |
BIN
img/smiling-face-round-black.png
Normal file
BIN
img/smiling-face-round-black.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 2.4 KiB |
BIN
img/t-icon.png
Normal file
BIN
img/t-icon.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 698 B |
6
img/tick-box.svg
Normal file
6
img/tick-box.svg
Normal file
@@ -0,0 +1,6 @@
|
||||
<?xml version="1.0" encoding="utf-8"?>
|
||||
<svg version="1.1" xmlns:xlink="http://www.w3.org/1999/xlink" width="16px" height="16px" viewBox="70 1113 16 16" xmlns="http://www.w3.org/2000/svg">
|
||||
<path d="M 70.5 1115 A 1.5 1.5 0 0 1 72 1113.5 L 84 1113.5 A 1.5 1.5 0 0 1 85.5 1115 L 85.5 1127 A 1.5 1.5 0 0 1 84 1128.5 L 72 1128.5 A 1.5 1.5 0 0 1 70.5 1127 L 70.5 1115 Z " fill-rule="nonzero" fill="#f6f6bd" stroke="none" />
|
||||
<path d="M 70.5 1115 A 1.5 1.5 0 0 1 72 1113.5 L 84 1113.5 A 1.5 1.5 0 0 1 85.5 1115 L 85.5 1127 A 1.5 1.5 0 0 1 84 1128.5 L 72 1128.5 A 1.5 1.5 0 0 1 70.5 1127 L 70.5 1115 Z " stroke-width="1" stroke="#c5c51c" fill="none" />
|
||||
<path d="M 73.4285714285714 1121 L 76.8571428571429 1124.42857142857 L 82.5714285714286 1116.42857142857 " stroke-width="3.42857142857143" stroke="#c5c51c" fill="none" />
|
||||
</svg>
|
||||
BIN
img/vote-index-icon.png
Normal file
BIN
img/vote-index-icon.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 4.2 KiB |
BIN
img/weixin-icon.png
Normal file
BIN
img/weixin-icon.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 2.4 KiB |
494
index.html
494
index.html
@@ -1,291 +1,273 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8" />
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||||
<title>论坛首页</title>
|
||||
<link rel="stylesheet" href="./css/public.css" />
|
||||
<link rel="stylesheet" href="./css/index.css" />
|
||||
<script src="./js/vue.global.js"></script>
|
||||
<style>
|
||||
[v-cloak] {
|
||||
display: none;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
|
||||
<head>
|
||||
<meta charset="UTF-8" />
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||||
<title>论坛首页</title>
|
||||
<link rel="stylesheet" href="./css/public.css" />
|
||||
<link rel="stylesheet" href="./css/index.css" />
|
||||
<script src="./js/vue.global.js"></script>
|
||||
<style>
|
||||
[v-cloak] {
|
||||
display: none;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<div class="container" id="appIndex" v-cloak>
|
||||
<head-top></head-top>
|
||||
|
||||
<body>
|
||||
<div class="container" id="appIndex" v-cloak>
|
||||
<head-top></head-top>
|
||||
|
||||
<div class="header-content-box flexflex">
|
||||
<div class="header-content-left ">
|
||||
<div class="adv-list flexacenter">
|
||||
<a class="adv-item" target="_blank">
|
||||
<img class="adv-img" src="https://o.x-php.com/bbs/common/cf/144405a5pqst6fakct81t8.gif" />
|
||||
</a>
|
||||
<a class="adv-item" target="_blank">
|
||||
<img class="adv-img" src="https://o.x-php.com/bbs/common/cf/144405a5pqst6fakct81t8.gif" />
|
||||
</a>
|
||||
</div>
|
||||
<!-- 话题和精选 -->
|
||||
<div class="topic-and-selectives flexflex">
|
||||
<div class="topic-box">
|
||||
<div class="head-top flexcenter">
|
||||
<img class="icon" src="https://app.gter.net/image/miniApp/offer/well-white.svg" />
|
||||
<div class="text">话题</div>
|
||||
</div>
|
||||
<div class="topic-head flexflex" bind:tap="goDetails" data-uniqid="{{ ongoingbj.uniqid }}">
|
||||
<div class="title one-line-display">{{ ongoingbj.title }}</div>
|
||||
<div class="hint one-line-display">{{ ongoingbj.description }}</div>
|
||||
<div class="people flexacenter">
|
||||
<div class="left flexacenter">
|
||||
<div class="number">{{ ongoingbj.comments }}</div>
|
||||
<div class="text">人正在讨论</div>
|
||||
</div>
|
||||
<div class="right flexacenter">
|
||||
<div class="item flexcenter" v-for="(item, index) in ongoingbj.commentUser" :key="index" :style="{zIndex: 7 - index }">
|
||||
<img class="img" :src="item.avatar" />
|
||||
<div class="header-content-box flexflex">
|
||||
<div class="header-content-left">
|
||||
<div class="adv-list flexacenter">
|
||||
<a class="adv-item" target="_blank">
|
||||
<img class="adv-img" src="https://o.x-php.com/bbs/common/cf/144405a5pqst6fakct81t8.gif" />
|
||||
</a>
|
||||
<a class="adv-item" target="_blank">
|
||||
<img class="adv-img" src="https://o.x-php.com/bbs/common/cf/144405a5pqst6fakct81t8.gif" />
|
||||
</a>
|
||||
</div>
|
||||
<!-- 话题和精选 -->
|
||||
<div class="topic-and-selectives flexflex">
|
||||
<div class="topic-box">
|
||||
<div class="head-top flexcenter">
|
||||
<img class="icon" src="https://app.gter.net/image/miniApp/offer/well-white.svg" />
|
||||
<div class="text">话题</div>
|
||||
</div>
|
||||
<div class="topic-head flexflex" bind:tap="goDetails" data-uniqid="{{ ongoingbj.uniqid }}">
|
||||
<div class="title one-line-display">{{ ongoingbj.title }}</div>
|
||||
<div class="hint one-line-display">{{ ongoingbj.description }}</div>
|
||||
<div class="people flexacenter">
|
||||
<div class="left flexacenter">
|
||||
<div class="number">{{ ongoingbj.comments }}</div>
|
||||
<div class="text">人正在讨论</div>
|
||||
</div>
|
||||
<div class="right flexacenter">
|
||||
<div class="item flexcenter" v-for="(item, index) in ongoingbj.commentUser" :key="index" :style="{zIndex: 7 - index }">
|
||||
<img class="img" :src="item.avatar" />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="topic-list">
|
||||
<a class="item flexacenter" v-for="(item, index) in pastList" :key="index" :href="'http://14.22.79.19:9551/?tpl=forum/details&uniqid=' + item.uniqid" target="_blank">
|
||||
<img class="img" src="https://app.gter.net/image/miniApp/offer/well-yellow.svg" />
|
||||
<div class="text one-line-display flex1">{{ item.title }}</div>
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
<div class="topic-list">
|
||||
<div class="item flexacenter" v-for="(item, index) in pastList" :key="index" bind:tap="goDetails" data-uniqid="{{ item.uniqid }}">
|
||||
<img class="img" src="https://app.gter.net/image/miniApp/offer/well-yellow.svg" />
|
||||
<div class="text one-line-display flex1">{{ item.title }}</div>
|
||||
|
||||
<div class="selectives-box">
|
||||
<div class="head-top flexcenter">
|
||||
<img class="icon" src="https://app.gter.net/image/miniApp/offer/handpick-icon.png" />
|
||||
<div class="text">精选</div>
|
||||
</div>
|
||||
<div class="list flexflex">
|
||||
<a class="item flexacenter" v-for="(item, index) in topicHandpickedList" :key="index" :href="'http://14.22.79.19:9551/?tpl=forum/details&uniqid=' + item.uniqid" target="_blank">
|
||||
<div class="dot"></div>
|
||||
<div class="text one-line-display">{{ item.title }}</div>
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="selectives-box">
|
||||
<div class="head-top flexcenter">
|
||||
<img class="icon" src="https://app.gter.net/image/miniApp/offer/handpick-icon.png" />
|
||||
<div class="text">精选</div>
|
||||
<div class="header-left-bottom-box flexflex">
|
||||
<a class="adv flexacenter" data-x-event="bbsindexslide" href="https://bbs.gter.net/thread-1663824-1-1.html" title="26Fall祈福，求offer得offer！" target="_blank">
|
||||
<img class="adv-icon" src="https://o.x-php.com/Zvt57TuJSUvkyhw-xG_Y2l-U_potcXiB1NFX9ddrB-ebU2ybYKMuA2kGH_7R-9lU990IXj3X-Q7x4Cg0NDI5" alt="26Fall祈福，求offer得offer！" />
|
||||
</a>
|
||||
<div class="list">
|
||||
<div class="item flexacenter" v-for="(item, index) in 4" :key="index">
|
||||
<div class="icon dot-gray"></div>
|
||||
<a class="one-line-display text flex1" href="https://offer.gter.net/details/XynvPnSnX1KL" target="_blank">26Fall-香港理工大学 MSc Offer</a>
|
||||
</div>
|
||||
</div>
|
||||
<div class="list flexflex">
|
||||
<div class="item flexacenter" v-for="(item, index) in topicHandpickedList" :key="index">
|
||||
<div class="dot"></div>
|
||||
<div class="text one-line-display">{{ item.title }}</div>
|
||||
<div class="list list2">
|
||||
<div class="item flexacenter" v-for="(item, index) in 4" :key="index">
|
||||
<div class="icon dot-gray"></div>
|
||||
<a class="one-line-display text flex1" href="https://offer.gter.net/details/y9KbiuzHXbmr" target="_blank">26Fall-香港科技大学 MSc Offer</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="header-left-bottom-box flexflex">
|
||||
<a class="adv flexacenter" data-x-event="bbsindexslide" href="https://bbs.gter.net/thread-1663824-1-1.html" title="26Fall祈福，求offer得offer！" target="_blank">
|
||||
<img class="adv-icon" src="https://o.x-php.com/Zvt57TuJSUvkyhw-xG_Y2l-U_potcXiB1NFX9ddrB-ebU2ybYKMuA2kGH_7R-9lU990IXj3X-Q7x4Cg0NDI5" alt="26Fall祈福，求offer得offer！">
|
||||
<div class="header-content-right">
|
||||
<div class="post-entrance">
|
||||
<div class="entrance-top flexacenter"><img class="icon" src="./img/forum.png" />我要发帖</div>
|
||||
<div class="entrance-bottom flexacenter">
|
||||
<a class="item flexcenter" href="https://offer.gter.net/post" target="_blank" style="position: relative">
|
||||
<img class="icon" src="./img/offer.svg" style="width: 16px" />
|
||||
<span class="text">报Offer</span>
|
||||
</a>
|
||||
<a class="item flexcenter" href="https://offer.gter.net/post/summary" target="_blank" style="position: relative">
|
||||
<img class="icon" src="./img/summarize.png" style="width: 16px" />
|
||||
<span class="text">写总结</span>
|
||||
</a>
|
||||
<a class="item flexcenter" href="https://interviewexperience.gter.net/publish" target="_blank" style="position: relative">
|
||||
<img class="icon" src="./img/mj.png" style="width: 16px" />
|
||||
<span class="text">写面经</span>
|
||||
</a>
|
||||
<a class="item flexcenter" href="https://vote.gter.net/publish" target="_blank" style="position: relative">
|
||||
<img class="icon" src="./img/vote.svg" style="width: 16px" />
|
||||
<span class="text">发起投票</span>
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<a class="adv-broadside" ref="custom_2AdvRef">
|
||||
<img class="adv-broadside-img" src="https://o.x-php.com/bbs/common/cf/152158dpf5eh7pqpaealiq.gif" />
|
||||
</a>
|
||||
<div class="list">
|
||||
<div class="item flexacenter" v-for="(item, index) in 4" :key="index">
|
||||
<div class="icon dot-gray"></div><a class="one-line-display text flex1" href="https://offer.gter.net/details/XynvPnSnX1KL" target="_blank">26Fall-香港理工大学 MSc Offer</a>
|
||||
</div>
|
||||
</div>
|
||||
<div class="list list2">
|
||||
<div class="item flexacenter" v-for="(item, index) in 4" :key="index">
|
||||
<div class="icon dot-gray"></div><a class="one-line-display text flex1" href="https://offer.gter.net/details/y9KbiuzHXbmr" target="_blank">26Fall-香港科技大学 MSc Offer</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="header-content-right">
|
||||
<div class="post-entrance">
|
||||
<div class="entrance-top flexacenter">
|
||||
<img class="icon" src="./img/forum.png">我要发帖
|
||||
</div>
|
||||
<div class="entrance-bottom flexacenter">
|
||||
<div v-for="(item, index) in 4" :key="index" class="item flexcenter" target="_blank" style="position: relative;">
|
||||
<img class="icon" src="./img/forum.png" style="width: 16px;">
|
||||
<span class="text">发帖</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<a class="adv-broadside" ref="custom_2AdvRef">
|
||||
<img class="adv-broadside-img" src="https://o.x-php.com/bbs/common/cf/152158dpf5eh7pqpaealiq.gif" />
|
||||
</a>
|
||||
|
||||
<div class="group-box">
|
||||
<div class="group flexflex">
|
||||
<div class="group-item flexcenter" v-for="(item, index) in popList" :key="index">
|
||||
<div class="title">{{ item.title }}</div>
|
||||
<div class="subtitle">{{ item.subtitle }}</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="offer-box" :class="{'small': custom_2AdvRef}" id="offer-box" @mouseover="offerMouseover" @mouseout="offerMouseout">
|
||||
<div class="offer-list" id="offer-list" ref="offerListRef" :style="{'margin-top': -offerMargin + 'px'}">
|
||||
<a class="item flexflex" :href="item['url']" target="_blank" v-cloak v-for="(item, index) in offerlist" :key="index">
|
||||
<div class="avatar" :style="{backgroundImage: `url(${item['avatar']})`}"></div>
|
||||
<div class="">
|
||||
<div class="condition one-line-display">{{ item["date"] }} {{ item['type'] }}</div>
|
||||
<div class="titletitle one-line-display">{{ item["content"] }}</div>
|
||||
</div>
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
<div class="matter flexflex">
|
||||
<div class="matter-content flex1">
|
||||
<!-- 论坛板块列表 -->
|
||||
<div class="forum-sections-list">
|
||||
<img class="img" src="./img/sections-left.svg" />
|
||||
<div class="title">论坛版块</div>
|
||||
<div class="list">
|
||||
<template v-for="(item, index) in sectionList" :key="index">
|
||||
<div class="line flexacenter">
|
||||
<a class="item flexacenter" v-for="(item, index) in item" :key="index" target="_blank" :href="`/section-index.html?section=${item.uniqid}`">{{ item.name }}</a>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<item-forum :itemdata="item" v-for="(item, index) in list" :key="index"></item-forum>
|
||||
</div>
|
||||
<div class="sidebar">
|
||||
<a class="adv" href="" target="_blank">
|
||||
<img class="adv-icon" src="https://o.x-php.com/bbs/common/cf/1709075xdbbbvjd8cbxvdd.jpg" alt="26Fall祈福，求offer得offer！">
|
||||
</a>
|
||||
<a class="adv" href="" target="_blank">
|
||||
<img class="adv-icon" src="https://o.x-php.com/bbs/common/cf/1709075xdbbbvjd8cbxvdd.jpg" alt="26Fall祈福，求offer得offer！">
|
||||
</a>
|
||||
|
||||
<!-- offer -->
|
||||
<div class="offer-side-box side-box" v-if="offer.length != 0">
|
||||
<div class="side-header flexacenter">
|
||||
<div class="left flexacenter">
|
||||
<img class="header-icon" src="{~}forum/assets/forum/offer-icon.png" />
|
||||
<div class="title">Offer</div>
|
||||
</div>
|
||||
<a class="more flexacenter" href="https://offer.gter.net" target="_blank">
|
||||
<span>more</span>
|
||||
<img class="more-icon" src="./img/right-arrow-black.svg" />
|
||||
</a>
|
||||
</div>
|
||||
<div class="box">
|
||||
<a class="item flexflex" v-cloak v-for="item in offer" :key="item" :href="item['url']" target="_blank">
|
||||
<img class="school-img" :src="item.data['schoollogo']" />
|
||||
<div class="school-detail flex1 flexflex">
|
||||
<div class="school-name one-line-display">{{ item.data['schoolname'] }}</div>
|
||||
<div class="school-brief one-line-display">{{ item.data['professional'] }}</div>
|
||||
<div class="school-offer flexacenter">
|
||||
<span>{{ item.data['degree'] }}</span>
|
||||
<span class="long-string">|</span>
|
||||
<span>{{ item.data['semester'] }}</span>
|
||||
<span class="long-string">|</span>
|
||||
<span>{{ item.data['apply_results_text'] }}</span>
|
||||
<div class="group-box">
|
||||
<div class="group flexflex">
|
||||
<div class="group-item flexcenter" v-for="(item, index) in popList" :key="index">
|
||||
<div class="title">{{ item.title }}</div>
|
||||
<div class="subtitle">{{ item.subtitle }}</div>
|
||||
<div class="QRcode-box flexcenter">
|
||||
<img class="QRcode" :src="item.img" />
|
||||
<div class="text">微信扫码</div>
|
||||
</div>
|
||||
</div>
|
||||
</a>
|
||||
<a class="add-btn flexcenter" style="position: relative;" href="https://offer.gter.net/post" target="_blank" v-cloak>
|
||||
<img class="add-icon" src="./img/add-btn-black.svg" />
|
||||
<div>报Offer</div>
|
||||
<div v-if="realname == 0 && userInfo.uin > 0" class="open-attest-btn" @click.prevent="openAttest"></div>
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="offer-box" :class="{'small': custom_2AdvRef}" id="offer-box" @mouseover="offerMouseover" @mouseout="offerMouseout">
|
||||
<div class="offer-list" id="offer-list" ref="offerListRef" :style="{'margin-top': -offerMargin + 'px'}">
|
||||
<a class="item flexflex" :href="item['url']" target="_blank" v-cloak v-for="(item, index) in offerlist" :key="index">
|
||||
<div class="avatar" :style="{backgroundImage: `url(${item['avatar']})`}"></div>
|
||||
<div class="">
|
||||
<div class="condition one-line-display">{{ item["date"] }} {{ item['type'] }}</div>
|
||||
<div class="titletitle one-line-display">{{ item["content"] }}</div>
|
||||
</div>
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- vote -->
|
||||
<div class="vote-side-box side-box" v-if="vote.length != 0">
|
||||
<div class="side-header flexacenter">
|
||||
<div class="left flexacenter">
|
||||
<img class="header-icon" src="{~}forum/assets/forum/vote-icon.png" />
|
||||
<div class="title">投票</div>
|
||||
</div>
|
||||
<div class="matter flexflex">
|
||||
<div class="matter-content flex1">
|
||||
<!-- 论坛板块列表 -->
|
||||
<div class="forum-sections-list">
|
||||
<img class="img" src="./img/sections-left.svg" />
|
||||
<div class="title">论坛版块</div>
|
||||
<div class="list">
|
||||
<template v-for="(item, index) in sectionList" :key="index">
|
||||
<div class="line flexacenter">
|
||||
<a class="item flexacenter" v-for="(item, index) in item" :key="index" target="_blank" :href="`/section-index.html?section=${item.uniqid}`">{{ item.name }}</a>
|
||||
</div>
|
||||
</template>
|
||||
</div>
|
||||
<a class="more flexacenter" target="_blank" href="https://vote.gter.net">
|
||||
<span>more</span>
|
||||
<img class="more-icon" src="./img/right-arrow-black.svg" />
|
||||
</a>
|
||||
</div>
|
||||
<div class="box">
|
||||
<a class="item flexflex" v-cloak v-for="item in vote" :key="item" target="_blank" :href="item['url']">
|
||||
<div class="name one-line-display">{{item['title']}}</div>
|
||||
<div class="brief">{{ item['message'] }}</div>
|
||||
</a>
|
||||
<a class="add-btn flexcenter" style="position: relative;" v-cloak target="_blank" href="https://vote.gter.net/publish">
|
||||
<img class="add-icon" src="./img/add-btn-black.svg" />
|
||||
<div>发起投票</div>
|
||||
<div v-if="realname == 0 && userInfo.uin > 0" class="open-attest-btn" @click.prevent="openAttest"></div>
|
||||
</a>
|
||||
</div>
|
||||
|
||||
<item-forum :itemdata="item" v-for="(item, index) in list" :key="index"></item-forum>
|
||||
</div>
|
||||
<div class="sidebar">
|
||||
<a class="adv" href="" target="_blank">
|
||||
<img class="adv-icon" src="https://o.x-php.com/bbs/common/cf/1709075xdbbbvjd8cbxvdd.jpg" alt="26Fall祈福，求offer得offer！" />
|
||||
</a>
|
||||
<a class="adv" href="" target="_blank">
|
||||
<img class="adv-icon" src="https://o.x-php.com/bbs/common/cf/1709075xdbbbvjd8cbxvdd.jpg" alt="26Fall祈福，求offer得offer！" />
|
||||
</a>
|
||||
|
||||
<!-- mj -->
|
||||
<div class="interviewexperience-side-box side-box" v-if="interviewexperience.length != 0">
|
||||
<div class="side-header flexacenter">
|
||||
<div class="left flexacenter">
|
||||
<img class="header-icon" src="{~}forum/assets/forum/mj-icon.png" />
|
||||
<div class="title">面经</div>
|
||||
</div>
|
||||
<a class="more flexacenter" href="https://interviewexperience.gter.net/" target="_blank">
|
||||
<span>more</span>
|
||||
<img class="more-icon" src="./img/right-arrow-black.svg" />
|
||||
</a>
|
||||
</div>
|
||||
<div class="box">
|
||||
<a class="item flexflex" v-cloak v-for="(item,index) in interviewexperience" :key="item" :href="item['url']" target="_blank">
|
||||
<div class="school one-line-display">{{ item.data['schoolname'] }}</div>
|
||||
<div class="major one-line-display" v-if="item.data['profession']">{{ item.data['profession'] }}</div>
|
||||
<div class="info">
|
||||
<img class="icon" :src="item.user['avatar']" />
|
||||
<span class="text">{{ item['content'] }}</span>
|
||||
<!-- offer -->
|
||||
<div class="offer-side-box side-box" v-if="offer.length != 0">
|
||||
<div class="side-header flexacenter">
|
||||
<div class="left flexacenter">
|
||||
<img class="header-icon" src="./img/offer-index-icon.png" />
|
||||
<div class="title">Offer</div>
|
||||
</div>
|
||||
</a>
|
||||
<a class="add-btn flexcenter" style="position: relative;" href="https://interviewexperience.gter.net/publish" target="_blank" v-cloak>
|
||||
<img class="add-icon" src="./img/add-btn-black.svg" />
|
||||
<div>写面经</div>
|
||||
<div v-if="realname == 0 && userInfo.uin > 0" class="open-attest-btn" @click.prevent="openAttest"></div>
|
||||
</a>
|
||||
<a class="more flexacenter" href="https://offer.gter.net" target="_blank">
|
||||
<span>more</span>
|
||||
<img class="more-icon" src="./img/right-arrow-black.svg" />
|
||||
</a>
|
||||
</div>
|
||||
<div class="box">
|
||||
<a class="item flexflex" v-cloak v-for="item in offer" :key="item" :href="'https://offer.gter.net/details/' + item['uniqid']" target="_blank">
|
||||
<img class="school-img" :src="item.data['schoollogo']" />
|
||||
<div class="school-detail flex1 flexflex">
|
||||
<div class="school-name one-line-display">{{ item.data['schoolname'] }}</div>
|
||||
<div class="school-brief one-line-display">{{ item.data['professional'] }}</div>
|
||||
<div class="school-offer flexacenter">
|
||||
<span>{{ item.data['degree'] }}</span>
|
||||
<span class="long-string">|</span>
|
||||
<span>{{ item.data['semester'] }}</span>
|
||||
<span class="long-string">|</span>
|
||||
<span>{{ item.data['apply_results_text'] }}</span>
|
||||
</div>
|
||||
</div>
|
||||
</a>
|
||||
<a class="add-btn flexcenter" style="position: relative" href="https://offer.gter.net/post" target="_blank" v-cloak>
|
||||
<img class="add-icon" src="./img/add-btn-black.svg" />
|
||||
<div>报Offer</div>
|
||||
<div v-if="realname == 0 && userInfo.uin > 0" class="open-attest-btn" @click.prevent="openAttest"></div>
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- vote -->
|
||||
<div class="vote-side-box side-box" v-if="vote.length != 0">
|
||||
<div class="side-header flexacenter">
|
||||
<div class="left flexacenter">
|
||||
<img class="header-icon" src="./img/vote-index-icon.png" />
|
||||
<div class="title">投票</div>
|
||||
</div>
|
||||
<a class="more flexacenter" target="_blank" href="https://vote.gter.net">
|
||||
<span>more</span>
|
||||
<img class="more-icon" src="./img/right-arrow-black.svg" />
|
||||
</a>
|
||||
</div>
|
||||
<div class="box">
|
||||
<a class="item flexflex" v-cloak v-for="item in vote" :key="item" target="_blank" :href="'https://vote.gter.net/details/' + item['uniqid']">
|
||||
<div class="name one-line-display">{{item['title']}}</div>
|
||||
<div class="brief">{{ item['message'] }}</div>
|
||||
</a>
|
||||
<a class="add-btn flexcenter" style="position: relative" v-cloak target="_blank" href="https://vote.gter.net/publish">
|
||||
<img class="add-icon" src="./img/add-btn-black.svg" />
|
||||
<div>发起投票</div>
|
||||
<div v-if="realname == 0 && userInfo.uin > 0" class="open-attest-btn" @click.prevent="openAttest"></div>
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- mj -->
|
||||
<div class="interviewexperience-side-box side-box" v-if="interviewexperience.length != 0">
|
||||
<div class="side-header flexacenter">
|
||||
<div class="left flexacenter">
|
||||
<img class="header-icon" src="./img/mj-index-icon.png" />
|
||||
<div class="title">面经</div>
|
||||
</div>
|
||||
<a class="more flexacenter" href="https://interviewexperience.gter.net/" target="_blank">
|
||||
<span>more</span>
|
||||
<img class="more-icon" src="./img/right-arrow-black.svg" />
|
||||
</a>
|
||||
</div>
|
||||
<div class="box">
|
||||
<a class="item flexflex" v-cloak v-for="(item,index) in interviewexperience" :key="item" :href="'https://interviewexperience.gter.net/details/' + item['uniqid']" target="_blank">
|
||||
<div class="school one-line-display">{{ item.data['schoolname'] }}</div>
|
||||
<div class="major one-line-display" v-if="item.data['profession']">{{ item.data['profession'] }}</div>
|
||||
<div class="info">
|
||||
<img class="icon" :src="item.user['avatar']" />
|
||||
<span class="text">{{ item['content'] }}</span>
|
||||
</div>
|
||||
</a>
|
||||
<a class="add-btn flexcenter" style="position: relative" href="https://interviewexperience.gter.net/publish" target="_blank" v-cloak>
|
||||
<img class="add-icon" src="./img/add-btn-black.svg" />
|
||||
<div>写面经</div>
|
||||
<div v-if="realname == 0 && userInfo.uin > 0" class="open-attest-btn" @click.prevent="openAttest"></div>
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- newest 最新 -->
|
||||
<latest-list boxtype="newest"></latest-list>
|
||||
<latest-list boxtype="essence"></latest-list>
|
||||
</div>
|
||||
|
||||
<!-- newest 最新 -->
|
||||
<!-- <div class="newest-side-box side-box" v-if="Object.keys(newPost).length !== 0">
|
||||
<img class="bounding" src="{~}forum/assets/forum/bounding-circle-green.svg" alt="" />
|
||||
<div class="side-header flexacenter">
|
||||
<div class="left flexacenter">
|
||||
<img class="header-icon" src="{~}forum/assets/forum/newest-icon.png" />
|
||||
<div class="title">最新</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="box">
|
||||
<a class="item flexacenter" v-cloak v-for="item in newPost.data.slice(0,16)" :key="item" :href="item['url']" target="_blank">
|
||||
<div class="dot dot-green"></div>
|
||||
<div class="text one-line-display">{{ item['subject'] }}</div>
|
||||
</a>
|
||||
</div>
|
||||
</div> -->
|
||||
|
||||
<!-- essence 精选 -->
|
||||
<!-- <div class="essence-side-box side-box" v-if="Object.keys(essencePost).length !== 0">
|
||||
<img class="bounding" src="{~}forum/assets/forum/bounding-circle-blue.svg" alt="" />
|
||||
<div class="side-header flexacenter">
|
||||
<div class="left flexacenter">
|
||||
<img class="header-icon" src="{~}forum/assets/forum/essence.png" />
|
||||
<div class="title">精华阅读</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="box">
|
||||
<a class="item flexacenter" v-cloak v-for="item in essencePost.data" :key="item" :href="item['url']" target="_blank ">
|
||||
<div class="dot"></div>
|
||||
<div class="text one-line-display">{{ item['subject'] }}</div>
|
||||
</a>
|
||||
</div>
|
||||
</div> -->
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<script src="./js/axios.min.js"></script>
|
||||
<script src="./js/public.js"></script>
|
||||
<script src="./js/scrolltext.js"></script>
|
||||
<script type="module" src="./js/index.js"></script>
|
||||
</body>
|
||||
|
||||
<script src="./js/axios.min.js"></script>
|
||||
<script src="./js/public.js"></script>
|
||||
<script src="./js/scrolltext.js"></script>
|
||||
<script type="module" src="./js/index.js"></script>
|
||||
</body>
|
||||
</html>
|
||||
495
js/edit.js
Normal file
495
js/edit.js
Normal file
@@ -0,0 +1,495 @@
|
||||
// 简单版本的论坛编辑器，确保图片插入功能正常
|
||||
const { createApp, ref, computed, onMounted, nextTick } = Vue;
|
||||
import { headTop } from "../component/head-top/head-top.js";
|
||||
|
||||
const editApp = createApp({
|
||||
setup() {
|
||||
let titleLength = ref(200);
|
||||
|
||||
onMounted(() => {
|
||||
getUserInfoWin();
|
||||
|
||||
cUpload();
|
||||
init();
|
||||
});
|
||||
|
||||
let isLogin = ref(true);
|
||||
let realname = ref(1); // 是否已经实名
|
||||
let userInfoWin = ref({
|
||||
authority: ["comment.edit", "comment.delete", "offercollege.hide", "offersummary.hide", "mj.hide", "topic:manager", "topic:hide"],
|
||||
avatar: "https://nas.gter.net:9008/avatar/97K4EWIMLrsbGTWXslC2WFVSEKWOikN42jDKLNjtax7HL4xtfMOJSdU9oWFhY2E~/middle?random=1761733169",
|
||||
groupid: 3,
|
||||
nickname: "肖荣豪",
|
||||
realname: 1,
|
||||
token: "01346a38444d71aaadb3adad52b52c39",
|
||||
uid: 500144,
|
||||
uin: 4238049,
|
||||
});
|
||||
|
||||
let permissions = ref([]);
|
||||
|
||||
const getUserInfoWin = () => {
|
||||
const checkUser = () => {
|
||||
const user = window.userInfoWin;
|
||||
if (!user) return;
|
||||
document.removeEventListener("getUser", checkUser);
|
||||
realname.value = user.realname;
|
||||
userInfoWin.value = user;
|
||||
if (user?.uin > 0 || user?.uid > 0) isLogin.value = true;
|
||||
permissions.value = user?.authority || [];
|
||||
};
|
||||
document.addEventListener("getUser", checkUser);
|
||||
};
|
||||
|
||||
const openAttest = () => {
|
||||
const handleAttestClose = () => {
|
||||
document.removeEventListener("closeAttest", handleAttestClose);
|
||||
realname.value = window.userInfoWin?.realname || 0;
|
||||
};
|
||||
// 启动认证流程时添加监听
|
||||
document.addEventListener("closeAttest", handleAttestClose);
|
||||
loadAttest(2);
|
||||
};
|
||||
|
||||
// 跳转登录
|
||||
const goLogin = () => {
|
||||
if (typeof window === "undefined") return;
|
||||
if (window["userInfoWin"] && Object.keys(window["userInfoWin"]).length !== 0) {
|
||||
if (window["userInfoWin"]["uid"]) isLogin.value = true;
|
||||
else ajax_login();
|
||||
} else ajax_login();
|
||||
};
|
||||
|
||||
let uConfigData = {};
|
||||
|
||||
const cUpload = () => {
|
||||
ajaxget(`/v2/api/config/upload?type=topic`).then((res) => {
|
||||
const data = res.data;
|
||||
uConfigData = data;
|
||||
});
|
||||
};
|
||||
|
||||
let info = ref({});
|
||||
let tagList = ref([]);
|
||||
let token = ref("");
|
||||
let infoImages = [];
|
||||
const init = () => {
|
||||
ajax("/v2/api/forum/postPublishInit")
|
||||
.then((res) => {
|
||||
const data = res.data;
|
||||
if (res.code != 200) {
|
||||
creationAlertBox(res.message || "操作失败");
|
||||
return;
|
||||
}
|
||||
|
||||
const infoTarget = data.info || {};
|
||||
|
||||
infoImages = infoTarget.attachments?.images || [];
|
||||
|
||||
if (infoTarget.content) infoTarget.content = restoreHtml(infoTarget.content, infoImages);
|
||||
|
||||
info.value = infoTarget;
|
||||
tagList.value = data.tagList;
|
||||
token.value = data.token;
|
||||
|
||||
nextTick(() => {
|
||||
judgeIsEmpty();
|
||||
});
|
||||
})
|
||||
.catch((err) => {
|
||||
console.log("err", err);
|
||||
});
|
||||
};
|
||||
|
||||
const restoreHtml = (formattedText, imageList) => {
|
||||
let html = formattedText;
|
||||
|
||||
// 1. 还原换行符为<br>标签
|
||||
html = html.replace(/\n/g, "<br>");
|
||||
|
||||
// 2. 还原块级标签的换行标记
|
||||
html = html.replace(/<br><div>/g, "<div>");
|
||||
html = html.replace(/<\/div><br>/g, "</div>");
|
||||
|
||||
// 3. 还原标签标记为span.blue
|
||||
html = html.replace(/\[tag\]([^[]+)\[\/tag\]/gi, '<span class="blue">#$1</span> <span class="fill"></span> ');
|
||||
|
||||
// 4. 还原粗体标记为h2标签
|
||||
html = html.replace(/\[b\]([^[]+)\[\/b\]/gi, "<h2>$1</h2>");
|
||||
|
||||
// 5. 还原图片标记为img标签（使用提供的imageList）
|
||||
html = html.replace(/\[attachimg\](\d+)\[\/attachimg\]/gi, (match, aid) => {
|
||||
// 查找对应的图片信息
|
||||
const image = imageList.find((img) => img.aid == aid);
|
||||
if (image) {
|
||||
return `<img src="${image.url}" data-aid="${aid}">`;
|
||||
}
|
||||
return match; // 未找到对应图片时保留原始标记
|
||||
});
|
||||
|
||||
// 6. 还原填充标签
|
||||
html = html.replace(/(<span class="blue">[^<]+<\/span>)\s+/gi, '$1 <span class="fill"></span> ');
|
||||
|
||||
// 7. 清理多余的<br>标签
|
||||
html = html.replace(/<br><br>/g, "<br>");
|
||||
|
||||
return html;
|
||||
};
|
||||
|
||||
onMounted(() => {
|
||||
setTimeout(() => focusLastNode(), 1000);
|
||||
});
|
||||
|
||||
const editorRef = ref(null);
|
||||
|
||||
const focusLastNode = () => {
|
||||
const newRange = document.createRange();
|
||||
const textNode = document.createTextNode("");
|
||||
editorRef.value.appendChild(textNode);
|
||||
newRange.setStartAfter(textNode, 0);
|
||||
newRange.setEndAfter(textNode, 0);
|
||||
lastSelection = newRange;
|
||||
};
|
||||
|
||||
let lastSelection = null;
|
||||
|
||||
let loading = ref(false);
|
||||
|
||||
const maxSize = 20 * 1024 * 1024; // 20MB
|
||||
|
||||
const insertImage = (event) => {
|
||||
let config = uConfigData;
|
||||
const target = event.target.files[0];
|
||||
if (!target) return; // 处理未选择文件的情况
|
||||
|
||||
if (target.size > maxSize) {
|
||||
creationAlertBox("文件大小不能超过 20MB");
|
||||
return;
|
||||
}
|
||||
|
||||
loading.value = true;
|
||||
|
||||
// 不要删除，后面会用
|
||||
const formData = new FormData();
|
||||
formData.append(config.requestName, target); // 文件数据
|
||||
formData.append("name", target.name); // 文件名
|
||||
formData.append("type", "image"); // 文件名
|
||||
formData.append("data", config.params.data); // 文件名
|
||||
|
||||
ajax(config.url, formData)
|
||||
.then((res) => {
|
||||
const data = res.data;
|
||||
try {
|
||||
const range = lastSelection;
|
||||
const img = document.createElement("img");
|
||||
|
||||
img.src = data.url;
|
||||
img.setAttribute("data-aid", data.aid);
|
||||
range.insertNode(img);
|
||||
const div = document.createElement("div");
|
||||
range.insertNode(div);
|
||||
judgeIsEmpty();
|
||||
} catch (error) {
|
||||
console.error("插入图片出错:", error);
|
||||
}
|
||||
})
|
||||
.finally(() => {
|
||||
loading.value = false;
|
||||
});
|
||||
};
|
||||
|
||||
let isEmpty = ref(true);
|
||||
|
||||
const onEditorInput = (event) => {
|
||||
const selection = window.getSelection();
|
||||
|
||||
if (selection.rangeCount > 0) {
|
||||
lastSelection = selection.getRangeAt(0);
|
||||
// console.log("更新选区");
|
||||
updatePTitleStatus();
|
||||
}
|
||||
|
||||
judgeIsEmpty();
|
||||
|
||||
debouncedGetTagList();
|
||||
};
|
||||
|
||||
// 防抖函数
|
||||
const debounce = (fn, delay = 500) => {
|
||||
let timer = null;
|
||||
return function () {
|
||||
if (timer) {
|
||||
clearTimeout(timer);
|
||||
}
|
||||
timer = setTimeout(() => {
|
||||
fn.apply(this, arguments);
|
||||
timer = null;
|
||||
}, delay);
|
||||
};
|
||||
};
|
||||
|
||||
const getRandomChinese = () => {
|
||||
// 中文 Unicode 范围：\u4e00 - \u9fa5（共约 2 万个汉字）
|
||||
const start = 0x4e00; // 起始编码
|
||||
const end = 0x9fa5; // 结束编码
|
||||
// 生成范围内的随机整数，转为字符
|
||||
return String.fromCodePoint(Math.floor(Math.random() * (end - start + 1) + start));
|
||||
};
|
||||
|
||||
const generateRandomString = (length = 5) => {
|
||||
// 定义字符集：包含大小写字母和数字
|
||||
const chars = "ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789";
|
||||
let result = "";
|
||||
// 循环生成指定长度的随机字符
|
||||
for (let i = 0; i < length; i++) {
|
||||
// 从字符集中随机取一个字符
|
||||
const randomIndex = Math.floor(Math.random() * chars.length);
|
||||
result += chars[randomIndex];
|
||||
}
|
||||
return result;
|
||||
};
|
||||
|
||||
const getTagList = () => {
|
||||
const content = editorRef.value.innerText;
|
||||
axios
|
||||
.post("https://api.gter.net/v2/api/forum/postPublishTags", {
|
||||
content,
|
||||
})
|
||||
.then((res) => {
|
||||
res = res.data;
|
||||
if (res.code != 200) return;
|
||||
let data = res.data || [];
|
||||
|
||||
// 随机生成一下数据
|
||||
for (let i = 0; i < 5; i++) {
|
||||
data.push({
|
||||
title: getRandomChinese() + getRandomChinese(),
|
||||
tagId: generateRandomString(),
|
||||
});
|
||||
}
|
||||
|
||||
tagList.value = data;
|
||||
});
|
||||
};
|
||||
|
||||
const debouncedGetTagList = debounce(getTagList, 500);
|
||||
|
||||
let isBottomState = ref(false); // 底部按钮 显示
|
||||
const onEditorFocus = () => {
|
||||
isBottomState.value = true;
|
||||
};
|
||||
|
||||
const onEditorBlur = () => {
|
||||
isBottomState.value = false;
|
||||
};
|
||||
|
||||
// 判断是否为空
|
||||
const judgeIsEmpty = () => {
|
||||
const text = editorRef.value.innerText;
|
||||
isEmpty.value = text.length == 0 && !editorRef.value.querySelector("img");
|
||||
};
|
||||
|
||||
const isPTitle = ref(false);
|
||||
|
||||
const paragraphTitle = () => {
|
||||
editorRef.value.focus();
|
||||
if (!lastSelection) return;
|
||||
const selection = window.getSelection();
|
||||
selection.removeAllRanges();
|
||||
selection.addRange(lastSelection);
|
||||
|
||||
// 使用try-catch确保即使命令执行失败也能恢复滚动位置
|
||||
try {
|
||||
document.execCommand("formatBlock", false, isPTitle.value ? "P" : "H2");
|
||||
} catch (error) {
|
||||
console.error("应用段落格式失败:", error);
|
||||
}
|
||||
|
||||
// 更新状态
|
||||
setTimeout(() => updatePTitleStatus(), 100);
|
||||
};
|
||||
|
||||
const updatePTitleStatus = () => {
|
||||
if (lastSelection) {
|
||||
let parentElement = lastSelection.commonAncestorContainer;
|
||||
// 死循环，直到遇到终止条件
|
||||
while (true) {
|
||||
// 如果没有父元素了（到达文档根节点），退出循环返回false
|
||||
if (!parentElement) {
|
||||
isPTitle.value = false;
|
||||
return;
|
||||
}
|
||||
|
||||
// 遇到id为"editor"的元素，返回false
|
||||
if (parentElement.id === "editor") {
|
||||
isPTitle.value = false;
|
||||
return;
|
||||
}
|
||||
|
||||
// 遇到nodeName为"H2"的元素，返回true（注意nodeName是大写的）
|
||||
if (parentElement.nodeName === "H2") {
|
||||
isPTitle.value = true;
|
||||
return;
|
||||
}
|
||||
|
||||
// 继续向上查找父元素
|
||||
parentElement = parentElement.parentElement;
|
||||
}
|
||||
}
|
||||
};
|
||||
|
||||
const cutAnonymity = () => (info.value.anonymous = info.value.anonymous ? 0 : 1);
|
||||
|
||||
const insertLabel = (id) => {
|
||||
const index = tagList.value.findIndex((item) => item.tagId == id);
|
||||
if (index == -1) return;
|
||||
const label = tagList.value[index].title;
|
||||
|
||||
const span = document.createElement("span");
|
||||
span.innerHTML = `<span class="blue">#${label}</span> <span class="fill"></span> `;
|
||||
lastSelection.insertNode(span);
|
||||
|
||||
// 移动光标到元素后面并确保光标位置被正确设置和获取
|
||||
const newRange = document.createRange();
|
||||
newRange.setStartAfter(span);
|
||||
newRange.setEndAfter(span);
|
||||
|
||||
// 更新选择范围
|
||||
const selection = window.getSelection();
|
||||
selection.removeAllRanges();
|
||||
selection.addRange(newRange);
|
||||
lastSelection = newRange;
|
||||
|
||||
// 手动触发selectionchange事件，确保其他组件知道光标位置变化
|
||||
const selectionChangeEvent = new Event("selectionchange", { bubbles: true });
|
||||
document.dispatchEvent(selectionChangeEvent);
|
||||
|
||||
judgeIsEmpty();
|
||||
|
||||
// 删除 tagList 中当前标签
|
||||
tagList.value.splice(index, 1);
|
||||
};
|
||||
|
||||
let emojiState = ref(false);
|
||||
|
||||
const optionEmoji = ref(["😀", "😁", "😆", "😅", "😂", "😉", "😍", "🥰", "😘", "🤥", "😪", "😵💫", "🤓", "🥺", "😋", "😜", "🤪", "😎", "🤩", "🥳", "😔", "🙁", "😭", "😡", "😳", "🤗", "🤔", "🤭", "🤫", "😯", "😵", "🙄", "🥴", "🤢", "🤑", "🤠", "👌", "✌️", "🤟", "🤘", "🤙", "👍", "👎", "✊", "👏", "🤝", "🙏", "💪", "❎️", "✳️", "✴️", "❇️", "#️⃣", "*️⃣", "1️⃣", "2️⃣", "3️⃣", "4️⃣", "5️⃣", "6️⃣", "7️⃣", "8️⃣", "9️⃣", "🔟", "🆗", "🈶", "🉐", "🉑", "🌹", "🥀", "🌸", "🌺", "🌷", "🌲", "☘️", "🍀", "🍁", "🌙", "⭐", "🌍", "☀️", "⭐️", "🌟", "☁️", "🌈", "☂️", "❄️", "☃️", "☄️", "🔥", "💧", "🍎", "🍐", "🍊", "🍉", "🍓", "🍑", "🍔", "🍟", "🍕", "🥪", "🍜", "🍡", "🍨", "🍦", "🎂", "🍰", "🍭", "🍿", "🍩", "🧃", "🍹", "🍒", "🥝", "🥒", "🥦", "🥨", "🌭", "🥘", "🍱", "🍢", "🥮", "🍩", "🍪", "🧁", "🍵", "🍶", "🍻", "🥂", "🧋", "🎉", "🎁", "🧧", "🎃", "🎄", "🧨", "✨️", "🎈", "🎊", "🎋", "🎍", "🎀", "🎖️", "🏆️", "🏅", "💌", "📬", "🚗", "🚕", "🚲", "🛵", "🚀", "🚁", "⛵", "🚢", "🔮", "🧸", "🀄️"]);
|
||||
|
||||
const openEmoji = () => (emojiState.value = true);
|
||||
|
||||
const closeEmoji = () => (emojiState.value = false);
|
||||
|
||||
const selectEmoji = (emoji) => {
|
||||
const textNode = document.createTextNode(emoji);
|
||||
lastSelection.insertNode(textNode);
|
||||
|
||||
// 移动光标到emoji后面并确保光标位置被正确设置和获取
|
||||
const newRange = document.createRange();
|
||||
newRange.setStartAfter(textNode);
|
||||
newRange.setEndAfter(textNode);
|
||||
|
||||
// 更新选择范围
|
||||
const selection = window.getSelection();
|
||||
selection.removeAllRanges();
|
||||
lastSelection = newRange;
|
||||
|
||||
// 手动触发selectionchange事件，确保其他组件知道光标位置变化
|
||||
const selectionChangeEvent = new Event("selectionchange", { bubbles: true });
|
||||
document.dispatchEvent(selectionChangeEvent);
|
||||
closeEmoji();
|
||||
judgeIsEmpty();
|
||||
};
|
||||
|
||||
let format = ref("");
|
||||
const submit = (status) => {
|
||||
const infoTarget = { ...info.value } || {};
|
||||
let content = editorRef.value.innerHTML;
|
||||
|
||||
const images = extractImages(content);
|
||||
|
||||
infoTarget.attachments.images = images;
|
||||
|
||||
info.value["attachments"]["images"] = images;
|
||||
console.log("转换前：", content);
|
||||
content = formatContent(content);
|
||||
console.log("转换后：", content);
|
||||
const data = {
|
||||
...infoTarget,
|
||||
content,
|
||||
};
|
||||
|
||||
ajax("/v2/api/forum/postPublishTopic", {
|
||||
info: data,
|
||||
token: token.value,
|
||||
status,
|
||||
}).then((res) => {
|
||||
const data = res.data;
|
||||
if (res.code != 200) {
|
||||
creationAlertBox("error", res.message);
|
||||
return;
|
||||
}
|
||||
|
||||
creationAlertBox("success", res.message || "操作成功");
|
||||
const back = () => {
|
||||
if (status == 1) redirectToExternalWebsite("./details.html?uniqid=" + data.uniqid);
|
||||
else redirectToExternalWebsite("./index.html");
|
||||
};
|
||||
|
||||
setTimeout(() => back(), 1500);
|
||||
});
|
||||
};
|
||||
|
||||
const formatContent = (html) => {
|
||||
// 1. 替换图片标签
|
||||
html = html.replace(/<img[^>]*data-aid="(\d+)"[^>]*>/gi, "[attachimg]$1[/attachimg]");
|
||||
|
||||
// 2. 替换H2标签
|
||||
html = html.replace(/<h2[^>]*>([\s\S]*?)<\/h2>/gi, "[b]$1[/b]");
|
||||
|
||||
// 3. 替换标签（保留与前后内容的连续性）
|
||||
html = html.replace(/<span\s+class="blue">#([^<]+)<\/span>/gi, "[tag]$1[/tag]");
|
||||
|
||||
// 4. 移除无关标签（如空的<span class="fill"></span>）
|
||||
html = html.replace(/<span\s+class="fill">[^<]*<\/span>/gi, "");
|
||||
|
||||
// 5. 处理块级标签换行（仅<div>等块级标签前后换行，保持行内内容连续）
|
||||
// 块级标签：div、p、h1-h6等，这里以div为例
|
||||
html = html.replace(/<\/div>\s*/gi, "</div>\n"); // 闭合div后换行
|
||||
html = html.replace(/\s*<div[^>]*>/gi, "\n<div>"); // 开启div前换行
|
||||
|
||||
// 6. 处理<br>为换行
|
||||
html = html.replace(/<br\s*\/?>/gi, "\n");
|
||||
|
||||
// 7. 移除所有剩余HTML标签
|
||||
html = html.replace(/<[^>]+>/gi, "");
|
||||
|
||||
// 8. 清理连续换行（最多保留两个空行，避免过多空行）
|
||||
html = html.replace(/\n{3,}/g, "\n\n");
|
||||
// 去除首尾空白
|
||||
html = html.trim();
|
||||
|
||||
return html;
|
||||
};
|
||||
|
||||
const extractImages = (html) => {
|
||||
const images = [];
|
||||
// 正则匹配 img 标签，提取 src（url）和 data-aid
|
||||
const imgRegex = /<img[^>]*src="([^"]+)"[^>]*data-aid="(\d+)"[^>]*>/gi;
|
||||
let match;
|
||||
|
||||
// 循环匹配所有图片标签
|
||||
while ((match = imgRegex.exec(html)) !== null) {
|
||||
images.push({
|
||||
url: match[1], // 图片的 src 地址
|
||||
aid: Number(match[2]), // 图片的 data-aid 属性值
|
||||
});
|
||||
}
|
||||
|
||||
return images;
|
||||
};
|
||||
|
||||
return { userInfoWin, titleLength, submit, insertLabel, emojiState, openEmoji, closeEmoji, selectEmoji, optionEmoji, isPTitle, onEditorInput, onEditorFocus, onEditorBlur, paragraphTitle, info, tagList, token, cutAnonymity, editorRef, insertImage, judgeIsEmpty, isEmpty };
|
||||
},
|
||||
});
|
||||
|
||||
editApp.component("headTop", headTop);
|
||||
editApp.mount("#edit");
|
||||
@@ -1,6 +1,7 @@
|
||||
const { createApp, ref, onMounted, nextTick, onUnmounted, computed, watch, provide } = Vue;
|
||||
import { headTop } from "../component/head-top/head-top.js";
|
||||
import { itemForum } from "../component/item-forum/item-forum.js";
|
||||
import { latestList } from "../component/latest-list/latest-list.js";
|
||||
|
||||
const appIndex = createApp({
|
||||
setup() {
|
||||
@@ -220,18 +221,22 @@ const appIndex = createApp({
|
||||
{
|
||||
title: "26FALL",
|
||||
subtitle: "申请群",
|
||||
img: "https://o.x-php.com/Zvt57TuJSUvkyhw-xG7Y2l-c-5kpcnzqqsgFptxhcq_cQnrlJKN1WgxCBq_D-81qNDQyOQ~~",
|
||||
},
|
||||
{
|
||||
title: "申请求助",
|
||||
subtitle: "寄托院校君",
|
||||
img: "https://u.gter.net/assistantwxqrcode.png",
|
||||
},
|
||||
{
|
||||
title: "香港租房",
|
||||
subtitle: "交流群",
|
||||
img: "https://o.x-php.com/Zvt57TuJSUvkyhw-xG7Y2l-c-5kpcnzqqsgFptxhcq_cQnrlJKN1WgxCBq_D-81qNDQyOQ~~",
|
||||
},
|
||||
{
|
||||
title: "香港租房顾问",
|
||||
subtitle: "寄托方同学",
|
||||
img: "https://o.x-php.com/Zvt57TuJSUvkyhw-xG7Y2l-d_JkpcHnqqsgFptxhcq_cQnrlcaF2WQQQBq_D-81qNDQyOQ~~",
|
||||
},
|
||||
];
|
||||
|
||||
@@ -290,5 +295,6 @@ const appIndex = createApp({
|
||||
|
||||
appIndex.component("headTop", headTop);
|
||||
appIndex.component("itemForum", itemForum);
|
||||
appIndex.component("latestList", latestList);
|
||||
|
||||
appIndex.mount("#appIndex");
|
||||
|
||||
@@ -3,7 +3,7 @@ axios.defaults.withCredentials = true;
|
||||
|
||||
// 导出ajax函数
|
||||
const ajax = (url, data) => {
|
||||
if (location.hostname == "127.0.0.1") axios.defaults.headers.common["Authorization"] = "yuphemk2bv532bl5oqur5tsq9tk6dgkk";
|
||||
if (location.hostname == "127.0.0.1") axios.defaults.headers.common["Authorization"] = "erhvky91rk23vx7xiutj34db82kjb1vc";
|
||||
|
||||
url = url.indexOf("https://") > -1 ? url : forumBaseURL + url;
|
||||
return new Promise(function (resolve, reject) {
|
||||
@@ -36,7 +36,7 @@ const ajax = (url, data) => {
|
||||
|
||||
// 导出ajaxget函数
|
||||
const ajaxget = (url) => {
|
||||
if (location.hostname == "127.0.0.1") axios.defaults.headers.common["Authorization"] = "yuphemk2bv532bl5oqur5tsq9tk6dgkk";
|
||||
if (location.hostname == "127.0.0.1") axios.defaults.headers.common["Authorization"] = "erhvky91rk23vx7xiutj34db82kjb1vc";
|
||||
|
||||
url = url.indexOf("https://") > -1 ? url : forumBaseURL + url;
|
||||
return new Promise(function (resolve, reject) {
|
||||
|
||||
@@ -1,5 +1,6 @@
|
||||
const { createApp, ref, onMounted, nextTick, onUnmounted, computed, watch, provide } = Vue;
|
||||
import { itemForum } from "../component/item-forum/item-forum.js";
|
||||
import { latestList } from "../component/latest-list/latest-list.js";
|
||||
|
||||
const appSectionIndex = createApp({
|
||||
setup() {
|
||||
@@ -18,6 +19,8 @@ const appSectionIndex = createApp({
|
||||
handpick();
|
||||
getTags();
|
||||
getList();
|
||||
getTopicLatest();
|
||||
|
||||
window.addEventListener("scroll", handleScroll);
|
||||
});
|
||||
|
||||
@@ -195,10 +198,36 @@ const appSectionIndex = createApp({
|
||||
getList();
|
||||
|
||||
updateUrlParams({ section: uniqid });
|
||||
|
||||
};
|
||||
|
||||
return { changeSection, sectionList, section, info, handpickList, tagsList, list, count };
|
||||
let offer = ref([]); // 面经列表
|
||||
let vote = ref([]); // 面经列表
|
||||
let interviewexperience = ref([]); // 面经列表
|
||||
const getTopicLatest = () => {
|
||||
ajaxget(`/v2/api/forum/getTopicLatest?limit=4`).then((res) => {
|
||||
const data = res.data || [];
|
||||
console.log("data99999999999999", data);
|
||||
|
||||
data.vote.forEach((item) => {
|
||||
if (!item.title) {
|
||||
item.title = item.content;
|
||||
item.content = "";
|
||||
}
|
||||
});
|
||||
|
||||
console.log("data", data);
|
||||
offer.value = data.offer;
|
||||
vote.value = data.vote;
|
||||
interviewexperience.value = data.interviewexperience;
|
||||
|
||||
console.log("interviewexperience", interviewexperience.value);
|
||||
});
|
||||
};
|
||||
|
||||
return { offer, vote, interviewexperience, changeSection, sectionList, section, info, handpickList, tagsList, list, count };
|
||||
},
|
||||
});
|
||||
appSectionIndex.component("item-forum", itemForum);
|
||||
appSectionIndex.component("latest-list", latestList);
|
||||
appSectionIndex.mount("#sectionIndex");
|
||||
1
post
Submodule
1
post
Submodule
Submodule post added at 452d486573
@@ -1,128 +0,0 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
|
||||
<head>
|
||||
<meta charset="UTF-8" />
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||||
<title>版块首页</title>
|
||||
<link rel="stylesheet" href="./css/public.css" />
|
||||
<link rel="stylesheet" href="./css/section-index.css" />
|
||||
<script src="./js/vue.global.js"></script>
|
||||
<style scoped>
|
||||
[v-cloak] {
|
||||
display: none;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
|
||||
<body>
|
||||
<div class="container" id="sectionIndex" v-cloak>
|
||||
<div class="head-top flexacenter">
|
||||
<img class="logo" src="https://oss.gter.net/logo" alt="" />
|
||||
<div class="flex1"></div>
|
||||
<div class="input-box flexacenter">
|
||||
<input class="input flex1" type="text" placeholder="大家都在搜：屯特" />
|
||||
<img class="icon" />
|
||||
</div>
|
||||
|
||||
<div class="sign-in sign-in-already flexcenter" v-if="signInAlreadyState" v-cloak onclick="showWindow('dsu_paulsign', 'https://bbs.gter.net/plugin.php?id=dsu_paulsign:sign&show=sign')">
|
||||
<img class="sign-icon" src="//framework.x-php.com/gter/image/gter/forum/assets/forum/sign-icon.png" />
|
||||
<span>已签到，明天再来</span>
|
||||
</div>
|
||||
<div class="sign-in sign-in-no flexacenter" v-else onclick="showWindow('dsu_paulsign', 'https://bbs.gter.net/plugin.php?id=dsu_paulsign:sign&show=sign')" v-cloak>
|
||||
<img class="sign-in-bj" src="//framework.x-php.com/gter/image/gter/forum/assets/forum/sign-in-bj.svg" />
|
||||
<img class="coin-bj" src="//framework.x-php.com/gter/image/gter/forum/assets/forum/coin-bj.svg" />
|
||||
<img class="coin-icon" src="//framework.x-php.com/gter/image/gter/forum/assets/forum/coin-icon.png" />
|
||||
<span class="text flex1">签到领寄托币</span>
|
||||
<div class="sign-go flexcenter">
|
||||
<img class="sign-go-bj" src="//framework.x-php.com/gter/image/gter/forum/assets/forum/sign-go.svg" />
|
||||
GO
|
||||
</div>
|
||||
<img class="petal1" src="//framework.x-php.com/gter/image/gter/forum/assets/forum/petal1.png" />
|
||||
<img class="petal2" src="//framework.x-php.com/gter/image/gter/forum/assets/forum/petal2.png" />
|
||||
<img class="petal3" src="//framework.x-php.com/gter/image/gter/forum/assets/forum/petal3.png" />
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="head-navigation flexacenter">
|
||||
<img class="icon" src="./img/index-icon.png" />
|
||||
<a class="text textA" target="_blank" href="./">首页</a>
|
||||
<img class="arrows" src="./img/arrows-gray.svg" />
|
||||
<div class="text">{{ info.name }}</div>
|
||||
</div>
|
||||
|
||||
<div class="matter flexflex">
|
||||
<div class="sidebar">
|
||||
<div class="title">论坛版块</div>
|
||||
<div class="list">
|
||||
<template v-for="(item, index) in sectionList" :key="index">
|
||||
<div v-if="item.key == 'line'" class="line"></div>
|
||||
<div v-else class="item flexacenter" :class="{'pitch' : item.uniqid == section}" @click="changeSection(item.uniqid)">
|
||||
<span class="text">{{ item.name }}</span>
|
||||
</div>
|
||||
</template>
|
||||
</div>
|
||||
</div>
|
||||
<div class="matter-content flex1">
|
||||
<div class="info flexflex">
|
||||
<img v-if="info.icon" class="img" :src="info.icon" />
|
||||
<div class="right flex1">
|
||||
<div class="title">{{ info.name }}</div>
|
||||
<div class="link flexacenter">
|
||||
<div class="item flexacenter" v-for="item in 4" :key="item">
|
||||
<div class="text">申港超强资料包</div>
|
||||
<img class="icon" src="./img/arrows-circle-red.svg" />
|
||||
</div>
|
||||
</div>
|
||||
<div class="bottom flexacenter">
|
||||
<div class="data flexacenter">
|
||||
共
|
||||
<div class="sum">{{ count }}</div>
|
||||
个帖子
|
||||
</div>
|
||||
<div class="btn flexcenter">
|
||||
<img class="icon" src="./img/pen-icon.png" />
|
||||
<div class="text">发帖</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="details-box flexflex">
|
||||
<div class="content-box flex1">
|
||||
<div class="selectives-box" v-if="handpickList.length > 0">
|
||||
<div class="head-top flexcenter">
|
||||
<img class="icon" src="https://app.gter.net/image/miniApp/offer/handpick-icon.png" />
|
||||
<div class="text">精选</div>
|
||||
</div>
|
||||
<div class="list flexflex">
|
||||
<div class="item flexacenter" v-for="(item, index) in handpickList" :key="index">
|
||||
<div class="dot"></div>
|
||||
<div class="text one-line-display">{{ item.title }}</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="red-tag" v-if="tagsList.length > 0">
|
||||
<div class="title">热门标签
|
||||
<img class="icon" src="./img/triangle-red.svg" />
|
||||
</div>
|
||||
<div class="list">
|
||||
<div class="item flexacenter" v-for="(item, index) in tagsList" :key="index">{{ item.tagname }}</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="list-box">
|
||||
<item-forum v-for="(item, index) in list" :key="index" :itemdata="item"></item-forum>
|
||||
</div>
|
||||
</div>
|
||||
<div class="side-box"></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<script src="./js/axios.min.js"></script>
|
||||
<script src="./js/public.js"></script>
|
||||
<script type="module" src="./js/section-index.js"></script>
|
||||
</body>
|
||||
|
||||
</html>
|
||||
227
section.html
Normal file
227
section.html
Normal file
@@ -0,0 +1,227 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8" />
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||||
<title>版块首页</title>
|
||||
<link rel="stylesheet" href="./css/public.css" />
|
||||
<link rel="stylesheet" href="./css/section.css" />
|
||||
<script src="./js/vue.global.js"></script>
|
||||
<style scoped>
|
||||
[v-cloak] {
|
||||
display: none;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
|
||||
<body>
|
||||
<div class="container" id="sectionIndex" v-cloak>
|
||||
<div class="head-top flexacenter">
|
||||
<img class="logo" src="https://oss.gter.net/logo" alt="" />
|
||||
<div class="flex1"></div>
|
||||
<div class="input-box flexacenter">
|
||||
<input class="input flex1" type="text" placeholder="大家都在搜：屯特" />
|
||||
<img class="icon" />
|
||||
</div>
|
||||
|
||||
<div class="sign-in sign-in-already flexcenter" v-if="signInAlreadyState" v-cloak onclick="showWindow('dsu_paulsign', 'https://bbs.gter.net/plugin.php?id=dsu_paulsign:sign&show=sign')">
|
||||
<img class="sign-icon" src="//framework.x-php.com/gter/image/gter/forum/assets/forum/sign-icon.png" />
|
||||
<span>已签到，明天再来</span>
|
||||
</div>
|
||||
<div class="sign-in sign-in-no flexacenter" v-else onclick="showWindow('dsu_paulsign', 'https://bbs.gter.net/plugin.php?id=dsu_paulsign:sign&show=sign')" v-cloak>
|
||||
<img class="sign-in-bj" src="//framework.x-php.com/gter/image/gter/forum/assets/forum/sign-in-bj.svg" />
|
||||
<img class="coin-bj" src="//framework.x-php.com/gter/image/gter/forum/assets/forum/coin-bj.svg" />
|
||||
<img class="coin-icon" src="//framework.x-php.com/gter/image/gter/forum/assets/forum/coin-icon.png" />
|
||||
<span class="text flex1">签到领寄托币</span>
|
||||
<div class="sign-go flexcenter">
|
||||
<img class="sign-go-bj" src="//framework.x-php.com/gter/image/gter/forum/assets/forum/sign-go.svg" />
|
||||
GO
|
||||
</div>
|
||||
<img class="petal1" src="//framework.x-php.com/gter/image/gter/forum/assets/forum/petal1.png" />
|
||||
<img class="petal2" src="//framework.x-php.com/gter/image/gter/forum/assets/forum/petal2.png" />
|
||||
<img class="petal3" src="//framework.x-php.com/gter/image/gter/forum/assets/forum/petal3.png" />
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="head-navigation flexacenter">
|
||||
<img class="icon" src="./img/index-icon.png" />
|
||||
<a class="text textA" target="_blank" href="./">首页</a>
|
||||
<img class="arrows" src="./img/arrows-gray.svg" />
|
||||
<div class="text">{{ info.name }}</div>
|
||||
</div>
|
||||
|
||||
<div class="matter flexflex">
|
||||
<div class="sidebar">
|
||||
<div class="title">论坛版块</div>
|
||||
<div class="list">
|
||||
<template v-for="(item, index) in sectionList" :key="index">
|
||||
<div v-if="item.key == 'line'" class="line"></div>
|
||||
<div v-else class="item flexacenter" :class="{'pitch' : item.uniqid == section}" @click="changeSection(item.uniqid)">
|
||||
<span class="text">{{ item.name }}</span>
|
||||
</div>
|
||||
</template>
|
||||
</div>
|
||||
</div>
|
||||
<div class="matter-content flex1">
|
||||
<div class="info-box flexflex">
|
||||
<img v-if="info.icon" class="img" :src="info.icon" />
|
||||
<div class="right flex1">
|
||||
<div class="title">{{ info.name }}</div>
|
||||
<div class="link flexacenter">
|
||||
<div class="item flexacenter" v-for="item in 4" :key="item">
|
||||
<div class="text">申港超强资料包</div>
|
||||
<img class="icon" src="./img/arrows-circle-red.svg" />
|
||||
</div>
|
||||
</div>
|
||||
<div class="bottom flexacenter">
|
||||
<div class="data flexacenter">
|
||||
共
|
||||
<div class="sum">{{ count }}</div>
|
||||
个帖子
|
||||
</div>
|
||||
<div class="btn flexcenter">
|
||||
<img class="icon" src="./img/pen-icon.png" />
|
||||
<div class="text">发帖</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="details-box flexflex">
|
||||
<div class="content-box flex1">
|
||||
<div class="selectives-box" v-if="handpickList.length > 0">
|
||||
<div class="head-top flexcenter">
|
||||
<img class="icon" src="https://app.gter.net/image/miniApp/offer/handpick-icon.png" />
|
||||
<div class="text">精选</div>
|
||||
</div>
|
||||
<div class="list flexflex">
|
||||
<a class="item flexacenter" v-for="(item, index) in handpickList" :key="index" :href="'http://14.22.79.19:9551/?tpl=forum/details&uniqid=' + item.uniqid" target="_blank">
|
||||
<div class="dot"></div>
|
||||
<div class="text one-line-display">{{ item.title }}</div>
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="red-tag" v-if="tagsList.length > 0">
|
||||
<div class="title">
|
||||
热门标签
|
||||
<img class="icon" src="./img/triangle-red.svg" />
|
||||
</div>
|
||||
<div class="list">
|
||||
<div class="item flexacenter" v-for="(item, index) in tagsList" :key="index">{{ item.tagname }}</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="list-box">
|
||||
<item-forum v-for="(item, index) in list" :key="index" :itemdata="item"></item-forum>
|
||||
</div>
|
||||
</div>
|
||||
<div >
|
||||
<a class="adv" href="" target="_blank">
|
||||
<img class="adv-icon" src="https://o.x-php.com/bbs/common/cf/1709075xdbbbvjd8cbxvdd.jpg" alt="26Fall祈福，求offer得offer！" />
|
||||
</a>
|
||||
<a class="adv" href="" target="_blank">
|
||||
<img class="adv-icon" src="https://o.x-php.com/bbs/common/cf/1709075xdbbbvjd8cbxvdd.jpg" alt="26Fall祈福，求offer得offer！" />
|
||||
</a>
|
||||
|
||||
<!-- offer -->
|
||||
<div class="offer-side-box side-box" v-if="offer.length != 0">
|
||||
<div class="side-header flexacenter">
|
||||
<div class="left flexacenter">
|
||||
<img class="header-icon" src="./img/offer-index-icon.png" />
|
||||
<div class="title">Offer</div>
|
||||
</div>
|
||||
<a class="more flexacenter" href="https://offer.gter.net" target="_blank">
|
||||
<span>more</span>
|
||||
<img class="more-icon" src="./img/right-arrow-black.svg" />
|
||||
</a>
|
||||
</div>
|
||||
<div class="box">
|
||||
<a class="item flexflex" v-cloak v-for="item in offer" :key="item" :href="'https://offer.gter.net/details/' + item['uniqid']" target="_blank">
|
||||
<img class="school-img" :src="item.data['schoollogo']" />
|
||||
<div class="school-detail flex1 flexflex">
|
||||
<div class="school-name one-line-display">{{ item.data['schoolname'] }}</div>
|
||||
<div class="school-brief one-line-display">{{ item.data['professional'] }}</div>
|
||||
<div class="school-offer flexacenter">
|
||||
<span>{{ item.data['degree'] }}</span>
|
||||
<span class="long-string">|</span>
|
||||
<span>{{ item.data['semester'] }}</span>
|
||||
<span class="long-string">|</span>
|
||||
<span>{{ item.data['apply_results_text'] }}</span>
|
||||
</div>
|
||||
</div>
|
||||
</a>
|
||||
<a class="add-btn flexcenter" style="position: relative" href="https://offer.gter.net/post" target="_blank" v-cloak>
|
||||
<img class="add-icon" src="./img/add-btn-black.svg" />
|
||||
<div>报Offer</div>
|
||||
<div v-if="realname == 0 && userInfo.uin > 0" class="open-attest-btn" @click.prevent="openAttest"></div>
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- vote -->
|
||||
<div class="vote-side-box side-box" v-if="vote.length != 0">
|
||||
<div class="side-header flexacenter">
|
||||
<div class="left flexacenter">
|
||||
<img class="header-icon" src="./img/vote-index-icon.png" />
|
||||
<div class="title">投票</div>
|
||||
</div>
|
||||
<a class="more flexacenter" target="_blank" href="https://vote.gter.net">
|
||||
<span>more</span>
|
||||
<img class="more-icon" src="./img/right-arrow-black.svg" />
|
||||
</a>
|
||||
</div>
|
||||
<div class="box">
|
||||
<a class="item flexflex" v-cloak v-for="item in vote" :key="item" target="_blank" :href="'https://vote.gter.net/details/' + item['uniqid']">
|
||||
<div class="name one-line-display">{{item['title']}}</div>
|
||||
<div class="brief">{{ item['message'] }}</div>
|
||||
</a>
|
||||
<a class="add-btn flexcenter" style="position: relative" v-cloak target="_blank" href="https://vote.gter.net/publish">
|
||||
<img class="add-icon" src="./img/add-btn-black.svg" />
|
||||
<div>发起投票</div>
|
||||
<div v-if="realname == 0 && userInfo.uin > 0" class="open-attest-btn" @click.prevent="openAttest"></div>
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- mj -->
|
||||
<div class="interviewexperience-side-box side-box" v-if="interviewexperience.length != 0">
|
||||
<div class="side-header flexacenter">
|
||||
<div class="left flexacenter">
|
||||
<img class="header-icon" src="./img/mj-index-icon.png" />
|
||||
<div class="title">面经</div>
|
||||
</div>
|
||||
<a class="more flexacenter" href="https://interviewexperience.gter.net/" target="_blank">
|
||||
<span>more</span>
|
||||
<img class="more-icon" src="./img/right-arrow-black.svg" />
|
||||
</a>
|
||||
</div>
|
||||
<div class="box">
|
||||
<a class="item flexflex" v-cloak v-for="(item,index) in interviewexperience" :key="item" :href="'https://interviewexperience.gter.net/details/' + item['uniqid']" target="_blank">
|
||||
<div class="school one-line-display">{{ item.data['schoolname'] }}</div>
|
||||
<div class="major one-line-display" v-if="item.data['profession']">{{ item.data['profession'] }}</div>
|
||||
<div class="info">
|
||||
<img class="icon" :src="item.user['avatar']" />
|
||||
<span class="text">{{ item['content'] }}</span>
|
||||
</div>
|
||||
</a>
|
||||
<a class="add-btn flexcenter" style="position: relative" href="https://interviewexperience.gter.net/publish" target="_blank" v-cloak>
|
||||
<img class="add-icon" src="./img/add-btn-black.svg" />
|
||||
<div>写面经</div>
|
||||
<div v-if="realname == 0 && userInfo.uin > 0" class="open-attest-btn" @click.prevent="openAttest"></div>
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- newest 最新 -->
|
||||
<latest-list boxtype="newest"></latest-list>
|
||||
<latest-list boxtype="essence"></latest-list>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<script src="./js/axios.min.js"></script>
|
||||
<script src="./js/public.js"></script>
|
||||
<script type="module" src="./js/section.js"></script>
|
||||
</body>
|
||||
</html>
|
||||
Reference in New Issue
Block a user