chatgpt小程序开发（1）

最新推荐文章于 2024-05-24 13:39:19 发布

VIP文章 Eersan-2023.3.12

最新推荐文章于 2024-05-24 13:39:19 发布

阅读量232

点赞数

分类专栏：项目文章标签： javascript css html chatgpt 前端

本文链接：https://blog.csdn.net/weixin_61719769/article/details/131175753

版权

本文介绍chatgpt小程序的简单布局和样式开发，后续会推进具体功能开发。

一.主页面布局

<view>
  <view class="main">
    <image src="../../images/robot.png" class="logoImg" />
    <view class="row text">
      您好，我是
      <view style="font-weight: 700;">
        小AI
      </view> 
    </view>
    <view class="text">
      我可以回答你的问题
    </view>
  </view>

  <view class="loginIndex">
    <button type="warning" class="btn" bindtap="startDing">开始对话</button>
  </view>
  <view class="rule">
    违规提问将被限制对话
  </view>
</view>

二.主页面样式

.main{
  margin-top: 200rpx;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}
.logoImg{
  width: 210rpx;