使用vitejs搭配vue.js,快速构建简单的网站案例展示Demo

使用vitejs搭配vue.js,快速构建简单的网站案例展示Demo!为了缩短开发周期，让自己心目中的项目可以快速上线，服务大众，我采用了这种架构插件的方式，下面的案例网站代码，基本上90%以上都是机器人，人工智能Chatgpt写的。欢迎大家交流互动。

1：由于代码较多，这里仅仅展示部分组件的代码内容。

<template><div class="chou-container"><!-- 签筒图片 --><img v-if="isShaking" :src="shakingImage" alt="签筒" class="chou-img" /><button @click="drawLottery" class="draw-button" v-if="isShow">抽签</button><!-- 显示抽签后的签号 --><div v-if="lotteryId !== null" class="lottery-id"><img :src="currentSignImage" alt="签图片" class="lottery-image" /><buttonv-if="lotteryId"@click="viewLotteryDetail()"class="view-detail-button">查看解签详细信息</button></div></div><!-- 弹窗遮罩层 --><div v-if="isShowLotteryDetail" class="overlay" @click="closeDetail"><div class="detail-container"><button @click="closeDetail" class="close-button">关闭</button><h1>解签详情</h1><p>签号：{{ lotteryId }}</p><div class="lottery-content"><p>{{ lotterySignContent }}</p></div></div></div>
</template><script>
import { lotterySigns } from '/src/data/all.js'; // 导入数据export default {data() {return {isShow: true,isShaking: false,shakingImage: "/img/qiantong.png",lotteryId: null,currentSignImage: "",isShowLotteryDetail: false, // 控制弹窗显示lotterySignContent: "", // 解签内容};},methods: {drawLottery() {this.isShaking = true;this.isShow = false;setTimeout(() => {this.isShaking = false;this.lotteryId = this.getRandomLotteryId();this.currentSignImage = this.getSignImage(this.lotteryId);}, 2000);},getRandomLotteryId() {return Math.floor(Math.random() * 5) + 1;},getSignImage(id) {const sign = lotterySigns.find((sign) => sign.id === id);return sign ? sign.image : "";},viewLotteryDetail() {const sign = lotterySigns.find((sign) => sign.id === this.lotteryId);if (sign) {this.lotterySignContent = sign.content;}this.isShowLotteryDetail = true;},closeDetail() {this.isShowLotteryDetail = false;this.$router.push('/'); // 跳转回首页},},
};
</script><style scoped>
.chou-container {display: flex;flex-direction: column;align-items: center;justify-content: center;height: 100vh; /* 设置容器高度为视窗高度 */background-color: #fff;padding: 20px;box-sizing: border-box;
}.chou-img {max-width: 100%;height: auto;transition: transform 0.3s;
}.draw-button {margin-top: 20px;padding: 10px 20px;background-color: #3498db;color: white;border: none;cursor: pointer;border-radius: 5px;
}.lottery-id {margin-top: 20px;text-align: center;
}.lottery-image {max-width: 80%;height: auto;margin-top: 10px;
}/* 弹窗遮罩层 */
.overlay {position: fixed;top: 0;left: 0;width: 100vw;height: 100vh;background-color: rgba(0, 0, 0, 0.5); /* 半透明黑色遮罩 */display: flex;justify-content: center;align-items: center;z-index: 1000;
}.detail-container {background-color: #fff;border-radius: 8px;padding: 20px;max-width: 600px;width: 90%; /* 适配移动端 */box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);text-align: center;position: relative;
}h1 {font-size: 24px;margin-bottom: 20px;
}p {font-size: 18px;line-height: 1.6;margin-bottom: 15px;
}.lottery-content {max-height: 400px; /* 限制解签内容区域的最大高度 */overflow-y: auto; /* 超出部分滚动 */padding: 10px;background-color: #fff;border: 1px solid #ddd;border-radius: 5px;margin-top: 10px;text-align: left;
}.close-button {position: absolute;top: 20px;right: 20px;padding: 10px;background-color: #e74c3c;color: white;border: none;border-radius: 50%;cursor: pointer;font-size: 16px;
}.close-button:hover {background-color: #c0392b;
}
</style>

2：