<template>
<view class="index">
<view class="huandeng">
<swiper class="swiper"
indicator-dots="indicatorDots"
autoplay="autoplay"
interval="interval"
duration="duration">
<template v-for="(it,i) in huandeng">
<swiper-item @click="goToPage(it.url)">
<image :src="it.icon" style="width: 100%;height: 100%;"></image>
</swiper-item>
</template>
</swiper>
</view>
<view class="search-container">
<text class="qhsoso hover" data="0">模糊查询</text>
<text class="qhsoso" data="1">精确查询</text>
<text class="viphuiyuan">VIP会员</text>
<view class="form">
<input class="input"placeholder="长按粘贴输入TA说的话">
<text class="zt"><i class="iconfont icon-chacha"></i></text>
<view class="button">查找</view>
</view>
</view>
<view class="tis">上方输入TA说的话查找 获取最佳答案</view>
<view class="tis" style="background-color: #6d6d6d;">今日新增:10条 昨日新增:10条 总计:98741条</view>
<view class="list">
<view class="container">
<view class="title"><i class="iconfont icon-caidan"></i> 初聊互动</view>
<view class="msg"> <view class="a"><i class="iconfont icon-aixin"></i> 异议处理</view>
<view class="a"><i class="iconfont icon-aixin"></i> 共鸣故事</view>
<view class="a"><i class="iconfont icon-aixin"></i> 化解IOD</view>
<view class="a"><i class="iconfont icon-aixin"></i> 废物测试</view>
<view class="a"><i class="iconfont icon-aixin"></i> 设立框架</view>
<view class="a"><i class="iconfont icon-aixin"></i> 情感链接</view>
<view class="a"><i class="iconfont icon-aixin"></i> 框架筛选</view>
<view class="a"><i class="iconfont icon-aixin"></i> 话块连情</view>
</view>
</view>
<view class="container">
<view class="title"><i class="fa fa-eercast"></i> 开场搭讪</view>
<view class="msg">
<view class="a"><i class="iconfont icon-aixin"></i> 恋爱调情</view>
<view class="a"><i class="iconfont icon-aixin"></i> 勾起好奇</view>
<view class="a"><i class="iconfont icon-aixin"></i> 趣味搭讪</view>
<view class="a"><i class="iconfont icon-aixin"></i> 表情话术</view>
<view class="a"><i class="iconfont icon-aixin"></i> 搭讪开场</view>
<view class="a"><i class="iconfont icon-aixin"></i> 话题开场</view>
</view>
</view>
</view>
</view>
</template>
<script>
export default {
data() {
return {
huandeng: [
{
'url':'/pages/index/index',
'icon':'/static/img/banner.jpg',
}
],
title: '技巧'
}
},
onShow() {
uni.setNavigationBarTitle({
title:this.title
})
this.item()
},
methods: {
item() {
uni.request({
url:uni.getStorageSync('www')+'/index.php/app/quan/msg_index.html?time=0',
data: {
uid: uni.getStorageSync('uid'),
mifenlei: uni.getStorageSync('mifenlei'),
},
method: 'POST',
success: (res) => {
}
});
}
}
}
</script>
<style>
page{background-color:#f2f5f9}
.search-container{width:calc(100% - 20px);margin:auto;background-color:#fff;padding:10px;box-shadow:0 0 10px #e8e8e8;margin-top:10px;z-index:9;margin-bottom:10px;overflow:auto;position:relative}
.search-container .form{overflow:auto;background-color:#ccc;padding:5px;margin-top:10px;position:relative;border-radius:5px}
.search-container .qhsoso{background-color:#f2f2f2;padding:4px 10px;font-size:14px;display:initial;color:#0a80ff;border-radius:5px;margin-right:5px}
.search-container .viphuiyuan{background-color:#ff5722;padding:4px 10px;font-size:14px;display:initial;color:#ffeb3b;border-radius:5px;float:right}
.search-container .qhsoso.hover{background-color:#0a80ff;color:#fff}
.search-container .input{padding:0 8px;font-size:14px;border:none;width:calc(100% - 92px);line-height:38px;height:38px;float:left;border-radius:5px;background-color:#f0f8ff}
.search-container .button{float:right;background:#0a80ff;font-size:14px;border:none;cursor:pointer;width:70px;line-height:38px;color:#fff;border-radius:5px;text-align:center}
.search-container .zt{background:#f2f2f2;font-size:14px;border:none;cursor:pointer;width:28px;line-height:28px;color:#ff1212;border-radius:5px;text-align:center;position:absolute;right:89px;top:10px}
.search-container button:hover{background:#03a9f4}
.tis {
padding: 16px 10px;
color: #ffffff;
font-size: 14px;
text-align: center;
background-color: #0a80ff;
margin-bottom: 10px;
}
.list .container {
margin: auto;
background-color: white;
padding: 10px;
box-shadow: 0 0 10px #e8e8e8;
margin-bottom: 10px;
overflow: auto;
}
.list .container .title{
padding: 10px;
margin-bottom: 10px;
border-radius: 5px;
font-size: 18px;
font-weight: bold;
}
.list .container .msg{
background: #f2f2f2;
padding: 5px;
overflow: auto;
border-radius: 5px;
}
.list .container .msg .a{
background: #ffffff;
padding: 10px;
display: block;
float: left;
width: calc(50% - 30px);
border: 5px solid #f2f2f2;
border-radius: 12px;
}
.list .container:nth-child(1) .msg{
background: #ffd5d5;
}
.list .container:nth-child(1) .msg .a{
border: 5px solid #ffd5d5;
}
.list .container:nth-child(2) .msg{
background: #8edcff;
}
.list .container:nth-child(2) .msg .a{
border: 5px solid #8edcff;
}
.list .container:nth-child(3) .msg{
background: #f1b8fb;
}
.list .container:nth-child(3) .msg .a{
border: 5px solid #f1b8fb;
}
.list .container:nth-child(4) .msg{
background: #bc97fb;
}
.list .container:nth-child(4) .msg .a{
border: 5px solid #bc97fb;
}
.list .container:nth-child(5) .msg{
background: #b5deff;
}
.list .container:nth-child(5) .msg .a{
border: 5px solid #b5deff;
}
.list .container:nth-child(6) .msg{
background: #dec195;
}
.list .container:nth-child(6) .msg .a{
border: 5px solid #dec195;
}
.list .container:nth-child(7) .msg{
background: #f6ffa0;
}
.list .container:nth-child(7) .msg .a{
border: 5px solid #f6ffa0;
}
.list .container:nth-child(8) .msg{
background: #b5e2de;
}
.list .container:nth-child(8) .msg .a{
border: 5px solid #b5e2de;
}
</style>