fix 修复图片展示太大的问题

This commit is contained in:
timerzz 2024-10-30 17:16:43 +08:00
parent 356b80b075
commit 681e0b4875
2 changed files with 8 additions and 4 deletions

View File

@ -1,7 +1,9 @@
<template> <template>
<div class="overflow-overlay h-full m-4 bg-white rounded-2 shadow-lg p-8 flex flex-col justify-between space-y-4"> <div class="overflow-overlay h-full m-4 bg-white rounded-2 shadow-lg p-8 flex flex-col justify-between space-y-4">
<div class="border-solid border-2 border-gray-100 rounded-lg p-4 flex space-x-8"> <div class="border-solid border-2 border-gray-100 rounded-lg p-4 flex space-x-8 items-center">
<a-image :src="data.image" :width="100"></a-image> <div class="w-100px">
<a-image :src="data.image" ></a-image>
</div>
<div class="flex justify-between w-full pr-16"> <div class="flex justify-between w-full pr-16">
<div class="p-4 flex flex-col justify-between"> <div class="p-4 flex flex-col justify-between">
<div class="text-xl font-bold">名称{{data.name}}</div> <div class="text-xl font-bold">名称{{data.name}}</div>

View File

@ -12,7 +12,9 @@
<a-table :dataSource="data.list" :columns="columns" :pagination="false" :scroll="{y:1000}" @change="tableChange" rowKey="id"> <a-table :dataSource="data.list" :columns="columns" :pagination="false" :scroll="{y:1000}" @change="tableChange" rowKey="id">
<template #bodyCell="{ column, record }"> <template #bodyCell="{ column, record }">
<template v-if="column.key === 'image'"> <template v-if="column.key === 'image'">
<a-image :width="75" :src="record.image"/> <div class="w-75px h-75px">
<a-image :src="record.image"/>
</div>
</template> </template>
<template v-else-if="column.key === 'name'"> <template v-else-if="column.key === 'name'">
<router-link target="_blank" :to="{ path: '/article/detail', query: {id: record.id} }"> <router-link target="_blank" :to="{ path: '/article/detail', query: {id: record.id} }">
@ -47,7 +49,7 @@
</template> </template>
<script setup> <script setup>
import {computed, h, onMounted, reactive, ref, watch} from "vue"; import {computed, h, onMounted, reactive, ref} from "vue";
import {LoadingOutlined} from "@ant-design/icons-vue"; import {LoadingOutlined} from "@ant-design/icons-vue";
import {message} from "ant-design-vue"; import {message} from "ant-design-vue";
import {ListArticles, UpdateArticle} from "@/api/articles.js"; import {ListArticles, UpdateArticle} from "@/api/articles.js";