itbaima-study/itbaima-forum-jwt
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

完善样式

Browse Source
This commit is contained in:
柏码の讲师 2023-10-12 00:04:16 +08:00
parent e2c9e21fb4
commit dba9de2ab7
1 changed files with 20 additions and 2 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

20
my-project-frontend/src/views/forum/TopicList.vue
View File

@ -1,6 +1,6 @@
<script setup> <script setup>
import LightCard from "@/components/LightCard.vue"; import LightCard from "@/components/LightCard.vue";
import {Calendar, CollectionTag, EditPen, Link} from "@element-plus/icons-vue"; import {Calendar, Clock, CollectionTag, EditPen, Link} from "@element-plus/icons-vue";
import {computed, reactive, ref} from "vue" import {computed, reactive, ref} from "vue"
import Weather from "@/components/Weather.vue"; import Weather from "@/components/Weather.vue";
import {get} from "@/net"; import {get} from "@/net";
@ -65,7 +65,19 @@ navigator.geolocation.getCurrentPosition(position => {
</div> </div>
</light-card> </light-card>
<light-card v-for="item in list" class="topic-card"> <light-card v-for="item in list" class="topic-card">
<div style="display: flex">
<div> <div>
<el-avatar :size="30"/>
</div>
<div style="margin-left: 7px;transform: translateY(-2px)">
<div style="font-size: 13px;font-weight: bold">我是名字</div>
<div style="font-size: 12px;color: grey">
<el-icon><Clock/></el-icon>
<div style="margin-left: 2px;display: inline-block;transform: translateY(-2px)">{{new Date(item.time).toLocaleString()}}</div>
</div>
</div>
</div>
<div style="margin-top: 5px">
<div class="topic-type" <div class="topic-type"
:style="{color: store.findTypeById(item.type)?.color+'EE', :style="{color: store.findTypeById(item.type)?.color+'EE',
'border-color': store.findTypeById(item.type)?.color+'EE', 'border-color': store.findTypeById(item.type)?.color+'EE',
@ -149,6 +161,12 @@ navigator.geolocation.getCurrentPosition(position => {
cursor: pointer; cursor: pointer;
} }
.topic-image{
width: 100%;
height: 100%;
border-radius: 5px;
}
.topic-type { .topic-type {
display: inline-block; display: inline-block;
border: solid 1px grey; border: solid 1px grey;