feat:图片轮播组件封装

This commit is contained in:
duanshuwen
2025-07-12 23:10:36 +08:00
parent 7bea43f450
commit 9bac216d7a
9 changed files with 138 additions and 0 deletions

Binary file not shown.

After

Width:  |  Height:  |  Size: 4.5 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 3.1 KiB

View File

@@ -0,0 +1,19 @@
<template>
<view class="module-header mb12">
<text class="module-title">{{ title }}</text>
<image class="underline" src="./images/wave_icon.png" mode="widthFix"/>
</view>
</template>
<script setup>
defineProps({
title: {
type: String,
default: '图片详情'
}
});
</script>
<style scoped lang="scss">
@import './styles/index.scss';
</style>

View File

@@ -0,0 +1,14 @@
## 图片详情组件
组件名称:模块标题组件
## 提示词:
使用 uniapp + vue3 组合式 api 开发微信小程序,要求如下:
1、按照提供的图片 100%还原交互设计
2、要求布局样式结构简洁明了class 命名请按照模块名称来命名,例如:.module-title
3、可以使用 uniapp 内置的组件
## 备注
仅供学习、交流使用,请勿用于商业用途。

View File

@@ -0,0 +1,25 @@
.module-header {
position: relative;
padding: 2px 8px 2px 3px;
}
.module-title {
font-size: 18px;
font-family: DingTalk JinBuTi, DingTalk JinBuTi;
color: #000;
position: relative;
z-index: 1;
}
.underline {
position: absolute;
bottom: 3px;
left: 0;
width: 79px;
height: 4px;
z-index: 0;
}
.mb12 {
margin-bottom: 12px;
}