feat:图片轮播组件封装
This commit is contained in:
BIN
components/ModuleTitle/images/2025-07-12_222027.png
Normal file
BIN
components/ModuleTitle/images/2025-07-12_222027.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 4.5 KiB |
BIN
components/ModuleTitle/images/wave_icon.png
Normal file
BIN
components/ModuleTitle/images/wave_icon.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 3.1 KiB |
19
components/ModuleTitle/index.vue
Normal file
19
components/ModuleTitle/index.vue
Normal 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>
|
||||
14
components/ModuleTitle/prompt.md
Normal file
14
components/ModuleTitle/prompt.md
Normal file
@@ -0,0 +1,14 @@
|
||||
## 图片详情组件
|
||||
|
||||
组件名称:模块标题组件
|
||||
|
||||
## 提示词:
|
||||
|
||||
使用 uniapp + vue3 组合式 api 开发微信小程序,要求如下:
|
||||
1、按照提供的图片 100%还原交互设计
|
||||
2、要求布局样式结构简洁明了,class 命名请按照模块名称来命名,例如:.module-title
|
||||
3、可以使用 uniapp 内置的组件
|
||||
|
||||
## 备注
|
||||
|
||||
仅供学习、交流使用,请勿用于商业用途。
|
||||
25
components/ModuleTitle/styles/index.scss
Normal file
25
components/ModuleTitle/styles/index.scss
Normal 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;
|
||||
}
|
||||
Reference in New Issue
Block a user