feat:你可以这样问我提示词组件封装

This commit is contained in:
duanshuwen
2025-07-11 14:46:30 +08:00
parent fb6c258893
commit deef75509e
30 changed files with 221 additions and 203 deletions

Binary file not shown.

After

Width:  |  Height:  |  Size: 16 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 494 B

View 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>

View File

@@ -0,0 +1,16 @@
## 消息体提示词组件
组件名称:消息体提示词组件
帮我加一张床、房间热水不够热、帮我加一台麻将机
## 提示词:
使用 uniapp + vue3 组合式 api 开发微信小程序,要求如下:
1、按照提供的图片高度还原交互设计
2、要求布局样式结构简洁明了class 命名请按照模块名称来命名,例如:.service-prompt
3、可以使用 uniapp 内置的组件
4、帮忙加一张床、房间热水不够热、帮忙加一台麻将机有点击交互
## 备注
仅供学习、交流使用,请勿用于商业用途。

View 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;
}