chatgpt小程序开发（1）

本文介绍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;
  height: 210rpx;
}
.row{
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: center;
  width: 100%;
}
.text{
  font-size: 44rpx;
  color: #3387ff;
  margin-top: 20rpx;
}
.loginIndex{
  margin-top:60rpx ;
}
.btn{
  color: #fff;
  background-color: #3387ff;
  border-color:#3387ff ;
}
.rule{
  position: fixed;
  bottom: 0;
  width: 100%;
  padding:10rpx 20rpx;
  font-size: 30rpx;
  color: #898d89;
  text-align: center;
}

三.聊天页面布局

<view id="chatPage">
<!-- 对话 -->
  <scroll-view scroll-x scroll-y>
    <block>
      <!-- 左边 -->
      <view style="display: flex; padding: 2vw 11vw 2vw 2vw;">
        <view style="width: 11vw;height: 11vw;">
          <image src="../../images/robot.png" style="width: 11vw;height: 11vw;"></image>
        </view>
        <view style="width:4vw;height: 11vw;margin-left: 0.5; display: flex;align-items: center;">
          <image src="../../images/left.png" style="width:4vw;height: 4vw;"></image>
        </view>
        <block>
          <text class="leftMsg">您好，我是AI，请问有什么需要帮助的吗?</text>
        </block>
      </view>
      <!-- 右边 -->
      <view style="display: flex; justify-content: flex-end; padding: 2vw 11vw 2vw 2vw;">
        <view class="rightMsg">你是谁</view>
        <view style="width: 4vw; height: 11vw; margin-left: 0.5vw; display: flex; align-items: center;">
          <image style="width: 4vw; height: 4vw;" src="../../images/right.png"></image>
        </view>
        <view style="width: 11vw; height: 11vw; margin-right: 0.5vw;">
          <image style="width: 11vw; height: 11vw;" src="../../images/1.png"></image>
        </view>
      </view>
    </block>
  </scroll-view>
<!-- 分割线 -->
<!-- <view style="width: 100%;height: 18vw;border-bottom: 2px solid green;"></view> -->
<!-- 输入框 -->
<view class="inputRoom">
<image mode="widthFix" style="width: 7vw;margin-left: 3.2vw;margin-top: 1.5vw;" src="../../images/folder.png"></image>
<input confirm-type="send"></input>
</view>
</view>

四.聊天页面样式

page{
  background-color: #f1f1f1;
}
.leftMsg{
  font-size: 35rpx;
  color: #444;
  line-height: 7vw;
  padding: 2vw 2.5vw;
  background-color: #fff;
  margin-left: -1.6vw;
  border-radius: 10rpx;
  z-index: 10;
}
.rightMsg{
  font-size: 35rpx;
  background-color: #96Eb6a;
color: #444;
line-height: 7vw;
padding: 2vw 2.5vw;
margin-right: -1.6vw;
border-radius: 10rpx;
z-index: 10;
}
.inputRoom{
  position: fixed;
  bottom: 0;
  display: flex;
  flex-direction: row;
}
input{
  width: 76vw;
  height: 9.33vw;
  background-color: #fff;
  border-radius: 40rpx ;
  margin-left: 2vw;
  margin-bottom: 1.5vw;
  padding: 0 3vw;
  font-size: 28rpx;
  color: #444;
}