287 lines
10 KiB
QML
287 lines
10 KiB
QML
import QtQuick 2.15
|
||
import QtQuick.Layouts
|
||
import QtQuick.Controls
|
||
import FluentUI.Controls
|
||
import FluentUI.impl
|
||
import Qt.labs.qmlmodels
|
||
import Qt5Compat.GraphicalEffects
|
||
|
||
Item{
|
||
id: control
|
||
Layout.preferredWidth: parent.width
|
||
Layout.preferredHeight: 93 + (p_show_detail ? detailHeight : 0)
|
||
|
||
property var p_show_detail: false
|
||
|
||
property var detailHeight: 27 * 6 + 120
|
||
|
||
Rectangle{
|
||
anchors.fill: parent
|
||
anchors.leftMargin: 10
|
||
anchors.rightMargin: 10
|
||
|
||
color: Qt.rgba(255/255,255/255,255/255, 0.05)
|
||
radius: 6
|
||
|
||
border.color: p_show_detail ? "#77ED8B" : "transparent"
|
||
border.width: 1
|
||
|
||
ColumnLayout{
|
||
anchors.fill: parent
|
||
Item{
|
||
Layout.fillWidth: true
|
||
Layout.preferredHeight: 25
|
||
Layout.leftMargin: 10
|
||
Layout.rightMargin: 10
|
||
Layout.topMargin: 5
|
||
Label{
|
||
text: "方案一"
|
||
font.pointSize: 12
|
||
}
|
||
Rectangle{
|
||
width: 97
|
||
height: 26
|
||
color: Qt.rgba(255/255,255/255,255/255, 0.05)
|
||
anchors.right: parent.right
|
||
radius: 5
|
||
Image{
|
||
source: "qrc:/qt/qml/Gallery/res/image/components/map/ico_add_lay.png"
|
||
anchors.verticalCenter: parent.verticalCenter
|
||
anchors.left: parent.left
|
||
anchors.leftMargin: 5
|
||
}
|
||
Label{
|
||
text: "添加到图层"
|
||
anchors.left: parent.left
|
||
anchors.leftMargin: 24
|
||
anchors.top: parent.top
|
||
anchors.topMargin: 3
|
||
color: "#77ED8B"
|
||
}
|
||
MouseArea{
|
||
anchors.fill: parent
|
||
hoverEnabled: true
|
||
onEntered: {
|
||
parent.color = Qt.rgba(255/255,255/255,255/255, 0.15)
|
||
}
|
||
onExited: {
|
||
parent.color = Qt.rgba(255/255,255/255,255/255, 0.05)
|
||
}
|
||
onClicked: {
|
||
console.log("open")
|
||
}
|
||
}
|
||
}
|
||
}
|
||
Rectangle{
|
||
Layout.fillWidth: true
|
||
Layout.leftMargin: 10
|
||
Layout.rightMargin: 10
|
||
color: "#888"
|
||
Layout.preferredHeight: 1
|
||
}
|
||
|
||
Item{
|
||
Layout.fillWidth: true
|
||
Layout.preferredHeight: 25
|
||
Layout.leftMargin: 10
|
||
Layout.rightMargin: 10
|
||
RowLayout{
|
||
anchors.fill: parent
|
||
Label{
|
||
text: "约4.27小时"
|
||
Layout.fillWidth: true
|
||
}
|
||
Rectangle{
|
||
color: "#888"
|
||
Layout.preferredWidth: 1
|
||
Layout.preferredHeight: 11
|
||
}
|
||
Label{
|
||
text: "224.1km"
|
||
Layout.fillWidth: true
|
||
horizontalAlignment: Label.AlignHCenter
|
||
}
|
||
Rectangle{
|
||
color: "#888"
|
||
Layout.preferredWidth: 1
|
||
Layout.preferredHeight: 11
|
||
}
|
||
Label{
|
||
text: "红绿灯27个"
|
||
Layout.fillWidth: true
|
||
horizontalAlignment: Label.AlignHCenter
|
||
}
|
||
Rectangle{
|
||
color: "#888"
|
||
Layout.preferredWidth: 1
|
||
Layout.preferredHeight: 11
|
||
}
|
||
Label{
|
||
text: "过路费46元"
|
||
Layout.fillWidth: true
|
||
horizontalAlignment: Label.AlignHCenter
|
||
}
|
||
}
|
||
}
|
||
|
||
Item{
|
||
Layout.fillWidth: true
|
||
Layout.preferredHeight: 20
|
||
Layout.leftMargin: 10
|
||
Layout.rightMargin: 10
|
||
Layout.topMargin: 0
|
||
Label{
|
||
text: "途径：G0612西和高速>315国道>G0612西和高速"
|
||
font.pointSize: 9
|
||
color: Qt.rgba(255/255,255/255,255/255, 0.6)
|
||
}
|
||
Image {
|
||
source: "qrc:/qt/qml/Gallery/res/image/components/expand.png"
|
||
fillMode: Image.PreserveAspectFit
|
||
anchors.right: parent.right
|
||
opacity: 0.6
|
||
anchors.top: parent.top
|
||
anchors.topMargin: 3
|
||
rotation: p_show_detail ? 90 : 0
|
||
Behavior on rotation {NumberAnimation { duration: 120}}
|
||
ColorOverlay{
|
||
id: img_exp
|
||
anchors.fill: parent
|
||
color: "#77ED8B"
|
||
source: parent
|
||
visible: false
|
||
}
|
||
MouseArea{
|
||
anchors.fill: parent
|
||
hoverEnabled: true
|
||
onEntered: {
|
||
img_exp.visible = true
|
||
}
|
||
onExited: {
|
||
img_exp.visible = false
|
||
}
|
||
onClicked: {
|
||
control.p_show_detail = !control.p_show_detail
|
||
}
|
||
}
|
||
}
|
||
}
|
||
|
||
Item{
|
||
Layout.fillWidth: true
|
||
Layout.fillHeight: true
|
||
}
|
||
|
||
ColumnLayout{
|
||
id: cl_detail
|
||
Layout.fillWidth: true
|
||
Layout.preferredHeight: 27 * 6 + 100
|
||
Layout.leftMargin: 10
|
||
Layout.rightMargin: 10
|
||
spacing: 20
|
||
visible: p_show_detail
|
||
|
||
Rectangle{
|
||
Layout.fillWidth: true
|
||
Layout.leftMargin: 0
|
||
Layout.rightMargin: 0
|
||
color: "#888"
|
||
Layout.preferredHeight: 1
|
||
}
|
||
|
||
RowLayout{
|
||
Layout.fillWidth: true
|
||
Layout.preferredHeight: 27
|
||
Image{
|
||
source: "qrc:/qt/qml/Gallery/res/image/components/map/nav_start.png"
|
||
}
|
||
Label{
|
||
text: "从 巴音郭楞蒙古自治州未知道路出发"
|
||
}
|
||
}
|
||
RowLayout{
|
||
Layout.fillWidth: true
|
||
Layout.preferredHeight: 27
|
||
Image{
|
||
source: "qrc:/qt/qml/Gallery/res/image/components/map/nav_right.png"
|
||
}
|
||
Column{
|
||
Label{
|
||
text: "从 塔农段"
|
||
}
|
||
Label{
|
||
text: "67.6公里 红绿灯15个 过路费6元"
|
||
color: Qt.rgba(255/255,255/255,255/255, 0.6)
|
||
font.pointSize: 8
|
||
}
|
||
}
|
||
}
|
||
RowLayout{
|
||
Layout.fillWidth: true
|
||
Layout.preferredHeight: 27
|
||
Image{
|
||
source: "qrc:/qt/qml/Gallery/res/image/components/map/nav_right_zhi.png"
|
||
rotation: -90
|
||
}
|
||
Column{
|
||
Label{
|
||
text: "从 塔农段"
|
||
}
|
||
Label{
|
||
text: "67.6公里 红绿灯15个 过路费6元"
|
||
color: Qt.rgba(255/255,255/255,255/255, 0.6)
|
||
font.pointSize: 8
|
||
}
|
||
}
|
||
}
|
||
RowLayout{
|
||
Layout.fillWidth: true
|
||
Layout.preferredHeight: 27
|
||
Image{
|
||
source: "qrc:/qt/qml/Gallery/res/image/components/map/nav_mid.png"
|
||
}
|
||
Label{
|
||
text: "从 巴音郭楞蒙古自治州未知道路出发"
|
||
}
|
||
}
|
||
RowLayout{
|
||
Layout.fillWidth: true
|
||
Layout.preferredHeight: 27
|
||
Image{
|
||
source: "qrc:/qt/qml/Gallery/res/image/components/map/nav_right_zhi.png"
|
||
}
|
||
Column{
|
||
Label{
|
||
text: "从 塔农段"
|
||
}
|
||
Label{
|
||
text: "67.6公里 红绿灯15个 过路费6元"
|
||
color: Qt.rgba(255/255,255/255,255/255, 0.6)
|
||
font.pointSize: 8
|
||
}
|
||
}
|
||
}
|
||
RowLayout{
|
||
Layout.fillWidth: true
|
||
Layout.preferredHeight: 27
|
||
Image{
|
||
source: "qrc:/qt/qml/Gallery/res/image/components/map/nav_stop.png"
|
||
}
|
||
Label{
|
||
text: "从 巴音郭楞蒙古自治州未知道路出发"
|
||
}
|
||
}
|
||
|
||
Item{
|
||
Layout.fillWidth: true
|
||
Layout.fillHeight: true
|
||
}
|
||
|
||
}
|
||
|
||
}
|
||
|
||
}
|
||
}
|