236 lines
7.8 KiB
QML
236 lines
7.8 KiB
QML
import QtQuick
|
||
import QtQuick.Layouts
|
||
import QtQuick.Controls
|
||
import FluentUI.Controls
|
||
import FluentUI.impl
|
||
|
||
ColumnLayout {
|
||
anchors.fill: parent
|
||
anchors.rightMargin: 10
|
||
|
||
// 输入框
|
||
RowLayout{
|
||
Layout.preferredHeight: 50
|
||
spacing: 15
|
||
TextBox{
|
||
Layout.fillWidth: true
|
||
Layout.leftMargin: 10
|
||
Layout.preferredHeight: 35
|
||
placeholderText: "关键词"
|
||
}
|
||
Button{
|
||
text: "搜索"
|
||
Layout.preferredWidth: 90
|
||
Layout.preferredHeight: 35
|
||
}
|
||
ComboBox{
|
||
model: ListModel {
|
||
id: model
|
||
ListElement { text: "1公里内" }
|
||
ListElement { text: "5公里内" }
|
||
ListElement { text: "10公里内" }
|
||
}
|
||
Layout.rightMargin: 10
|
||
}
|
||
}
|
||
|
||
|
||
ListModel{
|
||
id: tab_model
|
||
ListElement{
|
||
title: "充电站"
|
||
}
|
||
ListElement{
|
||
title: "加氢站"
|
||
}
|
||
ListElement{
|
||
title: "煤矿"
|
||
}
|
||
ListElement{
|
||
title: "陆港"
|
||
}
|
||
ListElement{
|
||
title: "收费站"
|
||
}
|
||
ListElement{
|
||
title: "服务区"
|
||
}
|
||
}
|
||
// 过滤条件
|
||
RowLayout{
|
||
spacing: 15
|
||
Layout.leftMargin: 10
|
||
Repeater {
|
||
model: tab_model
|
||
Rectangle{
|
||
width: 80
|
||
height: 30
|
||
color: "#0C53C0"
|
||
Label{
|
||
text: model.title
|
||
anchors.centerIn: parent
|
||
}
|
||
MouseArea {
|
||
anchors.fill: parent
|
||
hoverEnabled: true
|
||
onEntered: parent.color = "#60B0EF"
|
||
onExited: parent.color = "#0C53C0"
|
||
onClicked: {
|
||
console.log("cdz")
|
||
}
|
||
}
|
||
}
|
||
}
|
||
|
||
}
|
||
// 搜索结果
|
||
ColumnLayout{
|
||
Layout.fillHeight: true
|
||
Rectangle{
|
||
Layout.fillHeight: true
|
||
Layout.fillWidth: true
|
||
Layout.leftMargin: 10
|
||
Layout.rightMargin: 10
|
||
Layout.topMargin: 10
|
||
Layout.bottomMargin: 10
|
||
color: "transparent"
|
||
border.color: "#ffffff"
|
||
border.width: 2
|
||
|
||
ColumnLayout{
|
||
anchors.fill: parent
|
||
Rectangle{
|
||
Layout.leftMargin: 2
|
||
Layout.topMargin: 2
|
||
|
||
Layout.preferredWidth: parent.width - 4
|
||
height: 60
|
||
color: "transparent"
|
||
|
||
ColumnLayout{
|
||
anchors.fill: parent
|
||
spacing: 5
|
||
RowLayout{
|
||
Layout.fillWidth: true
|
||
Label{
|
||
Layout.fillWidth: true
|
||
Layout.leftMargin: 5
|
||
text: "新电青丰1号站充电桩"
|
||
font.pointSize: 14
|
||
}
|
||
Label{
|
||
Layout.preferredWidth: 90
|
||
Layout.rightMargin: 5
|
||
text: "2.7km"
|
||
horizontalAlignment: Text.AlignRight
|
||
font.pointSize: 8
|
||
}
|
||
}
|
||
RowLayout{
|
||
Layout.fillWidth: true
|
||
Layout.fillHeight: true
|
||
spacing: 5
|
||
Label{
|
||
Layout.leftMargin: 5
|
||
Layout.fillWidth: true
|
||
text: "营业中，充电桩：6个，空闲：2个，实时电价：1元/kwh，服务费：1.2元/kwh"
|
||
font.pointSize: 8
|
||
}
|
||
|
||
Button{
|
||
text: "查看"
|
||
highlighted: true
|
||
}
|
||
Button{
|
||
text: "导航去"
|
||
highlighted: true
|
||
Layout.rightMargin: 5
|
||
}
|
||
}
|
||
}
|
||
MouseArea {
|
||
anchors.fill: parent
|
||
hoverEnabled: true
|
||
onEntered: parent.color = "#292929"
|
||
onExited: parent.color = "transparent"
|
||
}
|
||
|
||
Rectangle{
|
||
width: parent.width
|
||
height: 1
|
||
color: "#fff"
|
||
anchors.bottom: parent.bottom
|
||
}
|
||
}
|
||
|
||
Rectangle{
|
||
Layout.leftMargin: 2
|
||
Layout.topMargin: 2
|
||
|
||
Layout.preferredWidth: parent.width - 4
|
||
height: 60
|
||
color: "transparent"
|
||
|
||
ColumnLayout{
|
||
anchors.fill: parent
|
||
spacing: 5
|
||
RowLayout{
|
||
Layout.fillWidth: true
|
||
Label{
|
||
Layout.fillWidth: true
|
||
Layout.leftMargin: 5
|
||
text: "青河县鹏新矿业"
|
||
font.pointSize: 14
|
||
}
|
||
Label{
|
||
Layout.preferredWidth: 90
|
||
Layout.rightMargin: 5
|
||
text: "2.7km"
|
||
horizontalAlignment: Text.AlignRight
|
||
font.pointSize: 8
|
||
}
|
||
}
|
||
RowLayout{
|
||
Layout.fillWidth: true
|
||
Layout.fillHeight: true
|
||
spacing: 5
|
||
Label{
|
||
Layout.leftMargin: 5
|
||
Layout.fillWidth: true
|
||
text: "营业中，煤炭价格：300元/吨，装载车辆：35辆，周边道路：畅通"
|
||
font.pointSize: 8
|
||
}
|
||
|
||
Button{
|
||
text: "查看"
|
||
highlighted: true
|
||
}
|
||
Button{
|
||
text: "导航去"
|
||
highlighted: true
|
||
Layout.rightMargin: 5
|
||
}
|
||
}
|
||
}
|
||
MouseArea {
|
||
anchors.fill: parent
|
||
hoverEnabled: true
|
||
onEntered: parent.color = "#292929"
|
||
onExited: parent.color = "transparent"
|
||
}
|
||
Rectangle{
|
||
width: parent.width
|
||
height: 1
|
||
color: "#fff"
|
||
anchors.bottom: parent.bottom
|
||
}
|
||
}
|
||
|
||
Item{
|
||
Layout.fillHeight: true
|
||
}
|
||
}
|
||
}
|
||
}
|
||
}
|