|
|
@@ -57,55 +57,28 @@
|
|
|
<div v-if="!showQuery" class="topdiv">
|
|
|
<div class="box">
|
|
|
<div class="summary-icon">
|
|
|
- <img src="~@/assets/image/cyyd/summary-icon.png" />
|
|
|
+ <img src="~@/assets/image/ai_logo.png" />
|
|
|
</div>
|
|
|
<div class="content_box">
|
|
|
<div class="one_box">
|
|
|
- <div>智搜地块，慧定乾坤</div>
|
|
|
+ <div class="title">智搜地块，慧定乾坤</div>
|
|
|
<div class="desc">
|
|
|
- 你好，我可以根据你的指令，进行图层控制、智能找地、统计
|
|
|
+ 你好，我可以根据你的指令进行图层控制、智能找地、统计
|
|
|
分析等功能。
|
|
|
</div>
|
|
|
</div>
|
|
|
<div class="two_box">
|
|
|
<p class="title">你可以试着这样问我：</p>
|
|
|
<ul>
|
|
|
- <li @click="hotQuestionReset('请帮我打开永久基本农田图层', '1')">
|
|
|
- <span class="icon"></span>
|
|
|
- <span class="desc">
|
|
|
- <span class="title">图层控制</span>
|
|
|
- <span class="txt">例：请帮我打开永久基本农田图层</span>
|
|
|
- </span>
|
|
|
- </li>
|
|
|
- <li
|
|
|
- @click="
|
|
|
- hotQuestionReset(
|
|
|
- '帮我在萧山区找出面积大于100亩的永久基本农田图斑'
|
|
|
- )
|
|
|
- "
|
|
|
- >
|
|
|
- <span class="icon"></span>
|
|
|
- <span class="desc">
|
|
|
- <span class="title">智能找地</span>
|
|
|
- <span class="txt"
|
|
|
- >例：帮我在萧山区找出面积大于100亩的永久基本农田图斑</span
|
|
|
- >
|
|
|
- </span>
|
|
|
- </li>
|
|
|
- <li
|
|
|
- @click="
|
|
|
- hotQuestionReset(
|
|
|
- '例：请帮统计萧山区永久基本农田规模', '3'
|
|
|
- )
|
|
|
- "
|
|
|
- >
|
|
|
- <span class="icon"></span>
|
|
|
- <span class="desc">
|
|
|
- <span class="title">统计分析</span>
|
|
|
- <span class="txt"
|
|
|
- >例：请帮统计萧山区永久基本农田规模</span
|
|
|
- >
|
|
|
- </span>
|
|
|
+ <li v-for="(item, index) in kws" :key="index" @click="hotQuestionReset(item['kw'], (index+1).toString())">
|
|
|
+ <div class="left_box">
|
|
|
+ <span class="icon left_icon"></span>
|
|
|
+ <span class="desc">
|
|
|
+ <span class="title">{{item['title']}}</span>
|
|
|
+ <span class="txt">{{ item['desc'] }}</span>
|
|
|
+ </span>
|
|
|
+ </div>
|
|
|
+ <span class="icon right_icon"><Icon type="ios-arrow-forward" /></span>
|
|
|
</li>
|
|
|
</ul>
|
|
|
</div>
|
|
|
@@ -332,6 +305,23 @@ export default {
|
|
|
},
|
|
|
data() {
|
|
|
return {
|
|
|
+ kws: [
|
|
|
+ {
|
|
|
+ title: '图层控制',
|
|
|
+ kw: '请帮我打开永久基本农田图层',
|
|
|
+ desc: '例：请帮我打开永久基本农田图层'
|
|
|
+ },
|
|
|
+ {
|
|
|
+ title: '智能找地',
|
|
|
+ kw: '帮我在萧山区找出面积大于100亩的永久基本农田图斑',
|
|
|
+ desc: '例：帮我在萧山区找出面积大于100亩的永久基本农田图斑'
|
|
|
+ },
|
|
|
+ {
|
|
|
+ title: '图层控制',
|
|
|
+ kw: '请帮统计萧山区永久基本农田规模',
|
|
|
+ desc: '例：请帮统计萧山区永久基本农田规模'
|
|
|
+ }
|
|
|
+ ],
|
|
|
mockData3: [
|
|
|
{
|
|
|
"name": "瓜沥镇",
|
|
|
@@ -1827,7 +1817,6 @@ export default {
|
|
|
width: 100%;
|
|
|
position: relative;
|
|
|
height: 100%;
|
|
|
-
|
|
|
.map-content {
|
|
|
position: absolute;
|
|
|
width: 100%;
|
|
|
@@ -2044,99 +2033,143 @@ export default {
|
|
|
top: 0px;
|
|
|
z-index: 100;
|
|
|
left: 0px;
|
|
|
- background: #ffffff;
|
|
|
- padding: 20px;
|
|
|
+ background-color: #ffffff;
|
|
|
display: flex;
|
|
|
flex-direction: column;
|
|
|
+ box-shadow: 0px 4px 15px 1px rgba(0,54,116,0.15);
|
|
|
+ background-image: url(~@/assets/image/box_bg.png);
|
|
|
+ background-repeat: no-repeat;
|
|
|
+ background-size: 100% 100%;
|
|
|
+ padding: 40px 20px;
|
|
|
> .box {
|
|
|
flex: 1;
|
|
|
display: flex;
|
|
|
align-items: flex-start;
|
|
|
+ position: relative;
|
|
|
> div {
|
|
|
&.summary-icon {
|
|
|
- width: 38px;
|
|
|
- height: 38px;
|
|
|
- background: #ffffff;
|
|
|
- border: 1px solid #d5e3ff;
|
|
|
+ width: 88px;
|
|
|
+ height: 88px;
|
|
|
border-radius: 50%;
|
|
|
margin-right: 5px;
|
|
|
flex-shrink: 0;
|
|
|
+ position: absolute;
|
|
|
+ left: -12px;
|
|
|
+ top: -8px;
|
|
|
> img {
|
|
|
width: 100%;
|
|
|
height: 100%;
|
|
|
}
|
|
|
}
|
|
|
&.content_box {
|
|
|
+ border-radius: 16px;
|
|
|
+ border-top-left-radius: 50px;
|
|
|
+ background: linear-gradient( 228deg, rgba(77,151,252,0.3) 0%, rgba(102,160,255,0.3) 37%, rgba(225,134,252,0.57) 69%, #B072F9 100%);
|
|
|
> div {
|
|
|
&.one_box {
|
|
|
+ padding: 10px 20px;
|
|
|
+ padding-left: 90px;
|
|
|
+ >.title {
|
|
|
+ font-size: 18px;
|
|
|
+ font-weight: bold;
|
|
|
+ color: transparent;
|
|
|
+ background: linear-gradient( 270deg, #2534F4 0%, #1160F5 47%, #0075E8 100%);
|
|
|
+ -webkit-background-clip: text;
|
|
|
+ }
|
|
|
> div {
|
|
|
&:first-child {
|
|
|
- font-size: 30px;
|
|
|
+ font-size: 18px;
|
|
|
font-weight: bold;
|
|
|
color: transparent;
|
|
|
- background: linear-gradient(
|
|
|
- 270deg,
|
|
|
- #2e3cf5 0%,
|
|
|
- #2e74f8 47%,
|
|
|
- #258ff8 100%
|
|
|
- );
|
|
|
+ background: linear-gradient( 270deg, #2534F4 0%, #1160F5 47%, #0075E8 100%);
|
|
|
-webkit-background-clip: text;
|
|
|
}
|
|
|
+ &.desc {
|
|
|
+ color: #0C254A;
|
|
|
+ font-size: 15px;
|
|
|
+ }
|
|
|
}
|
|
|
}
|
|
|
&.two_box {
|
|
|
+ background: #f1f9fe;
|
|
|
+ box-shadow: 0px 4px 10px 1px rgba(0,54,116,0.15);
|
|
|
+ border-radius: 16px;
|
|
|
+ padding: 20px;
|
|
|
> .title {
|
|
|
- margin: 10px 0px;
|
|
|
+ padding-bottom: 10px;
|
|
|
+ color: #326EF4;
|
|
|
+ font-weight: bold;
|
|
|
+ font-size: 18px;
|
|
|
}
|
|
|
> ul {
|
|
|
list-style: none;
|
|
|
> li {
|
|
|
padding: 15px;
|
|
|
margin-bottom: 10px;
|
|
|
- background: #f5f9ff;
|
|
|
+ background: #fff;
|
|
|
border-radius: 6px 6px 6px 6px;
|
|
|
display: flex;
|
|
|
align-items: center;
|
|
|
+ justify-content: space-between;
|
|
|
+ margin-bottom: 15px;
|
|
|
cursor: pointer;
|
|
|
+ >.left_box {
|
|
|
+ display: flex;
|
|
|
+ flex: 1;
|
|
|
+ > span {
|
|
|
+ &.left_icon {
|
|
|
+ display: block;
|
|
|
+ background-repeat: no-repeat;
|
|
|
+ background-size: 100%;
|
|
|
+ background-position: center;
|
|
|
+ width: 36px;
|
|
|
+ height: 36px;
|
|
|
+ border-radius: 6px;
|
|
|
+ margin-right: 10px;
|
|
|
+ }
|
|
|
+ &.desc {
|
|
|
+ flex: 1;
|
|
|
+ > span {
|
|
|
+ display: block;
|
|
|
+ &.title {
|
|
|
+ font-size: 18px;
|
|
|
+ color: #111111;
|
|
|
+ font-weight: bold;
|
|
|
+ }
|
|
|
+ &.txt {
|
|
|
+ font-size: 15px;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
&:nth-child(1) {
|
|
|
- > .icon {
|
|
|
+ margin-top: 0px;
|
|
|
+ .left_icon {
|
|
|
background-image: url(~@/assets/image/staticImage/tckz_icon.png);
|
|
|
}
|
|
|
}
|
|
|
&:nth-child(2) {
|
|
|
- > .icon {
|
|
|
+ .left_icon {
|
|
|
background-image: url(~@/assets/image/staticImage/znzd_icon.png);
|
|
|
}
|
|
|
}
|
|
|
&:nth-child(3) {
|
|
|
- > .icon {
|
|
|
+ margin-bottom: 0px;
|
|
|
+ .left_icon {
|
|
|
background-image: url(~@/assets/image/staticImage/tjfx_icon.png);
|
|
|
}
|
|
|
}
|
|
|
> span {
|
|
|
- &.icon {
|
|
|
- display: block;
|
|
|
- background-repeat: no-repeat;
|
|
|
- background-size: 100%;
|
|
|
- background-position: center;
|
|
|
- width: 46px;
|
|
|
- height: 46px;
|
|
|
- border-radius: 6px;
|
|
|
- margin-right: 5px;
|
|
|
- }
|
|
|
- &.desc {
|
|
|
- flex: 1;
|
|
|
- > span {
|
|
|
- display: block;
|
|
|
- &.title {
|
|
|
- font-size: 20px;
|
|
|
- color: #111111;
|
|
|
- font-weight: bold;
|
|
|
- }
|
|
|
- &.txt {
|
|
|
- font-size: 15px;
|
|
|
- }
|
|
|
- }
|
|
|
+ &.right_icon {
|
|
|
+ width: 28px;
|
|
|
+ height: 28px;
|
|
|
+ border-radius: 50%;
|
|
|
+ background: #e0eeff;
|
|
|
+ color: #507FFF;
|
|
|
+ font-size: 18px;
|
|
|
+ font-weight: bold;
|
|
|
+ text-align: center;
|
|
|
}
|
|
|
}
|
|
|
}
|
|
|
@@ -2147,7 +2180,6 @@ export default {
|
|
|
}
|
|
|
}
|
|
|
.m-textarea-panel {
|
|
|
- border: 1px solid #f00;
|
|
|
width: 100%;
|
|
|
height: 150px;
|
|
|
background: #ffffff;
|
|
|
@@ -2155,9 +2187,9 @@ export default {
|
|
|
padding: 17px 0px 0px 19px;
|
|
|
box-shadow: 0px 8px 16px 1px rgba(0, 57, 124, 0.2);
|
|
|
border-radius: 16px 16px 16px 16px;
|
|
|
- border: 1px solid #4e69ff;
|
|
|
position: relative;
|
|
|
padding-bottom: 50px;
|
|
|
+ border: 1px solid #E5E6EA;
|
|
|
textarea {
|
|
|
border: none;
|
|
|
resize: none;
|
