diff --git a/app copy.vue b/app copy.vue new file mode 100644 index 0000000..59be258 --- /dev/null +++ b/app copy.vue @@ -0,0 +1,2597 @@ + + + + + + diff --git a/app.vue b/app.vue index 2337171..59be258 100644 --- a/app.vue +++ b/app.vue @@ -71,7 +71,7 @@
共 {{ total }} 条问答
-
+
@@ -81,7 +81,7 @@
-
{{ item["typename"] }}
+
{{ item["typename"] }}
{{ item["answers"] == 0 ? "暂无回答" : "共" + item["answers"] + "个回答" }}
@@ -1861,11 +1861,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 +1874,47 @@ 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 + } 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, diff --git a/components/Header.vue b/components/Header.vue new file mode 100644 index 0000000..1b5963f --- /dev/null +++ b/components/Header.vue @@ -0,0 +1,49 @@ + diff --git a/index.css b/index.css index 5b44fab..a43d8e0 100644 --- a/index.css +++ b/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; diff --git a/index.less b/index.less index d63a8f6..32e6950 100644 --- a/index.less +++ b/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 { diff --git a/pages/details/[id].vue b/pages/details/[id].vue new file mode 100644 index 0000000..e69de29 diff --git a/pages/index/index.vue b/pages/index/index.vue new file mode 100644 index 0000000..c9164ef --- /dev/null +++ b/pages/index/index.vue @@ -0,0 +1,268 @@ + \ No newline at end of file