個人分工04——團隊衝刺

笠大發表於2024-04-26

個人分工04——團隊衝刺

20223775 董澤豪

個人分工

(1）未開始

1.後端其一業務

2.資料庫表的完善

(2)進行中

1.前段工程化搭建

2.頁面設計

(3)已完成

1.UI設計

開發程式碼

<template>
  <div class="seeDetails">
    <div>
      <h4>{{ detailList.title }}</h4>
    </div>
    <div style="margin-right: 250px">
      <span>{{ detailList.typeName }}</span>
      <span>{{ detailList.pageViews }}瀏覽</span>
      <span>{{ detailList.pastHours }}小時前</span>
    </div>

    <div style="width: 500px; margin: 20px 0px 0px 70px">
      <p>
        {{ detailList.article }}
      </p>
    </div>
  </div>
</template>

<script>
import { defineComponent } from "vue";
export default defineComponent({
  name: "Detail",
});
</script>
<script setup>
import { getshowHeadlineDetail } from "../../api/index";
import { ref, onMounted } from "vue";
import { useRoute } from "vue-router";
const route = useRoute(); // 路由資訊物件

const detailList = ref({}); //詳情資料
//獲取詳情初始化資料
const getDetailList = async () => {
  let result = await getshowHeadlineDetail(route.query.hid);
  detailList.value = result.headline;
};
// 頁面初始化鉤子
onMounted(() => {
  getDetailList();
});
</script>

<style lang="less" scoped>
.seeDetails {
  width: 1200px;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  align-items: center;
  div {
    span {
      padding-right: 15px;
      font-size: 14px;
      color: #8d91aa;
    }
    p {
      font-size: 14px;
      color: #2b2e30;
    }
  }
}
</style>

相關文章