NewBing的AI问答界面真的非常好看,重点突出一个简约大气,刚好最近在学Vue,模仿一个网页试试水~
一、主要参考
1、NewBing
2、ChatAi人工智能
二、实现效果
1、界面简约,言简意赅;
2、鼠标停留在选项时选项框变色;
3、点击选项框后,选项框中的文字会出现在底部的输入框中。
三、重点实现
1、鼠标停留在选项时选项框变色(主要通过CSS实现)
hover中定义的是鼠标悬停时所表现出来的颜色。
/*鼠标移动到li标签时会有变色效果*/
li:hover{
background-color:azure;
}
鼠标停在”你对人工智能技术有什么看法?“,颜色发生变化(截图不太明显)。
2、点击选项框后,选项框中的文字会出现在底部的输入框中(主要通过Vue实现)
首先,输入框通过textarea标签定义,因此无任何输入时是这样的:
<textarea autocomplete="off" placeholder="输入您的问题(Shift+Enter=换行):" class = "textarea-inner" v-model="question"></textarea>
属性question通过双向绑定(v-model)实现动态变化,最开始question是没有内容的,因为placeholder已经把文字填上去了。
因此,vue实例对象中的data可以定义为:
data() {
//数据
return {
//提问回答列下的问题
list3_ask1:"中国十大旅游景点分别是哪些?",
list3_ask2:"你对人工智能技术有什么看法?",
list3_ask3:"你认为哪个国家的文化最有意思?",
list3_ask4:"人工智能会给我们带来什么样的未来?",
//输入框显示的文字
question:""
};
},
以上四个问题是定义在li标签中的:
<ul>
<li @click = "xiangying">{{list3_ask1}}</li>
<li @click = "xiangying">{{list3_ask2}}</li>
<li @click = "xiangying">{{list3_ask3}}</li>
<li @click = "xiangying">{{list3_ask4}}</li>
</ul>
可以看到每个li都绑定了一个click事件,为一个叫做xiangying的方法,用来干什么的呢?
是用来实现,当点击一个选项框时,vm能够接收到这个il标签中的文字内容(通过e.target.innerHTML实现),并把question设为接收到的文字内容。
特别提醒:这里有点绕哈,都是个人的理解。
函数中的this是指拥有该函数的实例化对象,比如说本案中的this就是Vue实例对象,也就是vm;而像setTimeout定时器函数,它的this就是window全局对象了,因为是js给你的这个函数,而不是你自己定义的函数。
对于箭头函数,它本身是没有this的,所以它会到外面一层去寻找this,也就是去找父级作用域的this。
methods: {
//获得li元素中的值,并让输入框中的值变为li元素中的值
xiangying(e){
this.question = e.target.innerHTML;
}
}
(6.7修改)
初版的输入框样式比较生硬,因此做了以下调整:
1、增加阴影以及边框圆滑程度
2、当鼠标悬停/聚焦到输入框时,输入框会呈现平滑展开的效果
3、输入框呈现展开效果时,按钮和输入框以下的元素不会被挤走,也就是位置不变。(这个地方最最最恶心了,想要其他元素不被挤走,添加了hover的元素一定要记得设置position:absolute了)
√静态时的输入框:
√鼠标悬停/聚焦到输入框时(变宽):
html代码:
<div class="box-input">
<div class="textarea">
<textarea autocomplete="off" placeholder="输入您的问题(Shift+Enter=换行):" class = "textarea-inner" v-model="question"></textarea>
</div>
<el-button class = "button" @click ="submit">
提交
</el-button>
</div>
css代码:
.box-input{
display: flex;
flex-direction: row;
justify-content: center;
align-items: center;
box-sizing: border-box;
margin-top:-15px;
margin-left:35%;
}
.textarea-inner{
position:absolute;
transform: translate3d(-100%,-30%,0);
margin:auto;
padding: 10px 60px 10px 15px;
letter-spacing: 1px;
display: block;
resize: vertical;
line-height: 1;
box-sizing: border-box;
width:600px;
font-size:14px;
border-radius: 30px;
resize:none;
border:0;
box-shadow: 5px 0px 10px 0px rgba(109,207,246,.5);
object-fit:cover;
transition: all .30s;
}
textarea:hover{
outline: none;
overflow:hidden;
height:50px;
border: 0;
height:80px;
box-shadow: 0 0 5px rgba(109,207,246,.5);
}
textarea:focus{
outline: none;
overflow:hidden;
height:50px;
border: 0;
height:80px;
box-shadow: 0 0 5px rgba(109,207,246,.5);
}
3、部署Vue项目
关于vs code和Vue的安装和环境配置这篇就暂时不表了
输入win+R,接着输入cmd进入命令行,再通过cd指令跳转到Vue项目所在的文件夹下
输入npm run dev就能部署到本地运行。
五、如何用特定ip地址部署Vue前端
默认情况下都是http://localhost:端口号进行访问,那么如何设置可以用特定的ip地址进行访问呢?
我这个项目是在终端输入“npm run dev”启动项目,因此我需要在dev中进行配置。
打开config中的index.js,找到dev的位置进行host和port的修改,再重启项目就能够实现用固定的ip地址进行访问。
四、值得学习的点
1、渐变色背景
NewBing的背景真的非常好看!所以在网上搜到了一些关于渐变色的网站和博文
(1)grabient
网页本身的UI就做的很美腻,可以直接复制CSS代码,方便省力
(2)【常见CSS扫盲之渐变效果】好看的24种CSS渐变效果汇总(附源码)
@拄杖盲学轻声码 这位博主的博文中列出了很多很清新的渐变色,用来做UI界面特别合适。
2、怎样隐藏网页的滑动条
写在最外层容器里
overflow:-moz-scrollbars-none;
3、怎样使ul中的li标签垂直居中?
注意时垂直居中!如果要水平居中,就把flex-direction改成row
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
4、实现容器的背景颜色透明,而容器里的文字内容不透明
background-color:rgba(240,255,255,0.6);
五、后续计划
1、通过websocket实现聊天