MiniProjectX/vue3-vuetify3-typescript-blog-system/page2.vue

<template>
  <v-container>
    <v-row justify="center">
      <v-col cols="12" lg="8">
        <v-card class="mx-auto" variant="tonal">
          <v-card>
            <v-img :src="imgSrc" cover></v-img>
          </v-card>
          <br><br>
          <v-card-item>
            <v-card-title>
              <p style="font-size: 30px;
          text-align: left;
          word-break: break-all;">《星露谷物语》官方食谱书2024年4月16日发售</p>
            </v-card-title>
            <br>
            <v-card-subtitle>
              <p style="font-size: 18px;text-align: left;">收录50种以上食谱</p>
            </v-card-subtitle>
          </v-card-item>
          <v-card-actions>
            <v-list-item class="w-100">
              <template v-slot:prepend>
                <v-avatar color="grey-darken-3"
                  image="https://avataaars.io/?avatarStyle=Transparent&topType=ShortHairShortCurly&accessoriesType=Prescription02&hairColor=Black&facialHairType=Blank&clotheType=Hoodie&clotheColor=White&eyeType=Default&eyebrowType=DefaultNatural&mouthType=Default&skinColor=Light"></v-avatar>
              </template>
              <v-list-item-title style="font-size: 15px;text-align: left;">羊星亮</v-list-item-title>
              <v-list-item-subtitle style="font-size: 10px;text-align: left;">3天前发布</v-list-item-subtitle>
            </v-list-item>
          </v-card-actions>
          <v-card-text>
            <v-md-preview :text="text"></v-md-preview>
          </v-card-text>
        </v-card>
      </v-col>
    </v-row>
  </v-container>
</template>

<script>
import {ref,onMounted} from 'vue'
export default {
  setup() {
    let text = ref()
    let imgSrc = ref('https://image.gcores.com/ced586d33dc9ab574ae8f769adece3ed-616-353.jpg?x-oss-process=image/resize,limit_1,m_lfit,w_1200/quality,q_90/format,webp')
    onMounted(async () => {
      text.value = await(await fetch('https://bitbucket.org/tutorials/markdowndemo/raw/5b6c39df3196eeeb8a36684beb9a3df854a0b5f3/README.md')).text()
      console.log(text.value)
    });
    return {text,
      imgSrc};
  }
};
</script>