refactor(component): 重构组件模板与样式结构
将公共样式提取至public.css，优化组件模板结构 添加图片资源与组件模板同步脚本 调整组件样式与布局，统一风格
This commit is contained in:
DESKTOP-RQ919RC\Pc
24
component/item-bottom/item-bottom.js
Normal file
24
component/item-bottom/item-bottom.js
Normal file
@@ -0,0 +1,24 @@
|
||||
// my-component.js
|
||||
// 引入全局 Vue 对象（因在 HTML 中通过 script 引入，Vue 已挂载到 window）
|
||||
const { defineComponent, ref } = Vue;
|
||||
// 定义组件（直接使用模板）
|
||||
export const itemBottom = defineComponent({
|
||||
name: "item-bottom",
|
||||
props: {
|
||||
title: {
|
||||
type: String,
|
||||
default: "默认标题",
|
||||
},
|
||||
itemdata: {
|
||||
type: Object,
|
||||
default: () => {},
|
||||
},
|
||||
},
|
||||
|
||||
setup(props) {
|
||||
let item = ref({ ...props.itemdata });
|
||||
return { item };
|
||||
},
|
||||
|
||||
template: `<div class="comment flexacenter" v-if="!Array.isArray(item?.commentreviews)"> <img class="icon" :src="item?.commentreviews?.avatar" /> <div class="text one-line-display">{{ item?.commentreviews?.content }}</div></div><div class="bottom flexacenter"> <div class="bottom-item like flexacenter"> <img class="icon" src="./img/like-icon.png" /> <div class="text">{{ item.likes || "赞" }}</div> </div> <div class="bottom-item like flexacenter"> <img class="icon" src="./img/collect-golden.svg" /> <div class="text">{{ item.collections || "收藏" }}</div> </div> <div class="bottom-item like flexacenter"> <img class="icon" src="./img/discuss-icon.png" /> <div class="text">{{ item.comments || "讨论" }}</div> </div> <div class="bottom-item like flexacenter"> <img class="icon" src="./img/bi-copper-icon.png" /> <div class="text">{{ item.coins || "投币" }}</div> </div> <div class="bottom-item like flexacenter"> <img class="icon" src="./img/share-gray.png" /> <div class="text">转发</div> </div></div>`,
|
||||
});
|
||||
28
component/item-bottom/item-bottom.txt
Normal file
28
component/item-bottom/item-bottom.txt
Normal file
@@ -0,0 +1,28 @@
|
||||
<div class="comment flexacenter" v-if="!Array.isArray(item?.commentreviews)">
|
||||
<img class="icon" :src="item?.commentreviews?.avatar" />
|
||||
<div class="text one-line-display">{{ item?.commentreviews?.content }}</div>
|
||||
</div>
|
||||
<div class="bottom flexacenter">
|
||||
<div class="bottom-item like flexacenter">
|
||||
<img class="icon" src="./img/like-icon.png" />
|
||||
<div class="text">{{ item.likes || "赞" }}</div>
|
||||
</div>
|
||||
<div class="bottom-item like flexacenter">
|
||||
<img class="icon" src="./img/collect-golden.svg" />
|
||||
<div class="text">{{ item.collections || "收藏" }}</div>
|
||||
</div>
|
||||
<div class="bottom-item like flexacenter">
|
||||
<img class="icon" src="./img/discuss-icon.png" />
|
||||
<div class="text">{{ item.comments || "讨论" }}</div>
|
||||
</div>
|
||||
|
||||
<div class="bottom-item like flexacenter">
|
||||
<img class="icon" src="./img/bi-copper-icon.png" />
|
||||
<div class="text">{{ item.coins || "投币" }}</div>
|
||||
</div>
|
||||
|
||||
<div class="bottom-item like flexacenter">
|
||||
<img class="icon" src="./img/share-gray.png" />
|
||||
<div class="text">转发</div>
|
||||
</div>
|
||||
</div>
|
||||
@@ -1,11 +1,12 @@
|
||||
// my-component.js
|
||||
// 引入全局 Vue 对象（因在 HTML 中通过 script 引入，Vue 已挂载到 window）
|
||||
const { defineComponent } = Vue;
|
||||
console.log("11223131321321");
|
||||
import { itemBottom } from "../item-bottom/item-bottom.js";
|
||||
import { itemHead } from "../item-head/item-head.js";
|
||||
|
||||
// 定义组件（直接使用模板）
|
||||
export const MyComponent = defineComponent({
|
||||
name: "MyComponent",
|
||||
export const itemForum = defineComponent({
|
||||
name: "item-forum",
|
||||
props: {
|
||||
title: {
|
||||
type: String,
|
||||
@@ -18,10 +19,11 @@ export const MyComponent = defineComponent({
|
||||
alert("组件按钮被点击");
|
||||
},
|
||||
},
|
||||
// 直接使用template选项，包含标题、文本内容和按钮
|
||||
template: `<div style="padding: 10px; border: 1px solid #ccc;">
|
||||
<h3>{{ title }}</h3>
|
||||
<p>这是从text文件加载的模板内容</p>
|
||||
<button @click="handleClick">点击我</button>
|
||||
</div>`,
|
||||
|
||||
components: {
|
||||
itemBottom,
|
||||
itemHead,
|
||||
},
|
||||
|
||||
template: `<div class="item-box item-forum"> <item-head></item-head> <div class="label flexflex"> <img class="item icon" src="./img/recommend-icon.png" /> <img class="item icon" src="./img/essence-icon.png" /> <div class="item blue">香港</div> <div class="item">香港</div> </div> <div class="title">【干货】香港留学费用准备</div> <div class="message">在即将赴港的时候，很多同学好奇香港一年制硕士下来的整体费用大概是多少，其实主要包括学费，租房费和生活费三部分。学费的话根据不同香港来定，大概在10-30万港币之间，比较固定…</div> <item-bottom></item-bottom></div>`,
|
||||
});
|
||||
|
||||
@@ -1,5 +0,0 @@
|
||||
<div style="padding: 10px; border: 1px solid #ccc;">
|
||||
<h3>{{ title }}</h3>
|
||||
<p>这是从text文件加载的模板内容</p>
|
||||
<button @click="handleClick">点击我</button>
|
||||
</div>
|
||||
15
component/item-forum/item-forum.txt
Normal file
15
component/item-forum/item-forum.txt
Normal file
@@ -0,0 +1,15 @@
|
||||
<div class="item-box item-forum">
|
||||
<item-head></item-head>
|
||||
<div class="label flexflex">
|
||||
<img class="item icon" src="./img/recommend-icon.png" />
|
||||
<img class="item icon" src="./img/essence-icon.png" />
|
||||
<div class="item blue">香港</div>
|
||||
<div class="item">香港</div>
|
||||
</div>
|
||||
|
||||
<div class="title">【干货】香港留学费用准备</div>
|
||||
|
||||
<div class="message">在即将赴港的时候，很多同学好奇香港一年制硕士下来的整体费用大概是多少，其实主要包括学费，租房费和生活费三部分。学费的话根据不同香港来定，大概在10-30万港币之间，比较固定…</div>
|
||||
|
||||
<item-bottom></item-bottom>
|
||||
</div>
|
||||
22
component/item-head/item-head.js
Normal file
22
component/item-head/item-head.js
Normal file
@@ -0,0 +1,22 @@
|
||||
// my-component.js
|
||||
// 引入全局 Vue 对象（因在 HTML 中通过 script 引入，Vue 已挂载到 window）
|
||||
const { defineComponent } = Vue;
|
||||
|
||||
// 定义组件（直接使用模板）
|
||||
export const itemHead = defineComponent({
|
||||
name: "item-head",
|
||||
props: {
|
||||
title: {
|
||||
type: String,
|
||||
default: "默认标题",
|
||||
},
|
||||
},
|
||||
// 方法
|
||||
methods: {
|
||||
handleClick() {
|
||||
alert("组件按钮被点击");
|
||||
},
|
||||
},
|
||||
|
||||
template: `<div class="item-head flexacenter"> <img class="avatar" src="https://nas.gter.net:9008/avatar/97K4EWIMLrsbGTWXslC1UltTF6WOikN42jDKLNjtax7Hc44zLpaKSdU9oWFhY2E~/small" /> <div class="name">小P学姐</div> <img class="group" src="https://o.x-php.com/Zvt57TuJSUvkyhw-xG7Y2l-c_ZMtdXfqqsgFptxhcq_cQnrlcPJ0DVESBq_D-81qNDQyOQ~~" /> <div class="time">2025-8-11 01:30</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">3016</div> </div> <div class="btn flexcenter" @click="cutShow"> <img class="icon" src="https://app.gter.net/image/miniApp/offer/dot-dot-dot-gray.png" /> </div> <!-- <template v-if="show"> <div class="mask" catch:tap="cutShow" catch:touchmove="touchmove"></div> <div class="operate" catch:tap="true"> <div class="item" bind:tap="report">举报</div> <template v-if="ismanager"> <div class="item" bind:tap="hide">{{ item.hidden == 0 ? '隐藏' : '显示' }}</div> <div class="item" bind:tap="recommend">{{ item.recommend == 1 ? '取消' : '' }}推荐</div> <div class="item" bind:tap="essence">{{ item.best == 1 ? '取消' : '' }}精华</div> </template> </div> </template> --></div> `,
|
||||
});
|
||||
28
component/item-head/item-head.txt
Normal file
28
component/item-head/item-head.txt
Normal file
@@ -0,0 +1,28 @@
|
||||
<div class="item-head flexacenter">
|
||||
<img class="avatar" src="https://nas.gter.net:9008/avatar/97K4EWIMLrsbGTWXslC1UltTF6WOikN42jDKLNjtax7Hc44zLpaKSdU9oWFhY2E~/small" />
|
||||
<div class="name">小P学姐</div>
|
||||
<img class="group" src="https://o.x-php.com/Zvt57TuJSUvkyhw-xG7Y2l-c_ZMtdXfqqsgFptxhcq_cQnrlcPJ0DVESBq_D-81qNDQyOQ~~" />
|
||||
<div class="time">2025-8-11 01:30</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">3016</div>
|
||||
</div>
|
||||
|
||||
<div class="btn flexcenter" @click="cutShow">
|
||||
<img class="icon" src="https://app.gter.net/image/miniApp/offer/dot-dot-dot-gray.png" />
|
||||
</div>
|
||||
|
||||
<!-- <template v-if="show">
|
||||
<div class="mask" catch:tap="cutShow" catch:touchmove="touchmove"></div>
|
||||
<div class="operate" catch:tap="true">
|
||||
<div class="item" bind:tap="report">举报</div>
|
||||
<template v-if="ismanager">
|
||||
<div class="item" bind:tap="hide">{{ item.hidden == 0 ? '隐藏' : '显示' }}</div>
|
||||
<div class="item" bind:tap="recommend">{{ item.recommend == 1 ? '取消' : '' }}推荐</div>
|
||||
<div class="item" bind:tap="essence">{{ item.best == 1 ? '取消' : '' }}精华</div>
|
||||
</template>
|
||||
</div>
|
||||
</template> -->
|
||||
</div>
|
||||
33
component/item-offer/item-offer.js
Normal file
33
component/item-offer/item-offer.js
Normal file
@@ -0,0 +1,33 @@
|
||||
// my-component.js
|
||||
// 引入全局 Vue 对象（因在 HTML 中通过 script 引入，Vue 已挂载到 window）
|
||||
const { defineComponent } = Vue;
|
||||
import { itemBottom } from "../item-bottom/item-bottom.js";
|
||||
import { itemHead } from "../item-head/item-head.js";
|
||||
|
||||
// 定义组件（直接使用模板）
|
||||
export const itemOffer = defineComponent({
|
||||
name: "item-offer",
|
||||
props: {
|
||||
title: {
|
||||
type: String,
|
||||
default: "默认标题",
|
||||
},
|
||||
item: {
|
||||
type: Object,
|
||||
default: () => {},
|
||||
},
|
||||
},
|
||||
// 方法
|
||||
methods: {
|
||||
handleClick() {
|
||||
alert("组件按钮被点击");
|
||||
},
|
||||
},
|
||||
|
||||
components: {
|
||||
itemBottom,
|
||||
itemHead,
|
||||
},
|
||||
|
||||
template: `<div class="item-box item-offer"> <item-head></item-head> <div class="school flexacenter"> <img class="icon" :src="item.data.schoollogo" mode="heightFix"></image> <div class="text flex1 one-line-display">{{ item.data.schoolname }}</div> </div> <div class="major flexacenter" v-if="item.data.professional"> <div class="key">{{ item.data.project ? '专业' : '项目/专业' }}</div> <div class="value flex1 one-line-display">{{ item.data.professional }}</div> </div> <div class="major flexacenter" v-if="item.data.project"> <div class="key">项目</div> <div class="value flex1 one-line-display">{{ item.data.project }}</div> </div> <div class="info flexacenter"> {{ item.data.semester }} <div class="line"></div> {{ item.data.degree }} <div class="line"></div> <div class="results" :class="['r' + item.data.apply_results]">{{ item.data.apply_results_text }}</div> </div> <div class="message" v-if="item.content">{{ item.content }}</div> <item-bottom></item-bottom></div>`,
|
||||
});
|
||||
28
component/item-offer/item-offer.txt
Normal file
28
component/item-offer/item-offer.txt
Normal file
@@ -0,0 +1,28 @@
|
||||
<div class="item-box item-offer">
|
||||
<item-head></item-head>
|
||||
<div class="school flexacenter">
|
||||
<img class="icon" :src="item.data.schoollogo" mode="heightFix"></image>
|
||||
<div class="text flex1 one-line-display">{{ item.data.schoolname }}</div>
|
||||
</div>
|
||||
|
||||
<div class="major flexacenter" v-if="item.data.professional">
|
||||
<div class="key">{{ item.data.project ? '专业' : '项目/专业' }}</div>
|
||||
<div class="value flex1 one-line-display">{{ item.data.professional }}</div>
|
||||
</div>
|
||||
|
||||
<div class="major flexacenter" v-if="item.data.project">
|
||||
<div class="key">项目</div>
|
||||
<div class="value flex1 one-line-display">{{ item.data.project }}</div>
|
||||
</div>
|
||||
|
||||
<div class="info flexacenter">
|
||||
{{ item.data.semester }}
|
||||
<div class="line"></div>
|
||||
{{ item.data.degree }}
|
||||
<div class="line"></div>
|
||||
<div class="results" :class="['r' + item.data.apply_results]">{{ item.data.apply_results_text }}</div>
|
||||
</div>
|
||||
|
||||
<div class="message" v-if="item.content">{{ item.content }}</div>
|
||||
<item-bottom></item-bottom>
|
||||
</div>
|
||||
33
component/item-summary/item-summary.js
Normal file
33
component/item-summary/item-summary.js
Normal file
@@ -0,0 +1,33 @@
|
||||
// my-component.js
|
||||
// 引入全局 Vue 对象（因在 HTML 中通过 script 引入，Vue 已挂载到 window）
|
||||
const { defineComponent } = Vue;
|
||||
import { itemBottom } from "../item-bottom/item-bottom.js";
|
||||
import { itemHead } from "../item-head/item-head.js";
|
||||
|
||||
// 定义组件（直接使用模板）
|
||||
export const itemSummary = defineComponent({
|
||||
name: "item-summary",
|
||||
props: {
|
||||
title: {
|
||||
type: String,
|
||||
default: "默认标题",
|
||||
},
|
||||
item: {
|
||||
type: Object,
|
||||
default: () => {},
|
||||
},
|
||||
},
|
||||
// 方法
|
||||
methods: {
|
||||
handleClick() {
|
||||
alert("组件按钮被点击");
|
||||
},
|
||||
},
|
||||
|
||||
components: {
|
||||
itemBottom,
|
||||
itemHead,
|
||||
},
|
||||
|
||||
template: `<div class="item-box item-summary"> <item-head></item-head> <div class="title" v-if="item.title">{{ item.title }}</div> <div class="message one-line-display" v-if="item.content">{{ item.content }}</div> <div class="total flexacenter"> <div>共</div> <div class="num">{{ item.data.offercount }}</div> <div>个Offer</div> </div> <div class="list flexacenter" scroll-x> <div class="item flexflex" v-for="(it,i) in item.data.offerlist" :key="i"> <div class="item-content flexflex"> <div class="school flexacenter"> <img class="icon" :src="it.schoollogo" mode="heightFix"></image> <div class="name one-line-display flex1">{{ it.schoolname }}</div> </div> <div class="major one-line-display" v-if="it.professional">{{ it.professional }}</div> <div class="info flexacenter"> {{ it.semester || '25Fall' }} <div class="line"></div> {{ it.degree || 'MSc' }} <div class="line"></div> <div class="results" :class="['r' + it.apply_results]">{{ it.apply_results_text || 'Offer' }}</div> </div> </div> </div> <div v-if="item.data.offercount > 3" class="item more flexcenter"> <div class="item-content flexcenter"> <div class="">查看更多</div> <img class="icon" src="/img/arrows-circle-dark-blue.svg" mode="heightFix"></image> </div> </div> </div> <item-bottom></item-bottom></div>`,
|
||||
});
|
||||
36
component/item-summary/item-summary.txt
Normal file
36
component/item-summary/item-summary.txt
Normal file
@@ -0,0 +1,36 @@
|
||||
<div class="item-box item-summary">
|
||||
<item-head></item-head>
|
||||
<div class="title" v-if="item.title">{{ item.title }}</div>
|
||||
<div class="message one-line-display" v-if="item.content">{{ item.content }}</div>
|
||||
<div class="total flexacenter">
|
||||
<div>共</div>
|
||||
<div class="num">{{ item.data.offercount }}</div>
|
||||
<div>个Offer</div>
|
||||
</div>
|
||||
<div class="list flexacenter" scroll-x>
|
||||
<div class="item flexflex" v-for="(it,i) in item.data.offerlist" :key="i">
|
||||
<div class="item-content flexflex">
|
||||
<div class="school flexacenter">
|
||||
<img class="icon" :src="it.schoollogo" mode="heightFix"></image>
|
||||
<div class="name one-line-display flex1">{{ it.schoolname }}</div>
|
||||
</div>
|
||||
<div class="major one-line-display" v-if="it.professional">{{ it.professional }}</div>
|
||||
<div class="info flexacenter">
|
||||
{{ it.semester || '25Fall' }}
|
||||
<div class="line"></div>
|
||||
{{ it.degree || 'MSc' }}
|
||||
<div class="line"></div>
|
||||
<div class="results" :class="['r' + it.apply_results]">{{ it.apply_results_text || 'Offer' }}</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
<div v-if="item.data.offercount > 3" class="item more flexcenter">
|
||||
<div class="item-content flexcenter">
|
||||
<div class="">查看更多</div>
|
||||
<img class="icon" src="/img/arrows-circle-dark-blue.svg" mode="heightFix"></image>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<item-bottom></item-bottom>
|
||||
</div>
|
||||
38
component/item-vote/item-vote.js
Normal file
38
component/item-vote/item-vote.js
Normal file
@@ -0,0 +1,38 @@
|
||||
// my-component.js
|
||||
// 引入全局 Vue 对象（因在 HTML 中通过 script 引入，Vue 已挂载到 window）
|
||||
const { defineComponent, ref } = Vue;
|
||||
import { itemBottom } from "../item-bottom/item-bottom.js";
|
||||
import { itemHead } from "../item-head/item-head.js";
|
||||
|
||||
// 定义组件（直接使用模板）
|
||||
export const itemVote = defineComponent({
|
||||
name: "item-vote",
|
||||
props: {
|
||||
itemdata: {
|
||||
type: Object,
|
||||
default: () => {},
|
||||
},
|
||||
},
|
||||
|
||||
setup(props) {
|
||||
let item = ref({ ...props.itemdata });
|
||||
// item.value.title = "【投41票】" + item.value.title;
|
||||
// res["timestamp"] = util.strtimeago(res.release_at, 4);
|
||||
// const data = res.data;
|
||||
// const option = data.option || [];
|
||||
// res["isvote"] = option.some((item) => item.selected == 1);
|
||||
// const time = util.handleDeadline(data.deadline);
|
||||
// res["time"] = time;
|
||||
// this.setData({
|
||||
// item: res,
|
||||
// });
|
||||
return { item };
|
||||
},
|
||||
|
||||
components: {
|
||||
itemBottom,
|
||||
itemHead,
|
||||
},
|
||||
|
||||
template: `<div class="item-box item-vote"> <item-head :itemdata="item"></item-head> <div class="title">{{ item.title }}</div> <div class="message one-line-display" v-if="item.content">{{ item.content }}</div> <div class="info flexacenter"> <template v-if="item.time"> <div class="status">进行中</div> <div class="line"></div> <div class="num">{{ item?.time.num }}</div>{{ item.time.unit }}后结束 </template> <div v-else class="status end">已结束</div> <div class="line"></div> <div class="num">{{ item?.data?.votes }}</div>人参与 </div> <div class="list" :class="{ 'voted': !item.time || item.isvote }"> <div class="list-item flexcenter " v-for="(item, index) in item?.data?.option" :key="index"> <div class="list-top flexacenter"> <img v-if="item.selected" class="list-tick" src="/img/vote-tick.svg"> <div v-else class="list-serial flexcenter">{{ index + 1 }}</div> <div class="list-text one-line-display flex1">{{ item.value }}</div> </div> <div class="list-bottom flexacenter"> <div class="list-length" :style="{ width: item.percentage + '%' }"></div>{{ item.count }} </div> </div> </div> <item-bottom :itemdata="item"></item-bottom></div>`,
|
||||
});
|
||||
29
component/item-vote/item-vote.txt
Normal file
29
component/item-vote/item-vote.txt
Normal file
@@ -0,0 +1,29 @@
|
||||
<div class="item-box item-vote">
|
||||
<item-head :itemdata="item"></item-head>
|
||||
<div class="title">{{ item.title }}</div>
|
||||
<div class="message one-line-display" v-if="item.content">{{ item.content }}</div>
|
||||
<div class="info flexacenter">
|
||||
<template v-if="item.time">
|
||||
<div class="status">进行中</div>
|
||||
<div class="line"></div>
|
||||
<div class="num">{{ item?.time.num }}</div>{{ item.time.unit }}后结束
|
||||
</template>
|
||||
<div v-else class="status end">已结束</div>
|
||||
<div class="line"></div>
|
||||
<div class="num">{{ item?.data?.votes }}</div>人参与
|
||||
</div>
|
||||
|
||||
<div class="list" :class="{ 'voted': !item.time || item.isvote }">
|
||||
<div class="list-item flexcenter " v-for="(item, index) in item?.data?.option" :key="index">
|
||||
<div class="list-top flexacenter">
|
||||
<img v-if="item.selected" class="list-tick" src="/img/vote-tick.svg">
|
||||
<div v-else class="list-serial flexcenter">{{ index + 1 }}</div>
|
||||
<div class="list-text one-line-display flex1">{{ item.value }}</div>
|
||||
</div>
|
||||
<div class="list-bottom flexacenter">
|
||||
<div class="list-length" :style="{ width: item.percentage + '%' }"></div>{{ item.count }}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<item-bottom :itemdata="item"></item-bottom>
|
||||
</div>
|
||||
@@ -181,6 +181,9 @@ body {
|
||||
#homepage-other .head-navigation .text:hover {
|
||||
text-decoration: underline;
|
||||
}
|
||||
#homepage-other .matter {
|
||||
align-items: flex-start;
|
||||
}
|
||||
#homepage-other .matter .card-user {
|
||||
width: 320px;
|
||||
background: -webkit-linear-gradient(270.06444514deg, #ffffff 0%, #eef8f9 100%);
|
||||
@@ -192,6 +195,7 @@ body {
|
||||
flex-direction: column;
|
||||
padding-top: 39px;
|
||||
padding-bottom: 40px;
|
||||
margin-right: 20px;
|
||||
}
|
||||
#homepage-other .matter .card-user .avatar {
|
||||
width: 120px;
|
||||
@@ -252,12 +256,13 @@ body {
|
||||
color: #000000;
|
||||
}
|
||||
#homepage-other .matter .matter-content .message-box {
|
||||
height: 452px;
|
||||
background-color: #ffffff;
|
||||
border: 1px solid #e9eef2;
|
||||
border-radius: 10px;
|
||||
padding-left: 95px;
|
||||
padding-bottom: 5px;
|
||||
padding-right: 40px;
|
||||
padding-bottom: 31px;
|
||||
margin-bottom: 20px;
|
||||
}
|
||||
#homepage-other .matter .matter-content .message-box .header {
|
||||
border-bottom: 1px dotted #d7d7d7;
|
||||
@@ -312,3 +317,83 @@ body {
|
||||
color: #ffffff;
|
||||
background-color: #04b0d5;
|
||||
}
|
||||
#homepage-other .matter .matter-content .message-box .stats {
|
||||
padding-top: 20px;
|
||||
padding-bottom: 21px;
|
||||
font-size: 14px;
|
||||
}
|
||||
#homepage-other .matter .matter-content .message-box .stats .item .text {
|
||||
color: #7f7f7f;
|
||||
margin-right: 5px;
|
||||
}
|
||||
#homepage-other .matter .matter-content .message-box .stats .item .num {
|
||||
font-family: "Arial-BoldMT", "Arial Bold", "Arial", sans-serif;
|
||||
font-weight: 700;
|
||||
color: #04b0d5;
|
||||
}
|
||||
#homepage-other .matter .matter-content .message-box .stats .line {
|
||||
color: #d7d7d7;
|
||||
margin: 0 14px;
|
||||
}
|
||||
#homepage-other .matter .matter-content .message-box .tags {
|
||||
flex-wrap: wrap;
|
||||
}
|
||||
#homepage-other .matter .matter-content .message-box .tags .item {
|
||||
padding: 0 10px;
|
||||
font-size: 14px;
|
||||
color: #333333;
|
||||
height: 24px;
|
||||
background-color: #f6f6f6;
|
||||
border: 1px solid #f0f1ec;
|
||||
border-radius: 5px;
|
||||
margin-right: 20px;
|
||||
margin-bottom: 10px;
|
||||
}
|
||||
#homepage-other .matter .matter-content .message-box .tags .item .icon {
|
||||
height: 13px;
|
||||
margin-right: 7px;
|
||||
}
|
||||
#homepage-other .matter .matter-content .list-area {
|
||||
width: 860px;
|
||||
background-color: #ffffff;
|
||||
border: 1px solid #e9eef2;
|
||||
border-radius: 10px;
|
||||
padding-left: 95px;
|
||||
padding-right: 40px;
|
||||
}
|
||||
#homepage-other .matter .matter-content .list-area .classify {
|
||||
padding-top: 39px;
|
||||
padding-bottom: 23px;
|
||||
}
|
||||
#homepage-other .matter .matter-content .list-area .classify .item {
|
||||
width: 50px;
|
||||
height: 32px;
|
||||
line-height: 32px;
|
||||
text-align: center;
|
||||
background-color: #ffffff;
|
||||
border: 1px solid #f2f2f2;
|
||||
border-radius: 12px;
|
||||
color: #333333;
|
||||
cursor: pointer;
|
||||
}
|
||||
#homepage-other .matter .matter-content .list-area .classify .item.pitch {
|
||||
background-color: #d35110;
|
||||
color: #ffffff;
|
||||
}
|
||||
#homepage-other .matter .matter-content .list-area .classify .item:not(:last-child) {
|
||||
margin-right: 10px;
|
||||
}
|
||||
#homepage-other .matter .matter-content .list-area .issue-data {
|
||||
color: #7f7f7f;
|
||||
font-size: 14px;
|
||||
margin-bottom: 20px;
|
||||
}
|
||||
#homepage-other .matter .matter-content .list-area .issue-data .num {
|
||||
font-family: "PingFangSC-Semibold", "PingFang SC Semibold", "PingFang SC", sans-serif;
|
||||
font-weight: 650;
|
||||
color: #000000;
|
||||
margin: 0 5px;
|
||||
}
|
||||
#homepage-other .matter .matter-content .list-area .list-box .item-box {
|
||||
margin-bottom: 20px;
|
||||
}
|
||||
|
||||
@@ -209,6 +209,7 @@ body {
|
||||
}
|
||||
|
||||
.matter {
|
||||
align-items: flex-start;
|
||||
.card-user {
|
||||
width: 320px;
|
||||
background: -webkit-linear-gradient(270.064445137829deg, rgba(255, 255, 255, 1) 0%, rgba(238, 248, 249, 1) 100%);
|
||||
@@ -220,7 +221,7 @@ body {
|
||||
flex-direction: column;
|
||||
padding-top: 39px;
|
||||
padding-bottom: 40px;
|
||||
|
||||
margin-right: 20px;
|
||||
.avatar {
|
||||
width: 120px;
|
||||
height: 120px;
|
||||
@@ -294,12 +295,13 @@ body {
|
||||
|
||||
.matter-content {
|
||||
.message-box {
|
||||
height: 452px;
|
||||
background-color: rgba(255, 255, 255, 1);
|
||||
border: 1px solid rgba(233, 238, 242, 1);
|
||||
border-radius: 10px;
|
||||
padding-left: 95px;
|
||||
padding-bottom: 5px;
|
||||
padding-right: 40px;
|
||||
padding-bottom: 31px;
|
||||
margin-bottom: 20px;
|
||||
|
||||
.header {
|
||||
border-bottom: 1px dotted #d7d7d7;
|
||||
@@ -330,7 +332,7 @@ body {
|
||||
flex-flow: wrap;
|
||||
padding-top: 20px;
|
||||
border-bottom: 1px dotted #d7d7d7;
|
||||
|
||||
|
||||
.item {
|
||||
width: 50%;
|
||||
margin-bottom: 15px;
|
||||
@@ -361,6 +363,103 @@ body {
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.stats {
|
||||
padding-top: 20px;
|
||||
padding-bottom: 21px;
|
||||
font-size: 14px;
|
||||
|
||||
.item {
|
||||
.text {
|
||||
color: #7f7f7f;
|
||||
margin-right: 5px;
|
||||
}
|
||||
|
||||
.num {
|
||||
font-family: "Arial-BoldMT", "Arial Bold", "Arial", sans-serif;
|
||||
font-weight: 700;
|
||||
color: #04b0d5;
|
||||
}
|
||||
}
|
||||
|
||||
.line {
|
||||
color: #d7d7d7;
|
||||
margin: 0 14px;
|
||||
}
|
||||
}
|
||||
|
||||
.tags {
|
||||
flex-wrap: wrap;
|
||||
.item {
|
||||
padding: 0 10px;
|
||||
font-size: 14px;
|
||||
color: #333333;
|
||||
height: 24px;
|
||||
background-color: rgba(246, 246, 246, 1);
|
||||
border: 1px solid rgba(240, 241, 236, 1);
|
||||
border-radius: 5px;
|
||||
margin-right: 20px;
|
||||
margin-bottom: 10px;
|
||||
|
||||
.icon {
|
||||
height: 13px;
|
||||
margin-right: 7px;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.list-area {
|
||||
width: 860px;
|
||||
background-color: rgba(255, 255, 255, 1);
|
||||
border: 1px solid rgba(233, 238, 242, 1);
|
||||
border-radius: 10px;
|
||||
padding-left: 95px;
|
||||
padding-right: 40px;
|
||||
|
||||
.classify {
|
||||
padding-top: 39px;
|
||||
padding-bottom: 23px;
|
||||
.item {
|
||||
width: 50px;
|
||||
height: 32px;
|
||||
line-height: 32px;
|
||||
text-align: center;
|
||||
background-color: rgba(255, 255, 255, 1);
|
||||
border: 1px solid rgba(242, 242, 242, 1);
|
||||
border-radius: 12px;
|
||||
color: #333333;
|
||||
cursor: pointer;
|
||||
|
||||
&.pitch {
|
||||
background-color: rgba(211, 81, 16, 1);
|
||||
color: #ffffff;
|
||||
}
|
||||
|
||||
&:not(:last-child) {
|
||||
margin-right: 10px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.issue-data {
|
||||
color: #7f7f7f;
|
||||
font-size: 14px;
|
||||
margin-bottom: 20px;
|
||||
|
||||
.num {
|
||||
font-family: "PingFangSC-Semibold", "PingFang SC Semibold", "PingFang SC", sans-serif;
|
||||
font-weight: 650;
|
||||
color: #000000;
|
||||
margin: 0 5px;
|
||||
}
|
||||
}
|
||||
|
||||
.list-box {
|
||||
.item-box {
|
||||
margin-bottom: 20px;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
167
css/index.css
167
css/index.css
@@ -1,45 +1,3 @@
|
||||
* {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
box-sizing: border-box;
|
||||
font-family: "PingFangSC-Regular", "PingFang SC", sans-serif;
|
||||
font-weight: 400;
|
||||
font-style: normal;
|
||||
}
|
||||
body {
|
||||
padding: 10px;
|
||||
background-color: #eef2f5;
|
||||
}
|
||||
/* 公共的 css 样式 */
|
||||
.flexflex {
|
||||
display: flex;
|
||||
}
|
||||
.flexcenter {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
}
|
||||
.flexjcenter {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
}
|
||||
.flexacenter {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
}
|
||||
.flex1 {
|
||||
flex: 1;
|
||||
}
|
||||
.flexcolumn {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
}
|
||||
.one-line-display {
|
||||
word-break: keep-all;
|
||||
white-space: nowrap;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
}
|
||||
.topic-and-selectives .head-top {
|
||||
width: 64px;
|
||||
height: 24px;
|
||||
@@ -227,128 +185,3 @@ body {
|
||||
.forum-sections-list .list .line .item:not(:last-child) {
|
||||
margin-right: 10px;
|
||||
}
|
||||
.item-box {
|
||||
width: 897px;
|
||||
background-color: #ffffff;
|
||||
border: 1px solid #e9eef2;
|
||||
border-radius: 10px;
|
||||
padding: 18px 20px 0;
|
||||
}
|
||||
.item-box .item-head {
|
||||
margin-bottom: 14px;
|
||||
}
|
||||
.item-box .item-head .avatar {
|
||||
width: 28px;
|
||||
height: 28px;
|
||||
border-radius: 50%;
|
||||
margin-right: 8px;
|
||||
}
|
||||
.item-box .item-head .name {
|
||||
font-style: normal;
|
||||
color: #555555;
|
||||
font-size: 14px;
|
||||
margin-right: 8px;
|
||||
}
|
||||
.item-box .item-head .group {
|
||||
height: 15px;
|
||||
margin-right: 8px;
|
||||
}
|
||||
.item-box .item-head .time {
|
||||
font-size: 13px;
|
||||
color: #aaaaaa;
|
||||
}
|
||||
.item-box .item-head .view {
|
||||
font-size: 12px;
|
||||
color: #aaaaaa;
|
||||
margin-right: 15px;
|
||||
}
|
||||
.item-box .item-head .view .icon {
|
||||
width: 13px;
|
||||
height: 8px;
|
||||
margin-right: 5px;
|
||||
}
|
||||
.item-box .item-head .btn {
|
||||
width: 24px;
|
||||
height: 16px;
|
||||
background-color: #f2f2f2;
|
||||
border-radius: 150px;
|
||||
}
|
||||
.item-box .item-head .btn .icon {
|
||||
width: 18px;
|
||||
height: 18px;
|
||||
}
|
||||
.item-box .label {
|
||||
margin-bottom: 10px;
|
||||
}
|
||||
.item-box .label .item {
|
||||
font-size: 14px;
|
||||
color: #555555;
|
||||
padding: 0 9px;
|
||||
height: 24px;
|
||||
line-height: 24px;
|
||||
background-color: #f2f2f2;
|
||||
border-radius: 6px;
|
||||
}
|
||||
.item-box .label .item.icon {
|
||||
padding: 0;
|
||||
}
|
||||
.item-box .label .item:not(:last-child) {
|
||||
margin-right: 10px;
|
||||
}
|
||||
.item-box .label .item.blue {
|
||||
color: #ffffff;
|
||||
background-color: #04b0d5;
|
||||
}
|
||||
.item-box .title {
|
||||
font-weight: 650;
|
||||
font-size: 20px;
|
||||
color: #000000;
|
||||
line-height: 36px;
|
||||
margin-bottom: 7px;
|
||||
font-family: "PingFangSC-Semibold", "PingFang SC Semibold", "PingFang SC", sans-serif;
|
||||
}
|
||||
.item-box .message {
|
||||
font-size: 14px;
|
||||
color: #555555;
|
||||
white-space: pre-wrap;
|
||||
margin-bottom: 15px;
|
||||
}
|
||||
.item-box .comment {
|
||||
height: 40px;
|
||||
background-color: #f6f6f6;
|
||||
border-radius: 10px;
|
||||
padding: 0 10px;
|
||||
}
|
||||
.item-box .comment .icon {
|
||||
width: 20px;
|
||||
height: 20px;
|
||||
border-radius: 50%;
|
||||
margin-right: 10px;
|
||||
}
|
||||
.item-box .comment .text {
|
||||
font-size: 14px;
|
||||
color: #7f7f7f;
|
||||
}
|
||||
.item-box .bottom {
|
||||
height: 55px;
|
||||
justify-content: flex-end;
|
||||
}
|
||||
.item-box .bottom .bottom-item {
|
||||
cursor: pointer;
|
||||
}
|
||||
.item-box .bottom .bottom-item:not(:last-child) {
|
||||
margin-right: 60px;
|
||||
}
|
||||
.item-box .bottom .bottom-item .icon {
|
||||
width: 20px;
|
||||
height: 20px;
|
||||
margin-right: 8px;
|
||||
}
|
||||
.item-box .bottom .bottom-item .text {
|
||||
color: #aaaaaa;
|
||||
font-size: 13px;
|
||||
}
|
||||
.item-box .bottom .bottom-item.like .icon {
|
||||
width: 18px;
|
||||
height: 18px;
|
||||
}
|
||||
|
||||
204
css/index.less
204
css/index.less
@@ -1,54 +1,3 @@
|
||||
* {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
box-sizing: border-box;
|
||||
font-family: "PingFangSC-Regular", "PingFang SC", sans-serif;
|
||||
font-weight: 400;
|
||||
font-style: normal;
|
||||
}
|
||||
|
||||
body {
|
||||
padding: 10px;
|
||||
background-color: rgba(238, 242, 245, 1);
|
||||
}
|
||||
|
||||
/* 公共的 css 样式 */
|
||||
.flexflex {
|
||||
display: flex;
|
||||
}
|
||||
|
||||
.flexcenter {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.flexjcenter {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
.flexacenter {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.flex1 {
|
||||
flex: 1;
|
||||
}
|
||||
|
||||
.flexcolumn {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
.one-line-display {
|
||||
word-break: keep-all;
|
||||
white-space: nowrap;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
}
|
||||
|
||||
.topic-and-selectives {
|
||||
.head-top {
|
||||
width: 64px;
|
||||
@@ -276,155 +225,4 @@ body {
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.item-box {
|
||||
width: 897px;
|
||||
background-color: rgba(255, 255, 255, 1);
|
||||
border: 1px solid rgba(233, 238, 242, 1);
|
||||
border-radius: 10px;
|
||||
padding: 18px 20px 0;
|
||||
|
||||
.item-head {
|
||||
margin-bottom: 14px;
|
||||
.avatar {
|
||||
width: 28px;
|
||||
height: 28px;
|
||||
border-radius: 50%;
|
||||
margin-right: 8px;
|
||||
}
|
||||
|
||||
.name {
|
||||
font-style: normal;
|
||||
color: #555555;
|
||||
font-size: 14px;
|
||||
margin-right: 8px;
|
||||
}
|
||||
|
||||
.group {
|
||||
height: 15px;
|
||||
margin-right: 8px;
|
||||
}
|
||||
|
||||
.time {
|
||||
font-size: 13px;
|
||||
color: #aaaaaa;
|
||||
}
|
||||
|
||||
.view {
|
||||
font-size: 12px;
|
||||
color: #aaaaaa;
|
||||
margin-right: 15px;
|
||||
|
||||
.icon {
|
||||
width: 13px;
|
||||
height: 8px;
|
||||
margin-right: 5px;
|
||||
}
|
||||
}
|
||||
|
||||
.btn {
|
||||
width: 24px;
|
||||
height: 16px;
|
||||
background-color: rgba(242, 242, 242, 1);
|
||||
border-radius: 150px;
|
||||
|
||||
.icon {
|
||||
width: 18px;
|
||||
height: 18px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.label {
|
||||
margin-bottom: 10px;
|
||||
|
||||
.item {
|
||||
font-size: 14px;
|
||||
color: #555555;
|
||||
padding: 0 9px;
|
||||
height: 24px;
|
||||
line-height: 24px;
|
||||
background-color: rgba(242, 242, 242, 1);
|
||||
border-radius: 6px;
|
||||
|
||||
&.icon {
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
&:not(:last-child) {
|
||||
margin-right: 10px;
|
||||
}
|
||||
|
||||
&.blue {
|
||||
color: #ffffff;
|
||||
background-color: #04b0d5;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.title {
|
||||
font-weight: 650;
|
||||
font-size: 20px;
|
||||
color: #000000;
|
||||
line-height: 36px;
|
||||
margin-bottom: 7px;
|
||||
font-family: "PingFangSC-Semibold", "PingFang SC Semibold", "PingFang SC", sans-serif;
|
||||
}
|
||||
|
||||
.message {
|
||||
font-size: 14px;
|
||||
color: #555555;
|
||||
white-space: pre-wrap;
|
||||
margin-bottom: 15px;
|
||||
}
|
||||
|
||||
.comment {
|
||||
height: 40px;
|
||||
background-color: rgba(246, 246, 246, 1);
|
||||
border-radius: 10px;
|
||||
padding: 0 10px;
|
||||
|
||||
.icon {
|
||||
width: 20px;
|
||||
height: 20px;
|
||||
border-radius: 50%;
|
||||
margin-right: 10px;
|
||||
}
|
||||
|
||||
.text {
|
||||
font-size: 14px;
|
||||
color: #7f7f7f;
|
||||
}
|
||||
}
|
||||
|
||||
.bottom {
|
||||
height: 55px;
|
||||
justify-content: flex-end;
|
||||
|
||||
.bottom-item {
|
||||
cursor: pointer;
|
||||
&:not(:last-child) {
|
||||
margin-right: 60px;
|
||||
}
|
||||
|
||||
.icon {
|
||||
width: 20px;
|
||||
height: 20px;
|
||||
margin-right: 8px;
|
||||
}
|
||||
|
||||
.text {
|
||||
color: #aaaaaa;
|
||||
font-size: 13px;
|
||||
}
|
||||
|
||||
&.like {
|
||||
.icon {
|
||||
width: 18px;
|
||||
height: 18px;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
419
css/public.css
Normal file
419
css/public.css
Normal file
@@ -0,0 +1,419 @@
|
||||
* {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
box-sizing: border-box;
|
||||
font-family: "PingFangSC-Regular", "PingFang SC", sans-serif;
|
||||
font-weight: 400;
|
||||
font-style: normal;
|
||||
}
|
||||
body {
|
||||
background-color: #eef2f5;
|
||||
}
|
||||
/* 公共的 css 样式 */
|
||||
.flexflex {
|
||||
display: flex;
|
||||
}
|
||||
.flexcenter {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
}
|
||||
.flexjcenter {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
}
|
||||
.flexacenter {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
}
|
||||
.flex1 {
|
||||
flex: 1;
|
||||
}
|
||||
.flexcolumn {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
}
|
||||
.one-line-display {
|
||||
word-break: keep-all;
|
||||
white-space: nowrap;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
}
|
||||
.item-box {
|
||||
max-width: 897px;
|
||||
width: 100%;
|
||||
background-color: #ffffff;
|
||||
border: 1px solid #e9eef2;
|
||||
border-radius: 10px;
|
||||
padding: 18px 20px 0;
|
||||
}
|
||||
.item-box .item-head {
|
||||
margin-bottom: 14px;
|
||||
}
|
||||
.item-box .item-head .avatar {
|
||||
width: 28px;
|
||||
height: 28px;
|
||||
border-radius: 50%;
|
||||
margin-right: 8px;
|
||||
}
|
||||
.item-box .item-head .name {
|
||||
font-style: normal;
|
||||
color: #555555;
|
||||
font-size: 14px;
|
||||
margin-right: 8px;
|
||||
}
|
||||
.item-box .item-head .group {
|
||||
height: 15px;
|
||||
margin-right: 8px;
|
||||
}
|
||||
.item-box .item-head .time {
|
||||
font-size: 13px;
|
||||
color: #aaaaaa;
|
||||
}
|
||||
.item-box .item-head .view {
|
||||
font-size: 12px;
|
||||
color: #aaaaaa;
|
||||
margin-right: 15px;
|
||||
}
|
||||
.item-box .item-head .view .icon {
|
||||
width: 13px;
|
||||
height: 8px;
|
||||
margin-right: 5px;
|
||||
}
|
||||
.item-box .item-head .btn {
|
||||
width: 24px;
|
||||
height: 16px;
|
||||
background-color: #f2f2f2;
|
||||
border-radius: 150px;
|
||||
}
|
||||
.item-box .item-head .btn .icon {
|
||||
width: 18px;
|
||||
height: 18px;
|
||||
}
|
||||
.item-box .label {
|
||||
margin-bottom: 10px;
|
||||
}
|
||||
.item-box .label .item {
|
||||
font-size: 14px;
|
||||
color: #555555;
|
||||
padding: 0 9px;
|
||||
height: 24px;
|
||||
line-height: 24px;
|
||||
background-color: #f2f2f2;
|
||||
border-radius: 6px;
|
||||
}
|
||||
.item-box .label .item.icon {
|
||||
padding: 0;
|
||||
}
|
||||
.item-box .label .item:not(:last-child) {
|
||||
margin-right: 10px;
|
||||
}
|
||||
.item-box .label .item.blue {
|
||||
color: #ffffff;
|
||||
background-color: #04b0d5;
|
||||
}
|
||||
.item-box.item-forum .title {
|
||||
font-weight: 650;
|
||||
font-size: 20px;
|
||||
color: #000000;
|
||||
line-height: 36px;
|
||||
margin-bottom: 7px;
|
||||
font-family: "PingFangSC-Semibold", "PingFang SC Semibold", "PingFang SC", sans-serif;
|
||||
}
|
||||
.item-box.item-forum .message {
|
||||
font-size: 14px;
|
||||
color: #555555;
|
||||
white-space: pre-wrap;
|
||||
margin-bottom: 15px;
|
||||
}
|
||||
.item-box.item-offer {
|
||||
font-size: 14px;
|
||||
color: #333333;
|
||||
}
|
||||
.item-box.item-offer .school {
|
||||
height: 45px;
|
||||
border-bottom: 1px dotted #d7d7d7;
|
||||
}
|
||||
.item-box.item-offer .school .icon {
|
||||
height: 20px;
|
||||
margin-right: 10px;
|
||||
}
|
||||
.item-box.item-offer .school .text {
|
||||
font-family: "PingFangSC-Semibold", "PingFang SC Semibold", "PingFang SC", sans-serif;
|
||||
font-weight: 650;
|
||||
font-style: normal;
|
||||
font-size: 20px;
|
||||
color: #000000;
|
||||
line-height: 36px;
|
||||
}
|
||||
.item-box.item-offer .major {
|
||||
height: 45px;
|
||||
border-bottom: 1px dotted #d7d7d7;
|
||||
}
|
||||
.item-box.item-offer .major .key {
|
||||
font-size: 14px;
|
||||
color: #7f7f7f;
|
||||
margin-right: 20px;
|
||||
}
|
||||
.item-box.item-offer .info {
|
||||
height: 45px;
|
||||
border-bottom: 1px dotted #d7d7d7;
|
||||
margin-bottom: 12px;
|
||||
}
|
||||
.item-box.item-offer .info .line {
|
||||
width: 1px;
|
||||
height: 14px;
|
||||
background: #aaaaaa;
|
||||
margin: 0 10px;
|
||||
}
|
||||
.item-box.item-offer .info .results {
|
||||
font-size: 13px;
|
||||
color: #ffffff;
|
||||
height: 20px;
|
||||
padding: 0 9px;
|
||||
border-radius: 37px;
|
||||
}
|
||||
.item-box.item-offer .message {
|
||||
color: #555555;
|
||||
margin-bottom: 15px;
|
||||
}
|
||||
.item-box.item-summary .title {
|
||||
font-family: "PingFangSC-Semibold", "PingFang SC Semibold", "PingFang SC", sans-serif;
|
||||
font-weight: 650;
|
||||
font-style: normal;
|
||||
font-size: 20px;
|
||||
color: #000000;
|
||||
line-height: 36px;
|
||||
margin-bottom: 7px;
|
||||
}
|
||||
.item-box.item-summary .message {
|
||||
font-size: 14px;
|
||||
color: #555555;
|
||||
margin-bottom: 20px;
|
||||
}
|
||||
.item-box.item-summary .total {
|
||||
font-size: 14px;
|
||||
color: #555555;
|
||||
margin-bottom: 12px;
|
||||
}
|
||||
.item-box.item-summary .total .num {
|
||||
font-family: "Arial-BoldMT", "Arial Bold", "Arial", sans-serif;
|
||||
font-weight: 700;
|
||||
color: #000000;
|
||||
margin: 0 5px;
|
||||
}
|
||||
.item-box.item-summary .list {
|
||||
overflow: auto;
|
||||
margin-bottom: 16px;
|
||||
}
|
||||
.item-box.item-summary .list .item-content {
|
||||
width: 280px;
|
||||
flex-direction: column;
|
||||
justify-content: space-between;
|
||||
padding: 10px;
|
||||
}
|
||||
.item-box.item-summary .list .item {
|
||||
width: 280px;
|
||||
height: 110px;
|
||||
background-color: rgba(242, 242, 242, 0);
|
||||
border: 1px solid #ebebeb;
|
||||
border-radius: 10px;
|
||||
color: #333333;
|
||||
font-size: 14px;
|
||||
cursor: pointer;
|
||||
margin-right: 10px;
|
||||
}
|
||||
.item-box.item-summary .list .item .school .icon {
|
||||
height: 24px;
|
||||
}
|
||||
.item-box.item-summary .list .item .school .name {
|
||||
font-family: "PingFangSC-Semibold", "PingFang SC Semibold", "PingFang SC", sans-serif;
|
||||
font-weight: 650;
|
||||
font-style: normal;
|
||||
font-size: 16px;
|
||||
color: #000000;
|
||||
line-height: 24px;
|
||||
}
|
||||
.item-box.item-summary .list .item .info .results {
|
||||
font-size: 13px;
|
||||
color: #ffffff;
|
||||
height: 20px;
|
||||
padding: 0 9px;
|
||||
border-radius: 37px;
|
||||
}
|
||||
.item-box.item-summary .list .item .info .line {
|
||||
width: 1px;
|
||||
height: 14px;
|
||||
background: #aaaaaa;
|
||||
margin: 0 10px;
|
||||
}
|
||||
.item-box.item-summary .list .item.more {
|
||||
color: #026277;
|
||||
}
|
||||
.item-box.item-summary .list .item.more .item-content {
|
||||
vertical-align: top;
|
||||
flex-direction: row;
|
||||
justify-content: center;
|
||||
}
|
||||
.item-box.item-summary .list .item.more .icon {
|
||||
width: 15px;
|
||||
height: 15px;
|
||||
margin-left: 5px;
|
||||
}
|
||||
.item-box.item-vote .title {
|
||||
font-family: "PingFangSC-Semibold", "PingFang SC Semibold", "PingFang SC", sans-serif;
|
||||
font-weight: 650;
|
||||
font-style: normal;
|
||||
font-size: 20px;
|
||||
color: #000000;
|
||||
line-height: 36px;
|
||||
margin-bottom: 7px;
|
||||
}
|
||||
.item-box.item-vote .message {
|
||||
font-size: 14px;
|
||||
color: #555555;
|
||||
margin-bottom: 15px;
|
||||
}
|
||||
.item-box.item-vote .info {
|
||||
font-size: 14px;
|
||||
color: #7f7f7f;
|
||||
}
|
||||
.item-box.item-vote .info .status {
|
||||
height: 22px;
|
||||
line-height: 22px;
|
||||
background-color: rgba(211, 81, 16, 0.09803922);
|
||||
border-radius: 24px;
|
||||
font-size: 13px;
|
||||
color: #d35110;
|
||||
padding: 0 7px;
|
||||
}
|
||||
.item-box.item-vote .info .line {
|
||||
width: 1px;
|
||||
height: 14px;
|
||||
background-color: #aaaaaa;
|
||||
margin: 0 10px;
|
||||
}
|
||||
.item-box.item-vote .info .num {
|
||||
font-weight: 650;
|
||||
color: #000000;
|
||||
}
|
||||
.item-box.item-vote .list {
|
||||
margin: 4px 20px 0;
|
||||
overflow: hidden;
|
||||
max-height: 138px;
|
||||
}
|
||||
.item-box.item-vote .list.voted {
|
||||
max-height: 178px;
|
||||
}
|
||||
.item-box.item-vote .list.voted .list-item {
|
||||
height: 75px;
|
||||
}
|
||||
.item-box.item-vote .list.voted .list-item .list-bottom {
|
||||
display: flex;
|
||||
}
|
||||
.item-box.item-vote .list .list-item {
|
||||
height: 55px;
|
||||
flex-direction: column;
|
||||
}
|
||||
.item-box.item-vote .list .list-item:not(:last-of-type) {
|
||||
border-bottom: 1px dotted #d7d7d7;
|
||||
}
|
||||
.item-box.item-vote .list .list-item .list-top {
|
||||
margin-bottom: 1px;
|
||||
width: 100%;
|
||||
}
|
||||
.item-box.item-vote .list .list-item .list-top .list-serial {
|
||||
width: 18px;
|
||||
height: 18px;
|
||||
line-height: 18px;
|
||||
background-color: #333333;
|
||||
border-radius: 50%;
|
||||
color: #ffffff;
|
||||
font-size: 13px;
|
||||
margin-right: 12px;
|
||||
}
|
||||
.item-box.item-vote .list .list-item .list-top .list-tick {
|
||||
width: 18px;
|
||||
height: 18px;
|
||||
margin-right: 12px;
|
||||
}
|
||||
.item-box.item-vote .list .list-item .list-top .list-text {
|
||||
font-size: 18px;
|
||||
line-height: 24px;
|
||||
color: #333333;
|
||||
width: 400px;
|
||||
}
|
||||
.item-box.item-vote .list .list-item .list-bottom {
|
||||
color: #026277;
|
||||
font-size: 13px;
|
||||
padding: 2px;
|
||||
justify-content: flex-end;
|
||||
width: 100%;
|
||||
display: none;
|
||||
}
|
||||
.item-box.item-vote .list .list-item .list-bottom .list-length {
|
||||
width: 100%;
|
||||
height: 4px;
|
||||
background-color: #cff7ff;
|
||||
border-radius: 66px;
|
||||
margin-right: 6px;
|
||||
}
|
||||
.item-box .comment {
|
||||
height: 40px;
|
||||
background-color: #f6f6f6;
|
||||
border-radius: 10px;
|
||||
padding: 0 10px;
|
||||
}
|
||||
.item-box .comment .icon {
|
||||
width: 20px;
|
||||
height: 20px;
|
||||
border-radius: 50%;
|
||||
margin-right: 10px;
|
||||
}
|
||||
.item-box .comment .text {
|
||||
font-size: 14px;
|
||||
color: #7f7f7f;
|
||||
}
|
||||
.item-box .bottom {
|
||||
margin-top: 15px;
|
||||
height: 55px;
|
||||
justify-content: flex-end;
|
||||
}
|
||||
.item-box .bottom .bottom-item {
|
||||
cursor: pointer;
|
||||
}
|
||||
.item-box .bottom .bottom-item:not(:last-child) {
|
||||
margin-right: 60px;
|
||||
}
|
||||
.item-box .bottom .bottom-item .icon {
|
||||
width: 20px;
|
||||
height: 20px;
|
||||
margin-right: 8px;
|
||||
}
|
||||
.item-box .bottom .bottom-item .text {
|
||||
color: #aaaaaa;
|
||||
font-size: 13px;
|
||||
}
|
||||
.item-box .bottom .bottom-item.like .icon {
|
||||
width: 18px;
|
||||
height: 18px;
|
||||
}
|
||||
/* offer 录取结果 */
|
||||
.results.r1 {
|
||||
background-color: #76c45e;
|
||||
}
|
||||
.results.r2 {
|
||||
background-color: #50e3c2;
|
||||
}
|
||||
.results.r3 {
|
||||
background-color: #81d3f8;
|
||||
}
|
||||
.results.r4 {
|
||||
background-color: #d35110;
|
||||
}
|
||||
.results.r5 {
|
||||
background-color: #f59a23;
|
||||
}
|
||||
.results.r6 {
|
||||
background-color: #8080ff;
|
||||
}
|
||||
509
css/public.less
Normal file
509
css/public.less
Normal file
@@ -0,0 +1,509 @@
|
||||
* {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
box-sizing: border-box;
|
||||
font-family: "PingFangSC-Regular", "PingFang SC", sans-serif;
|
||||
font-weight: 400;
|
||||
font-style: normal;
|
||||
}
|
||||
|
||||
body {
|
||||
background-color: rgba(238, 242, 245, 1);
|
||||
}
|
||||
|
||||
/* 公共的 css 样式 */
|
||||
.flexflex {
|
||||
display: flex;
|
||||
}
|
||||
|
||||
.flexcenter {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.flexjcenter {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
.flexacenter {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.flex1 {
|
||||
flex: 1;
|
||||
}
|
||||
|
||||
.flexcolumn {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
.one-line-display {
|
||||
word-break: keep-all;
|
||||
white-space: nowrap;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
}
|
||||
|
||||
.item-box {
|
||||
max-width: 897px;
|
||||
width: 100%;
|
||||
background-color: rgba(255, 255, 255, 1);
|
||||
border: 1px solid rgba(233, 238, 242, 1);
|
||||
border-radius: 10px;
|
||||
padding: 18px 20px 0;
|
||||
|
||||
.item-head {
|
||||
margin-bottom: 14px;
|
||||
.avatar {
|
||||
width: 28px;
|
||||
height: 28px;
|
||||
border-radius: 50%;
|
||||
margin-right: 8px;
|
||||
}
|
||||
|
||||
.name {
|
||||
font-style: normal;
|
||||
color: #555555;
|
||||
font-size: 14px;
|
||||
margin-right: 8px;
|
||||
}
|
||||
|
||||
.group {
|
||||
height: 15px;
|
||||
margin-right: 8px;
|
||||
}
|
||||
|
||||
.time {
|
||||
font-size: 13px;
|
||||
color: #aaaaaa;
|
||||
}
|
||||
|
||||
.view {
|
||||
font-size: 12px;
|
||||
color: #aaaaaa;
|
||||
margin-right: 15px;
|
||||
|
||||
.icon {
|
||||
width: 13px;
|
||||
height: 8px;
|
||||
margin-right: 5px;
|
||||
}
|
||||
}
|
||||
|
||||
.btn {
|
||||
width: 24px;
|
||||
height: 16px;
|
||||
background-color: rgba(242, 242, 242, 1);
|
||||
border-radius: 150px;
|
||||
|
||||
.icon {
|
||||
width: 18px;
|
||||
height: 18px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.label {
|
||||
margin-bottom: 10px;
|
||||
|
||||
.item {
|
||||
font-size: 14px;
|
||||
color: #555555;
|
||||
padding: 0 9px;
|
||||
height: 24px;
|
||||
line-height: 24px;
|
||||
background-color: rgba(242, 242, 242, 1);
|
||||
border-radius: 6px;
|
||||
|
||||
&.icon {
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
&:not(:last-child) {
|
||||
margin-right: 10px;
|
||||
}
|
||||
|
||||
&.blue {
|
||||
color: #ffffff;
|
||||
background-color: #04b0d5;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
&.item-forum {
|
||||
.title {
|
||||
font-weight: 650;
|
||||
font-size: 20px;
|
||||
color: #000000;
|
||||
line-height: 36px;
|
||||
margin-bottom: 7px;
|
||||
font-family: "PingFangSC-Semibold", "PingFang SC Semibold", "PingFang SC", sans-serif;
|
||||
}
|
||||
|
||||
.message {
|
||||
font-size: 14px;
|
||||
color: #555555;
|
||||
white-space: pre-wrap;
|
||||
margin-bottom: 15px;
|
||||
}
|
||||
}
|
||||
|
||||
&.item-offer {
|
||||
font-size: 14px;
|
||||
color: #333333;
|
||||
.school {
|
||||
height: 45px;
|
||||
border-bottom: 1px dotted #d7d7d7;
|
||||
.icon {
|
||||
height: 20px;
|
||||
margin-right: 10px;
|
||||
}
|
||||
|
||||
.text {
|
||||
font-family: "PingFangSC-Semibold", "PingFang SC Semibold", "PingFang SC", sans-serif;
|
||||
font-weight: 650;
|
||||
font-style: normal;
|
||||
font-size: 20px;
|
||||
color: #000000;
|
||||
line-height: 36px;
|
||||
}
|
||||
}
|
||||
|
||||
.major {
|
||||
height: 45px;
|
||||
border-bottom: 1px dotted #d7d7d7;
|
||||
.key {
|
||||
font-size: 14px;
|
||||
color: #7f7f7f;
|
||||
margin-right: 20px;
|
||||
}
|
||||
}
|
||||
|
||||
.info {
|
||||
height: 45px;
|
||||
border-bottom: 1px dotted #d7d7d7;
|
||||
margin-bottom: 12px;
|
||||
|
||||
.line {
|
||||
width: 1px;
|
||||
height: 14px;
|
||||
background: #aaaaaa;
|
||||
margin: 0 10px;
|
||||
}
|
||||
|
||||
.results {
|
||||
font-size: 13px;
|
||||
color: #ffffff;
|
||||
height: 20px;
|
||||
padding: 0 9px;
|
||||
border-radius: 37px;
|
||||
}
|
||||
}
|
||||
|
||||
.message {
|
||||
color: #555555;
|
||||
margin-bottom: 15px;
|
||||
}
|
||||
}
|
||||
|
||||
&.item-summary {
|
||||
.title {
|
||||
font-family: "PingFangSC-Semibold", "PingFang SC Semibold", "PingFang SC", sans-serif;
|
||||
font-weight: 650;
|
||||
font-style: normal;
|
||||
font-size: 20px;
|
||||
color: #000000;
|
||||
line-height: 36px;
|
||||
margin-bottom: 7px;
|
||||
}
|
||||
|
||||
.message {
|
||||
font-size: 14px;
|
||||
color: #555555;
|
||||
margin-bottom: 20px;
|
||||
}
|
||||
|
||||
.total {
|
||||
font-size: 14px;
|
||||
color: #555555;
|
||||
margin-bottom: 12px;
|
||||
|
||||
.num {
|
||||
font-family: "Arial-BoldMT", "Arial Bold", "Arial", sans-serif;
|
||||
font-weight: 700;
|
||||
color: #000000;
|
||||
margin: 0 5px;
|
||||
}
|
||||
}
|
||||
|
||||
.list {
|
||||
overflow: auto;
|
||||
margin-bottom: 16px;
|
||||
|
||||
.item-content {
|
||||
width: 280px;
|
||||
flex-direction: column;
|
||||
justify-content: space-between;
|
||||
padding: 10px;
|
||||
}
|
||||
|
||||
.item {
|
||||
width: 280px;
|
||||
height: 110px;
|
||||
background-color: rgba(242, 242, 242, 0);
|
||||
border: 1px solid rgba(235, 235, 235, 1);
|
||||
border-radius: 10px;
|
||||
color: #333333;
|
||||
font-size: 14px;
|
||||
cursor: pointer;
|
||||
margin-right: 10px;
|
||||
|
||||
.school {
|
||||
.icon {
|
||||
height: 24px;
|
||||
}
|
||||
|
||||
.name {
|
||||
font-family: "PingFangSC-Semibold", "PingFang SC Semibold", "PingFang SC", sans-serif;
|
||||
font-weight: 650;
|
||||
font-style: normal;
|
||||
font-size: 16px;
|
||||
color: #000000;
|
||||
line-height: 24px;
|
||||
}
|
||||
}
|
||||
|
||||
.info {
|
||||
.results {
|
||||
font-size: 13px;
|
||||
color: #ffffff;
|
||||
height: 20px;
|
||||
padding: 0 9px;
|
||||
border-radius: 37px;
|
||||
}
|
||||
|
||||
.line {
|
||||
width: 1px;
|
||||
height: 14px;
|
||||
background: #aaaaaa;
|
||||
margin: 0 10px;
|
||||
}
|
||||
}
|
||||
|
||||
&.more {
|
||||
color: #026277;
|
||||
// vertical-align: top;
|
||||
// flex-direction: row;
|
||||
// justify-content: center;
|
||||
.item-content {
|
||||
vertical-align: top;
|
||||
flex-direction: row;
|
||||
justify-content: center;
|
||||
}
|
||||
.icon {
|
||||
width: 15px;
|
||||
height: 15px;
|
||||
margin-left: 5px;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
&.item-vote {
|
||||
.title {
|
||||
font-family: "PingFangSC-Semibold", "PingFang SC Semibold", "PingFang SC", sans-serif;
|
||||
font-weight: 650;
|
||||
font-style: normal;
|
||||
font-size: 20px;
|
||||
color: #000000;
|
||||
line-height: 36px;
|
||||
margin-bottom: 7px;
|
||||
}
|
||||
|
||||
.message {
|
||||
font-size: 14px;
|
||||
color: #555555;
|
||||
margin-bottom: 15px;
|
||||
}
|
||||
|
||||
.info {
|
||||
font-size: 14px;
|
||||
color: #7f7f7f;
|
||||
|
||||
.status {
|
||||
height: 22px;
|
||||
line-height: 22px;
|
||||
background-color: rgba(211, 81, 16, 0.0980392156862745);
|
||||
border-radius: 24px;
|
||||
font-size: 13px;
|
||||
color: #d35110;
|
||||
padding: 0 7px;
|
||||
}
|
||||
|
||||
.line {
|
||||
width: 1px;
|
||||
height: 14px;
|
||||
background-color: #aaaaaa;
|
||||
margin: 0 10px;
|
||||
}
|
||||
|
||||
.num {
|
||||
font-weight: 650;
|
||||
color: #000000;
|
||||
}
|
||||
}
|
||||
|
||||
.list {
|
||||
margin: 4px 20px 0;
|
||||
overflow: hidden;
|
||||
max-height: 138px;
|
||||
|
||||
&.voted {
|
||||
max-height: 178px;
|
||||
|
||||
.list-item {
|
||||
height: 75px;
|
||||
|
||||
.list-bottom {
|
||||
display: flex;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.list-item {
|
||||
height: 55px;
|
||||
flex-direction: column;
|
||||
|
||||
&:not(:last-of-type) {
|
||||
border-bottom: 1px dotted #d7d7d7;
|
||||
}
|
||||
|
||||
.list-top {
|
||||
margin-bottom: 1px;
|
||||
width: 100%;
|
||||
|
||||
.list-serial {
|
||||
width: 18px;
|
||||
height: 18px;
|
||||
line-height: 18px;
|
||||
background-color: #333333;
|
||||
border-radius: 50%;
|
||||
color: #ffffff;
|
||||
font-size: 13px;
|
||||
margin-right: 12px;
|
||||
}
|
||||
|
||||
.list-tick {
|
||||
width: 18px;
|
||||
height: 18px;
|
||||
margin-right: 12px;
|
||||
}
|
||||
|
||||
.list-text {
|
||||
font-size: 18px;
|
||||
line-height: 24px;
|
||||
color: #333333;
|
||||
width: 400px;
|
||||
}
|
||||
}
|
||||
|
||||
.list-bottom {
|
||||
color: #026277;
|
||||
font-size: 13px;
|
||||
padding: 2px;
|
||||
justify-content: flex-end;
|
||||
width: 100%;
|
||||
display: none;
|
||||
|
||||
.list-length {
|
||||
width: 100%;
|
||||
height: 4px;
|
||||
background-color: rgba(207, 247, 255, 1);
|
||||
border-radius: 66px;
|
||||
margin-right: 6px;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.comment {
|
||||
height: 40px;
|
||||
background-color: rgba(246, 246, 246, 1);
|
||||
border-radius: 10px;
|
||||
padding: 0 10px;
|
||||
|
||||
.icon {
|
||||
width: 20px;
|
||||
height: 20px;
|
||||
border-radius: 50%;
|
||||
margin-right: 10px;
|
||||
}
|
||||
|
||||
.text {
|
||||
font-size: 14px;
|
||||
color: #7f7f7f;
|
||||
}
|
||||
}
|
||||
|
||||
.bottom {
|
||||
margin-top: 15px;
|
||||
height: 55px;
|
||||
justify-content: flex-end;
|
||||
|
||||
.bottom-item {
|
||||
cursor: pointer;
|
||||
&:not(:last-child) {
|
||||
margin-right: 60px;
|
||||
}
|
||||
|
||||
.icon {
|
||||
width: 20px;
|
||||
height: 20px;
|
||||
margin-right: 8px;
|
||||
}
|
||||
|
||||
.text {
|
||||
color: #aaaaaa;
|
||||
font-size: 13px;
|
||||
}
|
||||
|
||||
&.like {
|
||||
.icon {
|
||||
width: 18px;
|
||||
height: 18px;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
/* offer 录取结果 */
|
||||
.results.r1 {
|
||||
background-color: rgba(118, 196, 94, 1);
|
||||
}
|
||||
|
||||
.results.r2 {
|
||||
background-color: rgba(80, 227, 194, 1);
|
||||
}
|
||||
|
||||
.results.r3 {
|
||||
background-color: rgba(129, 211, 248, 1);
|
||||
}
|
||||
|
||||
.results.r4 {
|
||||
background-color: rgba(211, 81, 16, 1);
|
||||
}
|
||||
|
||||
.results.r5 {
|
||||
background-color: rgba(245, 154, 35, 1);
|
||||
}
|
||||
|
||||
.results.r6 {
|
||||
background-color: rgba(128, 128, 255, 1);
|
||||
}
|
||||
@@ -1,44 +1,3 @@
|
||||
* {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
box-sizing: border-box;
|
||||
font-family: "PingFangSC-Regular", "PingFang SC", sans-serif;
|
||||
font-weight: 400;
|
||||
font-style: normal;
|
||||
}
|
||||
body {
|
||||
background-color: #eef2f5;
|
||||
}
|
||||
/* 公共的 css 样式 */
|
||||
.flexflex {
|
||||
display: flex;
|
||||
}
|
||||
.flexcenter {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
}
|
||||
.flexjcenter {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
}
|
||||
.flexacenter {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
}
|
||||
.flex1 {
|
||||
flex: 1;
|
||||
}
|
||||
.flexcolumn {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
}
|
||||
.one-line-display {
|
||||
word-break: keep-all;
|
||||
white-space: nowrap;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
}
|
||||
#sectionIndex {
|
||||
width: 1200px;
|
||||
margin: 0 auto;
|
||||
|
||||
@@ -1,53 +1,3 @@
|
||||
* {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
box-sizing: border-box;
|
||||
font-family: "PingFangSC-Regular", "PingFang SC", sans-serif;
|
||||
font-weight: 400;
|
||||
font-style: normal;
|
||||
}
|
||||
|
||||
body {
|
||||
background-color: rgba(238, 242, 245, 1);
|
||||
}
|
||||
|
||||
/* 公共的 css 样式 */
|
||||
.flexflex {
|
||||
display: flex;
|
||||
}
|
||||
|
||||
.flexcenter {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.flexjcenter {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
.flexacenter {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.flex1 {
|
||||
flex: 1;
|
||||
}
|
||||
|
||||
.flexcolumn {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
.one-line-display {
|
||||
word-break: keep-all;
|
||||
white-space: nowrap;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
}
|
||||
|
||||
#sectionIndex {
|
||||
width: 1200px;
|
||||
margin: 0 auto;
|
||||
|
||||
@@ -1,148 +1,169 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8" />
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||||
<title>Document</title>
|
||||
<link rel="stylesheet" href="./css/homepage-other.css" />
|
||||
<script src="./js/vue.global.js"></script>
|
||||
</head>
|
||||
|
||||
<body>
|
||||
<div class="container" id="homepage-other">
|
||||
<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>
|
||||
<head>
|
||||
<meta charset="UTF-8" />
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||||
<title>Document</title>
|
||||
<link rel="stylesheet" href="./css/public.css" />
|
||||
<link rel="stylesheet" href="./css/homepage-other.css" />
|
||||
<script src="./js/vue.global.js"></script>
|
||||
</head>
|
||||
|
||||
<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>
|
||||
<body>
|
||||
<div class="container" id="homepage-other">
|
||||
<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="head-navigation flexacenter">
|
||||
<img class="icon" src="./img/index-icon.png" />
|
||||
<div class="text">首页</div>
|
||||
<img class="arrows" src="./img/arrows-gray.svg" />
|
||||
<div class="text">GTSuperstar 的个人主页</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="matter flexflex">
|
||||
<div class="card-user flexcenter">
|
||||
<div class="name-area">
|
||||
<img class="avatar" src="https://nas.gter.net:9008/avatar/97K4EWIMLrsbGTWXslC2WV5VHK6OikN42jDKLNjtax7HL4g2eMCJSdU9oWFhY2E~/middle" alt="用户头像" />
|
||||
<div class="head-navigation flexacenter">
|
||||
<img class="icon" src="./img/index-icon.png" />
|
||||
<div class="text">首页</div>
|
||||
<img class="arrows" src="./img/arrows-gray.svg" />
|
||||
<div class="text">GTSuperstar 的个人主页</div>
|
||||
</div>
|
||||
|
||||
<h3 class="username">GTSuperstar</h3>
|
||||
<p class="uid flexacenter">
|
||||
UID: 3276161
|
||||
<img class="icon" src="./img/copy-icon.png" />
|
||||
</p>
|
||||
</div>
|
||||
<div class="matter flexflex">
|
||||
<div class="card-user flexcenter">
|
||||
<div class="name-area">
|
||||
<img class="avatar" src="https://nas.gter.net:9008/avatar/97K4EWIMLrsbGTWXslC2WV5VHK6OikN42jDKLNjtax7HL4g2eMCJSdU9oWFhY2E~/middle" alt="用户头像" />
|
||||
|
||||
<div class="medal-area">
|
||||
<p class="title">勋章 6</p>
|
||||
<div class="list flexflex">
|
||||
<img v-for="item in 5" src="https://o.x-php.com/Zvt57TuJSUvkyhw-xG3WvCGHpt5oNTyM1Nwws484T7rGFDO1bKwnG2kLV_eSo5JUnMYHVj-SsGLytRp94iZe_tpcnj-4Ce4gYuGWnGU_hCATZ7u7I_X1F8YjCfX63o6lsSPQ7Y2N90MUNDQyOQ~~" alt="勋章1" class="item" />
|
||||
</div>
|
||||
</div>
|
||||
<h3 class="username">GTSuperstar</h3>
|
||||
<p class="uid flexacenter">
|
||||
UID: 3276161
|
||||
<img class="icon" src="./img/copy-icon.png" />
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<div class="btn-area">
|
||||
<div class="item msg flexcenter">发私信</div>
|
||||
<div class="item flexcenter">用户管理</div>
|
||||
<div class="item flexcenter">内容管理</div>
|
||||
<div class="medal-area">
|
||||
<p class="title">勋章 6</p>
|
||||
<div class="list flexflex">
|
||||
<img v-for="item in 5" src="https://o.x-php.com/Zvt57TuJSUvkyhw-xG3WvCGHpt5oNTyM1Nwws484T7rGFDO1bKwnG2kLV_eSo5JUnMYHVj-SsGLytRp94iZe_tpcnj-4Ce4gYuGWnGU_hCATZ7u7I_X1F8YjCfX63o6lsSPQ7Y2N90MUNDQyOQ~~" alt="勋章1" class="item" />
|
||||
</div>
|
||||
</div>
|
||||
<div class="matter-content flex1">
|
||||
<div class="message-box">
|
||||
<!-- 头部区域 -->
|
||||
<div class="header">
|
||||
<img src="https://nas.gter.net:9008/avatar/97K4EWIMLrsbGTWXslC2WV5VHK6OikN42jDKLNjtax7HL4g2eMCJSdU9oWFhY2E~/middle" alt="用户头像" class="avatar" />
|
||||
<span class="username">GTSuperstar</span>
|
||||
<!-- <img class="icon"> -->
|
||||
</div>
|
||||
|
||||
<!-- 信息列表区域 -->
|
||||
<div class="info-list flexflex">
|
||||
<div class="item flexacenter">
|
||||
<span class="label">注册时间</span>
|
||||
<span class="value">2019-7-26 16:38</span>
|
||||
</div>
|
||||
<div class="item flexacenter">
|
||||
<span class="label">最后登录</span>
|
||||
<span class="value">2025-10-16 10:32</span>
|
||||
</div>
|
||||
<div class="item flexacenter">
|
||||
<span class="label">在线时长</span>
|
||||
<span class="value">1304 小时</span>
|
||||
</div>
|
||||
<div class="item flexacenter">
|
||||
<span class="label">上次访问 IP</span>
|
||||
<span class="value">116.237.182.149 -- 上海长宁区</span>
|
||||
</div>
|
||||
<div class="item flexacenter">
|
||||
<span class="label">Email</span>
|
||||
<span class="value">skysuper007@qq.com</span>
|
||||
<span class="status flexacenter">未认证</span>
|
||||
</div>
|
||||
<div class="item flexacenter">
|
||||
<span class="label">手机号</span>
|
||||
<span class="value">15934271290</span>
|
||||
<span class="status blue flexacenter">已认证</span>
|
||||
</div>
|
||||
<div class="item flexacenter">
|
||||
<span class="label">累计签到</span>
|
||||
<span class="value">1341 天</span>
|
||||
</div>
|
||||
<div class="item flexacenter">
|
||||
<span class="label">本月签到</span>
|
||||
<span class="value">6 天</span>
|
||||
</div>
|
||||
<div class="item flexacenter">
|
||||
<span class="label">寄托币</span>
|
||||
<span class="value">13813</span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="btn-area">
|
||||
<div class="item msg flexcenter">发私信</div>
|
||||
<div class="item flexcenter">用户管理</div>
|
||||
<div class="item flexcenter">内容管理</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="matter-content flex1">
|
||||
<div class="message-box" v-if="false">
|
||||
<!-- 头部区域 -->
|
||||
<div class="header">
|
||||
<img src="https://nas.gter.net:9008/avatar/97K4EWIMLrsbGTWXslC2WV5VHK6OikN42jDKLNjtax7HL4g2eMCJSdU9oWFhY2E~/middle" alt="用户头像" class="avatar" />
|
||||
<span class="username">GTSuperstar</span>
|
||||
<!-- <img class="icon"> -->
|
||||
</div>
|
||||
|
||||
<!-- 统计标签区域 -->
|
||||
<div class="stats">
|
||||
<span class="stat-item">Offer × 6</span>
|
||||
<span class="stat-item">总结 × 1</span>
|
||||
<span class="stat-item">面经 × 3</span>
|
||||
<span class="stat-item">回答 × 1</span>
|
||||
<span class="stat-item">其他 × 4</span>
|
||||
<!-- 信息列表区域 -->
|
||||
<div class="info-list flexflex">
|
||||
<div class="item flexacenter">
|
||||
<span class="label">注册时间</span>
|
||||
<span class="value">2019-7-26 16:38</span>
|
||||
</div>
|
||||
<div class="item flexacenter">
|
||||
<span class="label">最后登录</span>
|
||||
<span class="value">2025-10-16 10:32</span>
|
||||
</div>
|
||||
<div class="item flexacenter">
|
||||
<span class="label">在线时长</span>
|
||||
<span class="value">1304 小时</span>
|
||||
</div>
|
||||
<div class="item flexacenter">
|
||||
<span class="label">上次访问 IP</span>
|
||||
<span class="value">116.237.182.149 -- 上海长宁区</span>
|
||||
</div>
|
||||
<div class="item flexacenter">
|
||||
<span class="label">Email</span>
|
||||
<span class="value">skysuper007@qq.com</span>
|
||||
<span class="status flexacenter">未认证</span>
|
||||
</div>
|
||||
<div class="item flexacenter">
|
||||
<span class="label">手机号</span>
|
||||
<span class="value">15934271290</span>
|
||||
<span class="status blue flexacenter">已认证</span>
|
||||
</div>
|
||||
<div class="item flexacenter">
|
||||
<span class="label">累计签到</span>
|
||||
<span class="value">1341 天</span>
|
||||
</div>
|
||||
<div class="item flexacenter">
|
||||
<span class="label">本月签到</span>
|
||||
<span class="value">6 天</span>
|
||||
</div>
|
||||
<div class="item flexacenter">
|
||||
<span class="label">寄托币</span>
|
||||
<span class="value">13813</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Offer标签区域 -->
|
||||
<div class="offer-tags">
|
||||
<span class="tag">Offer 阿尔托大学</span>
|
||||
<span class="tag">Offer 坦佩雷大学</span>
|
||||
<span class="tag">Offer 悉尼大学</span>
|
||||
<span class="tag">Offer 巴黎理工学院</span>
|
||||
<span class="tag">Offer 悉尼大学</span>
|
||||
<span class="tag">Offer 巴黎理工学院</span>
|
||||
<span class="tag">Offer 阿尔托大学</span>
|
||||
<!-- 统计标签区域 -->
|
||||
<div class="stats flexacenter">
|
||||
<template v-for="item in 5" :key="item">
|
||||
<span class="item flexacenter">
|
||||
<div class="text">Offer ×</div>
|
||||
<div class="num">6</div>
|
||||
</span>
|
||||
<div class="line">|</div>
|
||||
</template>
|
||||
</div>
|
||||
<!-- Offer标签区域 -->
|
||||
<div class="tags flexflex">
|
||||
<div class="item flexacenter" v-for="item in 15" :key="item">
|
||||
<!-- <img class="icon" src="./img/mj-icon.png" mode="heightFix" /> -->
|
||||
<img class="icon" src="./img/offer-icon.png" mode="heightFix" />
|
||||
阿尔托大学
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="list-area">
|
||||
<div class="classify flexacenter">
|
||||
<div class="item " :class="{'pitch': item === 1}" v-for="item in 5" :key="item">全部</div>
|
||||
</div>
|
||||
|
||||
<div class="issue-data flexacenter">
|
||||
共 <div class="num">57</div> 个创作，获得 <div class="num">1093</div> 个赞
|
||||
</div>
|
||||
|
||||
<div class="list-box">
|
||||
<template v-for="(item,index) in list" :key="index"> {{ item.type }}
|
||||
<item-offer v-if=" item.type == 'offer'" :item="item"></item-offer>
|
||||
<item-summary v-else-if="item.type == 'offer_summary'" :item="item"></item-summary>
|
||||
<item-vote v-else-if="item.type == 'vote'" :itemdata="item"></item-vote>
|
||||
<item-forum v-else :item="item"></item-forum>
|
||||
</template>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<script type="module" src="./js/homepage-other.js"></script>
|
||||
</body>
|
||||
</html>
|
||||
</div>
|
||||
<script type="module" src="./js/homepage-other.js"></script>
|
||||
</body>
|
||||
|
||||
</html>
|
||||
6
img/arrows-circle-dark-blue.svg
Normal file
6
img/arrows-circle-dark-blue.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" xmlns="http://www.w3.org/2000/svg">
|
||||
<g transform="matrix(1 0 0 1 -2688 -891 )">
|
||||
<path d="M 7 13.3958333333333 C 7.18055555555556 13.3958333333333 7.33680555555556 13.3298611111111 7.46875 13.1979166666667 L 12.1979166666667 8.46875 C 12.3298611111111 8.33680555555555 12.3958333333333 8.18055555555555 12.3958333333333 8 C 12.3958333333333 7.81944444444444 12.3298611111111 7.66319444444444 12.1979166666667 7.53125 L 7.46875 2.80208333333333 C 7.33680555555556 2.67013888888889 7.18055555555556 2.60416666666667 7 2.60416666666667 C 6.81944444444445 2.60416666666667 6.66319444444445 2.67013888888889 6.53125 2.80208333333333 L 5.46875 3.86458333333333 C 5.33680555555556 3.99652777777778 5.27083333333333 4.15277777777778 5.27083333333333 4.33333333333333 C 5.27083333333333 4.51388888888889 5.33680555555556 4.67013888888889 5.46875 4.80208333333333 L 8.66666666666667 8 L 5.46875 11.1979166666667 C 5.33680555555556 11.3298611111111 5.27083333333333 11.4861111111111 5.27083333333333 11.6666666666667 C 5.27083333333333 11.8472222222222 5.33680555555556 12.0034722222222 5.46875 12.1354166666667 L 6.53125 13.1979166666667 C 6.66319444444445 13.3298611111111 6.81944444444445 13.3958333333333 7 13.3958333333333 Z M 14.9270833333333 3.984375 C 15.6423611111111 5.21006944444444 16 6.54861111111111 16 8 C 16 9.45138888888889 15.6423611111111 10.7899305555556 14.9270833333333 12.015625 C 14.2118055555556 13.2413194444444 13.2413194444444 14.2118055555556 12.015625 14.9270833333333 C 10.7899305555556 15.6423611111111 9.45138888888889 16 8 16 C 6.54861111111111 16 5.21006944444444 15.6423611111111 3.984375 14.9270833333333 C 2.75868055555556 14.2118055555556 1.78819444444444 13.2413194444444 1.07291666666667 12.015625 C 0.357638888888889 10.7899305555556 0 9.45138888888889 0 8 C 0 6.54861111111111 0.357638888888889 5.21006944444444 1.07291666666667 3.984375 C 1.78819444444444 2.75868055555556 2.75868055555556 1.78819444444444 3.984375 1.07291666666667 C 5.21006944444444 0.357638888888888 6.54861111111111 0 8 0 C 9.45138888888889 0 10.7899305555556 0.357638888888888 12.015625 1.07291666666667 C 13.2413194444444 1.78819444444444 14.2118055555556 2.75868055555556 14.9270833333333 3.984375 Z " fill-rule="nonzero" fill="#026277" stroke="none" transform="matrix(1 0 0 1 2688 891 )" />
|
||||
</g>
|
||||
</svg>
|
||||
BIN
img/forum-title.png
Normal file
BIN
img/forum-title.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 5.6 KiB |
BIN
img/offer-icon.png
Normal file
BIN
img/offer-icon.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 6.0 KiB |
6
img/vote-tick.svg
Normal file
6
img/vote-tick.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="14px" height="14px" xmlns="http://www.w3.org/2000/svg">
|
||||
<g transform="matrix(1 0 0 1 -100 -976 )">
|
||||
<path d="M 11.5390625 5.93359375 C 11.6484375 5.82421875 11.703125 5.6875 11.703125 5.5234375 C 11.703125 5.35329861111111 11.6484375 5.21354166666667 11.5390625 5.10416666666667 L 10.7096354166667 4.28385416666667 C 10.5941840277778 4.16840277777778 10.4574652777778 4.11067708333333 10.2994791666667 4.11067708333333 C 10.1414930555556 4.11067708333333 10.0047743055556 4.16840277777778 9.88932291666667 4.28385416666667 L 6.17057291666667 7.99348958333333 L 4.11067708333333 5.93359375 C 3.99522569444444 5.81814236111111 3.85850694444444 5.76041666666667 3.70052083333333 5.76041666666667 C 3.54253472222222 5.76041666666667 3.40581597222222 5.81814236111111 3.29036458333333 5.93359375 L 2.4609375 6.75390625 C 2.3515625 6.86328125 2.296875 7.00303819444444 2.296875 7.17317708333333 C 2.296875 7.33723958333333 2.3515625 7.47395833333333 2.4609375 7.58333333333333 L 5.76041666666667 10.8828125 C 5.87586805555556 10.9982638888889 6.01258680555556 11.0559895833333 6.17057291666667 11.0559895833333 C 6.33463541666667 11.0559895833333 6.47439236111111 10.9982638888889 6.58984375 10.8828125 L 11.5390625 5.93359375 Z M 13.0611979166667 3.486328125 C 13.6870659722222 4.55881076388889 14 5.73003472222222 14 7 C 14 8.26996527777778 13.6870659722222 9.44118923611111 13.0611979166667 10.513671875 C 12.4353298611111 11.5861545138889 11.5861545138889 12.4353298611111 10.513671875 13.0611979166667 C 9.44118923611111 13.6870659722222 8.26996527777778 14 7 14 C 5.73003472222222 14 4.55881076388889 13.6870659722222 3.486328125 13.0611979166667 C 2.41384548611111 12.4353298611111 1.56467013888889 11.5861545138889 0.938802083333333 10.513671875 C 0.312934027777778 9.44118923611111 0 8.26996527777778 0 7 C 0 5.73003472222222 0.312934027777778 4.55881076388889 0.938802083333333 3.486328125 C 1.56467013888889 2.41384548611111 2.41384548611111 1.56467013888889 3.486328125 0.938802083333333 C 4.55881076388889 0.312934027777777 5.73003472222222 0 7 0 C 8.26996527777778 0 9.44118923611111 0.312934027777777 10.513671875 0.938802083333333 C 11.5861545138889 1.56467013888889 12.4353298611111 2.41384548611111 13.0611979166667 3.486328125 Z " fill-rule="nonzero" fill="#04b0d5" stroke="none" transform="matrix(1 0 0 1 100 976 )" />
|
||||
</g>
|
||||
</svg>
|
||||
@@ -4,6 +4,7 @@
|
||||
<meta charset="UTF-8" />
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||||
<title>Document</title>
|
||||
<link rel="stylesheet" href="./css/public.css" />
|
||||
<link rel="stylesheet" href="./css/index.css" />
|
||||
<script src="./js/vue.global.js"></script>
|
||||
</head>
|
||||
|
||||
1393
js/homepage-other.js
1393
js/homepage-other.js
File diff suppressed because it is too large
Load Diff
71
js/save.js
Normal file
71
js/save.js
Normal file
@@ -0,0 +1,71 @@
|
||||
const fs = require("fs");
|
||||
const path = require("path");
|
||||
|
||||
// 配置需要监听的文件列表：键为 txt 文件路径，值为对应的 js 文件路径
|
||||
const watchList = {
|
||||
// 监听 item-bottom.txt，同步到 item-bottom.js
|
||||
"../component/item-bottom/item-bottom.txt": "../component/item-bottom/item-bottom.js",
|
||||
// 监听 item-forum.txt，同步到 item-forum.js
|
||||
"../component/item-forum/item-forum.txt": "../component/item-forum/item-forum.js",
|
||||
// 监听 item-head.txt，同步到 item-head.js
|
||||
"../component/item-head/item-head.txt": "../component/item-head/item-head.js",
|
||||
// 监听 item-offer.txt，同步到 item-offer.js
|
||||
"../component/item-offer/item-offer.txt": "../component/item-offer/item-offer.js",
|
||||
// 监听 item-summary.txt，同步到 item-summary.js
|
||||
"../component/item-summary/item-summary.txt": "../component/item-summary/item-summary.js",
|
||||
// 监听 item-vote.txt，同步到 item-vote.js
|
||||
"../component/item-vote/item-vote.txt": "../component/item-vote/item-vote.js",
|
||||
// 可添加更多文件（格式：'txt路径': 'js路径'）
|
||||
// './component/other/other.txt': './component/other/other.js',
|
||||
};
|
||||
|
||||
// 检查所有文件是否存在
|
||||
Object.entries(watchList).forEach(([txtPath, jsPath]) => {
|
||||
const resolvedTxt = path.resolve(__dirname, txtPath);
|
||||
const resolvedJs = path.resolve(__dirname, jsPath);
|
||||
if (!fs.existsSync(resolvedTxt)) {
|
||||
console.error(`错误：文件不存在 - ${resolvedTxt}`);
|
||||
process.exit(1);
|
||||
}
|
||||
if (!fs.existsSync(resolvedJs)) {
|
||||
console.error(`错误：文件不存在 - ${resolvedJs}`);
|
||||
process.exit(1);
|
||||
}
|
||||
});
|
||||
|
||||
// 同步逻辑：将 txtContent 替换到对应 js 的 template 中
|
||||
function syncContent(txtPath, jsPath) {
|
||||
try {
|
||||
const txtContent = fs.readFileSync(txtPath, "utf8")?.replace(/[\n\r]/g, '');
|
||||
let jsContent = fs.readFileSync(jsPath, "utf8");
|
||||
|
||||
// 匹配 template: `...` 结构，替换反引号内的内容
|
||||
const templateRegex = /(template:\s*)(`[^`]*`)/;
|
||||
if (templateRegex.test(jsContent)) {
|
||||
jsContent = jsContent.replace(templateRegex, `$1\`${txtContent}\``);
|
||||
fs.writeFileSync(jsPath, jsContent, "utf8");
|
||||
console.log(`✅ 同步成功：${path.basename(txtPath)} → ${path.basename(jsPath)}`);
|
||||
} else {
|
||||
console.error(`❌ 格式错误：${path.basename(jsPath)} 中未找到 template: \`...\``);
|
||||
}
|
||||
} catch (err) {
|
||||
console.error(`❌ 同步失败：${err.message}`);
|
||||
}
|
||||
}
|
||||
|
||||
// 为每个文件添加监听
|
||||
Object.entries(watchList).forEach(([txtPath, jsPath]) => {
|
||||
const resolvedTxt = path.resolve(__dirname, txtPath);
|
||||
const resolvedJs = path.resolve(__dirname, jsPath);
|
||||
|
||||
fs.watch(resolvedTxt, (eventType) => {
|
||||
if (eventType === "change") {
|
||||
console.log(`\n检测到 ${path.basename(resolvedTxt)} 保存，开始同步...`);
|
||||
syncContent(resolvedTxt, resolvedJs);
|
||||
}
|
||||
});
|
||||
|
||||
console.log(`开始监听：${resolvedTxt}`);
|
||||
});
|
||||
|
||||
console.log("\n服务启动成功，所有文件修改后将自动同步 🚀");
|
||||
@@ -1,5 +1,5 @@
|
||||
const { createApp, ref, onMounted, nextTick, onUnmounted, computed, watch } = Vue;
|
||||
import { MyComponent } from "../component/item-forum/item-forum.js";
|
||||
import { itemForum } from "../component/item-forum/item-forum.js";
|
||||
|
||||
const appSectionIndex = createApp({
|
||||
setup() {
|
||||
@@ -8,5 +8,5 @@ const appSectionIndex = createApp({
|
||||
return { signInAlreadyState };
|
||||
},
|
||||
});
|
||||
appSectionIndex.component("MyComponent", MyComponent);
|
||||
appSectionIndex.component("item-forum", itemForum);
|
||||
appSectionIndex.mount("#sectionIndex");
|
||||
|
||||
@@ -5,6 +5,7 @@
|
||||
<meta charset="UTF-8" />
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||||
<title>Document</title>
|
||||
<link rel="stylesheet" href="./css/public.css" />
|
||||
<link rel="stylesheet" href="./css/sectionIndex.css" />
|
||||
<script src="./js/vue.global.js"></script>
|
||||
</head>
|
||||
|
||||
Reference in New Issue
Block a user