refactor(components): 重构多个组件并优化公共样式
重构了item-head、item-bottom、item-offer、item-summary和item-tenement组件，优化了props传递和数据处理逻辑 将公共头部和导航样式提取到public.css中，避免重复代码 修复了item-tenement组件中图片显示和数据处理的问题 更新了item-bottom组件的点赞和收藏逻辑，增加错误提示 优化了item-head组件的用户信息显示逻辑 调整了多个组件的样式细节，包括间距、图标大小等
This commit is contained in:
DESKTOP-RQ919RC\Pc
@@ -4,80 +4,61 @@
|
||||
<head>
|
||||
<meta charset="UTF-8" />
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||||
<title>Document</title>
|
||||
<title>个人主页</title>
|
||||
<link rel="stylesheet" href="./css/public.css" />
|
||||
<link rel="stylesheet" href="./css/homepage-other.css" />
|
||||
<script src="./js/vue.global.js"></script>
|
||||
<style>
|
||||
[v-cloak] {
|
||||
display: none;
|
||||
}
|
||||
</style>
|
||||
</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>
|
||||
<div class="container" id="homepage-other" v-cloak>
|
||||
|
||||
<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>
|
||||
<head-top></head-top>
|
||||
|
||||
<div class="head-navigation flexacenter">
|
||||
<img class="icon" src="./img/index-icon.png" />
|
||||
<div class="text">首页</div>
|
||||
<a class="text" href="./" target="_blank">首页</a>
|
||||
<img class="arrows" src="./img/arrows-gray.svg" />
|
||||
<div class="text">GTSuperstar 的个人主页</div>
|
||||
<div class="text">{{ info.nickname }} 的个人主页</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="用户头像" />
|
||||
<img class="avatar" :src="info.avatar" alt="用户头像" />
|
||||
|
||||
<h3 class="username flexcenter">GTSuperstar</h3>
|
||||
<h3 class="username flexcenter">{{ info.nickname }}</h3>
|
||||
<p class="uid flexcenter">
|
||||
UID: 3276161
|
||||
UID: {{ info.uin }}
|
||||
<img class="icon" src="./img/copy-icon.png" />
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<div class="medal-area">
|
||||
<p class="title">勋章 6</p>
|
||||
<div class="medal-area" v-if="medallist.length != 0">
|
||||
<p class="title">勋章 {{ medallist.length }}</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" />
|
||||
<img v-for="item in medallist" :key="item.medalid" :src="item.image" :alt="item.description" class="item" />
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="btn-area">
|
||||
<div class="item msg flexcenter">发私信</div>
|
||||
<div class="item msg flexcenter" @click="sendMessage(info.uin)">发私信</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="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 class="header flexacenter">
|
||||
<img :src="info.avatar" alt="用户头像" class="avatar" />
|
||||
<span class="username">{{ info.nickname }}</span>
|
||||
<img v-if="info?.group?.image" class="icon" :src="info?.group?.image">
|
||||
</div>
|
||||
|
||||
<!-- 信息列表区域 -->
|
||||
@@ -123,55 +104,57 @@
|
||||
</div>
|
||||
|
||||
<!-- 统计标签区域 -->
|
||||
<div class="stats flexacenter">
|
||||
<template v-for="item in 5" :key="item">
|
||||
<div class="stats flexacenter" v-if="creationType.length != 0">
|
||||
<template v-for="(item, index) in creationType" :key="index">
|
||||
<span class="item flexacenter">
|
||||
<div class="text">Offer ×</div>
|
||||
<div class="num">6</div>
|
||||
<div class="text">{{ item.text }} ×</div>
|
||||
<div class="num">{{ item.number }}</div>
|
||||
</span>
|
||||
<div class="line">|</div>
|
||||
<div class="line" v-if="index != creationType.length - 1">|</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 class="tags flexflex" v-if="schoolTags.length != 0">
|
||||
<div class="item flexacenter" v-for="item in schoolTags" :key="item">
|
||||
<img v-if="item.type == 'offer'" class="icon" src="./img/offer-icon.png" mode="heightFix" />
|
||||
<img v-else class="icon" src="./img/mj-icon.png" mode="heightFix" />
|
||||
{{ item.school }}
|
||||
</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 class="item " :class="{'pitch': item.type === classify}" v-for="item in classifyList" :key="item.type" @click="classifyChange(item.type)">{{ item.text }}</div>
|
||||
</div>
|
||||
|
||||
<div class="issue-data flexacenter">
|
||||
共 <div class="num">57</div> 个创作，获得 <div class="num">1093</div> 个赞
|
||||
共 <div class="num">{{ count }}</div> 个创作，获得 <div class="num">1093</div> 个赞
|
||||
</div>
|
||||
|
||||
<div class="list-box" v-if="true">
|
||||
<div class="list-box" v-if="list.length != 0">
|
||||
<template v-for="(item,index) in list" :key="index">
|
||||
<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-offer v-if=" item.type == 'offer'" :itemdata="item"></item-offer>
|
||||
<item-summary v-else-if="item.type == 'offer_summary'" :itemdata="item"></item-summary>
|
||||
<item-vote v-else-if="item.type == 'vote'" :itemdata="item"></item-vote>
|
||||
<item-mj v-else-if="item.type == 'interviewexperience'" :itemdata="item"></item-mj>
|
||||
<item-tenement v-else-if="item.type == 'tenement'" :itemdata="item"></item-tenement>
|
||||
<item-forum v-else :item="item"></item-forum>
|
||||
<item-forum v-else :itemdata="item"></item-forum>
|
||||
</template>
|
||||
</div>
|
||||
|
||||
<div class="empty flexcenter">
|
||||
<div v-if="list.length == 0" class="empty flexcenter">
|
||||
<img class="empty-icon" src="./img/empty-icon.png" />
|
||||
<div class="empty-text">- 暂无内容 -</div>
|
||||
</div>
|
||||
|
||||
<div class="load-more flexcenter">加载更多…</div>
|
||||
<div v-if="page != 0" class="load-more flexcenter">加载更多…</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<script src="./js/axios.min.js"></script>
|
||||
<script src="./js/public.js"></script>
|
||||
<script type="module" src="./js/homepage-other.js"></script>
|
||||
</body>
|
||||
|
||||
|
||||
Reference in New Issue
Block a user