no message
This commit is contained in:
A1300399510
parent
8fa746564b
commit
8f6393c912
BIN
.output.rar
BIN
.output.rar
Binary file not shown.
61
app.vue
61
app.vue
@ -71,7 +71,7 @@
|
||||
|
||||
<div v-else class="total grid-item" @click="cut">共 {{ total }} 条问答</div>
|
||||
</div>
|
||||
<div class="list" id="list" :style="listStyle()">
|
||||
<div class="list" id="list" :style="[listStyle(), {height: listHeight + 'px'}]">
|
||||
<a class="item grid-item flexflex" v-for="(item, index) in list" :key="index" :style="itemStyle(index, item['content'])" :class="{pitch: index === pitchIndex, upLevel: index === pitchIndex - 1}" :href="setItemUrl(item['uniqid'])" @click.stop.prevent="getDetails(item['uniqid'], index)">
|
||||
<img class="dot" src="./img/dot.svg" />
|
||||
<div class="content" :style="{width: type == 'list' ? '531px' : '430px'}">
|
||||
@ -81,14 +81,13 @@
|
||||
</div>
|
||||
<div class="answer ellipsis" v-if="item['content']" v-html="item['content']"></div>
|
||||
<div class="bottom flexacenter">
|
||||
<div class="typename" v-if="item['typename']">{{ item["typename"] }}</div>
|
||||
<div class="typename flexcenter" v-if="item['typename']">{{ item["typename"] }}</div>
|
||||
<div v-else></div>
|
||||
<div class="flexacenter">
|
||||
<div class="quantity">{{ item["answers"] == 0 ? "暂无回答" : "共" + item["answers"] + "个回答" }}</div>
|
||||
<template v-if="type == 'list'">
|
||||
<div class="longString"></div>
|
||||
<div class="answer-btn" @click.stop.prevent="openListIAnswer(index)">我来回答</div>
|
||||
<!-- <div class="answer-btn" @click.stop="getDetails(item['uniqid'], index, true)">我来回答</div> -->
|
||||
</template>
|
||||
</div>
|
||||
</div>
|
||||
@ -1861,11 +1860,11 @@ export default {
|
||||
if (newtype == "list") {
|
||||
width = "1200px"
|
||||
margin = "0 auto"
|
||||
height = Math.ceil(list.value.length / 2) * 128 + "px"
|
||||
// height = Math.ceil(list.value.length / 2) * 128 + "px"
|
||||
} else {
|
||||
width = "calc((100vw - 1200px) / 2 + 512px)"
|
||||
margin = "initial"
|
||||
height = list.value.length * 128 + "px"
|
||||
// height = list.value.length * 128 + "px"
|
||||
}
|
||||
return {
|
||||
width,
|
||||
@ -1874,15 +1873,48 @@ export default {
|
||||
}
|
||||
}
|
||||
|
||||
const itemStyle = (index, content) => {
|
||||
let listHeight = ref(0)
|
||||
let itemHeightLeft = 0
|
||||
let itemHeightRight = 0
|
||||
|
||||
const itemStyle = computed((index, content) => {
|
||||
if (index == 0) {
|
||||
itemHeightLeft = 0
|
||||
itemHeightRight = 0
|
||||
}
|
||||
return
|
||||
const newtype = type.value
|
||||
// let itemHeight = content == "" ? 106 : 128
|
||||
// let itemHeight = content == "" ? 107 : 128
|
||||
let obj = {}
|
||||
if (newtype == "list") {
|
||||
let top = Math.floor(index / 2) * 128 + "px"
|
||||
obj["top"] = top
|
||||
if (index % 2 == 0) obj["left"] = 0
|
||||
else obj["left"] = 649 + "px"
|
||||
// let top = Math.floor(index / 2) * 128 + "px"
|
||||
// obj["top"] = Math.floor(index / 2) * 128 + "px"
|
||||
// obj["top"] = Math.floor(index / 2) * 128 + "px"
|
||||
|
||||
if (itemHeightLeft <= itemHeightRight) {
|
||||
obj["top"] = itemHeightLeft + "px"
|
||||
|
||||
itemHeightLeft += content == "" ? 107 : 136
|
||||
|
||||
obj["left"] = 0
|
||||
} else {
|
||||
obj["top"] = itemHeightRight + "px"
|
||||
itemHeightRight += content == "" ? 107 : 136
|
||||
obj["left"] = 649 + "px"
|
||||
}
|
||||
|
||||
// if (index % 2 == 0) obj["left"] = 0
|
||||
// else obj["left"] = 649 + "px"
|
||||
|
||||
// if (index % 2 == 0) {
|
||||
// obj["top"] = itemHeightLeft + "px"
|
||||
|
||||
// itemHeightLeft += content == "" ? 107 : 136
|
||||
// } else {
|
||||
// obj["top"] = itemHeightRight + "px"
|
||||
|
||||
// itemHeightRight += content == "" ? 107 : 136
|
||||
// }
|
||||
} else {
|
||||
obj["top"] = index * 128 + "px"
|
||||
obj["left"] = 0
|
||||
@ -1890,9 +1922,13 @@ export default {
|
||||
// obj['backgroundColor'] = '#fbfbfb'
|
||||
obj["paddingLeft"] = "calc((100vw - 1200px) / 2)"
|
||||
}
|
||||
console.log(index + 1, list.value.length)
|
||||
if (index + 1 == list.value.length) {
|
||||
listHeight.value = Math.max(itemHeightLeft, itemHeightRight)
|
||||
}
|
||||
|
||||
return obj
|
||||
}
|
||||
})
|
||||
|
||||
const bottomTpsStyle = (index, content) => {
|
||||
const newtype = type.value
|
||||
@ -2428,6 +2464,7 @@ export default {
|
||||
}
|
||||
|
||||
return {
|
||||
listHeight,
|
||||
bottomTpsStyle,
|
||||
TAHomePage,
|
||||
sendMessage,
|
||||
|
||||
10
index.css
10
index.css
@ -334,7 +334,6 @@ a {
|
||||
transition-property: top, left, background;
|
||||
transition-duration: 0.5s;
|
||||
border-right: 1px solid #ebebeb;
|
||||
height: 128px;
|
||||
background-color: #fff;
|
||||
}
|
||||
#answer-app .main .list-box .list .item:first-of-type {
|
||||
@ -382,10 +381,7 @@ a {
|
||||
}
|
||||
#answer-app .main .list-box .list .item .content {
|
||||
border-bottom: 1px dotted #ebebeb;
|
||||
padding-bottom: 20px;
|
||||
}
|
||||
#answer-app .main .list-box .list .item .content .issue-title {
|
||||
margin-bottom: 8px;
|
||||
padding-bottom: 24px;
|
||||
}
|
||||
#answer-app .main .list-box .list .item .content .issue-title .hot-icon {
|
||||
width: 16px;
|
||||
@ -406,13 +402,14 @@ a {
|
||||
height: 22px;
|
||||
line-height: 22px;
|
||||
font-size: 13px;
|
||||
margin-bottom: 18px;
|
||||
text-decoration: none;
|
||||
margin-top: 8px;
|
||||
}
|
||||
#answer-app .main .list-box .list .item .content .answer em {
|
||||
color: #ff0000;
|
||||
}
|
||||
#answer-app .main .list-box .list .item .content .bottom {
|
||||
margin-top: 18px;
|
||||
font-size: 12px;
|
||||
justify-content: space-between;
|
||||
}
|
||||
@ -423,6 +420,7 @@ a {
|
||||
border: 1px solid #ebebeb;
|
||||
border-radius: 5px;
|
||||
padding: 0 3px;
|
||||
height: 21px;
|
||||
}
|
||||
#answer-app .main .list-box .list .item .content .bottom .quantity {
|
||||
color: #aaa;
|
||||
|
||||
10
index.less
10
index.less
@ -418,7 +418,7 @@ a {
|
||||
transition-duration: 0.5s;
|
||||
border-right: 1px solid #ebebeb;
|
||||
|
||||
height: 128px;
|
||||
// height: 128px;
|
||||
background-color: #fff;
|
||||
|
||||
&:first-of-type {
|
||||
@ -490,7 +490,7 @@ a {
|
||||
.content {
|
||||
// width: 531px;
|
||||
border-bottom: 1px dotted #ebebeb;
|
||||
padding-bottom: 20px;
|
||||
padding-bottom: 24px;
|
||||
|
||||
// transition: all 0.3s;
|
||||
|
||||
@ -502,7 +502,6 @@ a {
|
||||
margin-right: 8px;
|
||||
}
|
||||
|
||||
margin-bottom: 8px;
|
||||
|
||||
.issue {
|
||||
font-weight: 650;
|
||||
@ -521,8 +520,8 @@ a {
|
||||
height: 22px;
|
||||
line-height: 22px;
|
||||
font-size: 13px;
|
||||
margin-bottom: 18px;
|
||||
text-decoration: none;
|
||||
margin-top: 8px;
|
||||
|
||||
em {
|
||||
color: #ff0000;
|
||||
@ -530,6 +529,8 @@ a {
|
||||
}
|
||||
|
||||
.bottom {
|
||||
margin-top: 18px;
|
||||
|
||||
font-size: 12px;
|
||||
// justify-content: flex-end;
|
||||
justify-content: space-between;
|
||||
@ -541,6 +542,7 @@ a {
|
||||
border: 1px solid rgba(235, 235, 235, 1);
|
||||
border-radius: 5px;
|
||||
padding: 0 3px;
|
||||
height: 21px;
|
||||
}
|
||||
|
||||
.quantity {
|
||||
|
||||
@ -1,4 +1,3 @@
|
||||
import {Link} from "./.nuxt/components.d"
|
||||
// https://nuxt.com/docs/api/configuration/nuxt-config
|
||||
export default defineNuxtConfig({
|
||||
ssr: true,
|
||||
|
||||
@ -1,4 +1,3 @@
|
||||
{
|
||||
// https://nuxt.com/docs/guide/concepts/typescript
|
||||
"extends": "./.nuxt/tsconfig.json"
|
||||
}
|
||||
}
|
||||
Loading…
Reference in New Issue
Block a user