?結構與樣式
<template><div class="web_view"><ul><li v-for="web in webList" :key="web.title"><a :href="web.src" :title="web.title" target="_blank"><img :src="web.img" alt="未找到圖標" /><p v-html="web.title"></p></a></li></ul></div>
</template>
<script setup name="WebView">
import myweb from '../stores/web'
const { webList } = myweb()
</script>
<style scoped>
.web_view {display: flex;align-items: center;justify-content: center;height: 100%;ul {display: flex;li {text-align: center;img {width: 50px;height: 50px;}&:hover {margin: 30px;}}}
}
</style>腳本?
?
import { reactive } from 'vue'
export default function () {const webList = reactive([{title: '百度',src: 'https://www.baidu.com',img: '//www.baidu.com/favicon.ico'},{title: '嗶哩嗶哩',src: '//www.bilibili.com',img: '//www.bilibili.com/favicon.ico'},{title: '智能翻譯',src: 'https://fanyi.baidu.com',img: '//fanyi.baidu.com/favicon.ico'},{title: '菜鳥教程',src: 'https://www.runoob.com/',img: 'https://www.runoob.com/favicon.ico'},{title: '在線制作ico圖標',src: 'https://www.bitbug.net',img: '//www.bitbug.net/favicon.ico'},{title: '在線運行代碼工具',src: 'https://jsrun.net/',img: 'chrome-search://ntpicon/?size=48@1.500000x&url=https://jsrun.net/'},{title: '原神大地圖',src: 'https://act.mihoyo.com/ys/app/interactive-map/index.html?bbs_presentation_style=no_header&lang=zh-cn&utm_source=bbs&utm_medium=mys&utm_campaign=pcicon&_markerFps=24#/map/2?shown_types=NaN,-1084,508,2¢er=2008.50,-1084.00&zoom=-3.00',img: './assets/img/ico/原神大地圖.ico'}// {// title: '必應翻譯',// src: 'https://cn.bing.com/translator',// img: 'https://cn.bing.com/favicon.ico'// },])return { webList }
}
)
