feat:你可以这样问我提示词组件封装
This commit is contained in:
BIN
components/ServiceTipsWord/images/2025-07-11_141148.png
Normal file
BIN
components/ServiceTipsWord/images/2025-07-11_141148.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 16 KiB |
BIN
components/ServiceTipsWord/images/icon_refresh.png
Normal file
BIN
components/ServiceTipsWord/images/icon_refresh.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 494 B |
40
components/ServiceTipsWord/index.vue
Normal file
40
components/ServiceTipsWord/index.vue
Normal file
@@ -0,0 +1,40 @@
|
||||
<template>
|
||||
<view class="service-prompt">
|
||||
<view class="service-header">
|
||||
<text class="header-text">你可以这样问我</text>
|
||||
<image
|
||||
class="header-icon"
|
||||
src="./images/icon_refresh.png"
|
||||
@click="handleRefresh"
|
||||
></image>
|
||||
</view>
|
||||
<view class="service-buttons">
|
||||
<text class="service-button" @click="handleClick('bed')">
|
||||
帮我加一张床
|
||||
</text>
|
||||
<text class="service-button" @click="handleClick('hotWater')">
|
||||
房间热水不够热
|
||||
</text>
|
||||
<text class="service-button" @click="handleClick('mahjong')">
|
||||
帮忙加一台麻将机
|
||||
</text>
|
||||
</view>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import { ref } from "vue";
|
||||
|
||||
const handleRefresh = (type) => {
|
||||
console.log(`Button clicked: ${type}`);
|
||||
};
|
||||
|
||||
const handleClick = (type) => {
|
||||
console.log(`Button clicked: ${type}`);
|
||||
// Add your logic here based on the type (e.g., 'bed', 'hotWater', 'mahjong')
|
||||
};
|
||||
</script>
|
||||
|
||||
<style scoped lang="scss">
|
||||
@import "./styles/index.scss";
|
||||
</style>
|
||||
16
components/ServiceTipsWord/prompt.md
Normal file
16
components/ServiceTipsWord/prompt.md
Normal file
@@ -0,0 +1,16 @@
|
||||
## 消息体提示词组件
|
||||
|
||||
组件名称:消息体提示词组件
|
||||
帮我加一张床、房间热水不够热、帮我加一台麻将机
|
||||
|
||||
## 提示词:
|
||||
|
||||
使用 uniapp + vue3 组合式 api 开发微信小程序,要求如下:
|
||||
1、按照提供的图片高度还原交互设计
|
||||
2、要求布局样式结构简洁明了,class 命名请按照模块名称来命名,例如:.service-prompt
|
||||
3、可以使用 uniapp 内置的组件
|
||||
4、帮忙加一张床、房间热水不够热、帮忙加一台麻将机有点击交互
|
||||
|
||||
## 备注
|
||||
|
||||
仅供学习、交流使用,请勿用于商业用途。
|
||||
53
components/ServiceTipsWord/styles/index.scss
Normal file
53
components/ServiceTipsWord/styles/index.scss
Normal file
@@ -0,0 +1,53 @@
|
||||
.service-prompt {
|
||||
padding: 12px 18px;
|
||||
}
|
||||
|
||||
.service-header {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
margin-bottom: 5px;
|
||||
}
|
||||
|
||||
.header-text {
|
||||
font-size: 12px;
|
||||
color: #6b84a2;
|
||||
}
|
||||
|
||||
.header-icon {
|
||||
width: 9px;
|
||||
height: 9px;
|
||||
margin-left: 8px;
|
||||
}
|
||||
|
||||
.service-buttons {
|
||||
display: flex;
|
||||
flex-wrap: nowrap;
|
||||
}
|
||||
|
||||
.service-button {
|
||||
height: 36px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
margin-right: 8px;
|
||||
padding-left: 12px;
|
||||
padding-right: 12px;
|
||||
background: linear-gradient(
|
||||
180deg,
|
||||
rgba(255, 255, 255, 0.5) 0%,
|
||||
#ffffff 100%
|
||||
);
|
||||
box-shadow: 0px 2px 6px 0px rgba(16, 78, 137, 0.1);
|
||||
border-radius: 20px 20px 20px 20px;
|
||||
border: 1px solid #fff;
|
||||
border-image: linear-gradient(
|
||||
137deg,
|
||||
rgba(255, 255, 255, 1),
|
||||
rgba(255, 255, 255, 0.5),
|
||||
rgba(255, 255, 255, 1)
|
||||
);
|
||||
font-size: 12px;
|
||||
font-weight: 500;
|
||||
color: #00a6ff;
|
||||
border-radius: 50px;
|
||||
}
|
||||
Reference in New Issue
Block a user