@ -0,0 +1,89 @@ | |||
<template> | |||
<view class="content"> | |||
<view class="item" v-for="(item, index) in list" :key="index" @click="tapItem(item, index)"> | |||
<view class="key"> | |||
<view class="img"> | |||
<img :src="item.imgUrl" style="width: 100%; height: 100%;"/> | |||
</view> | |||
<view class="text"> | |||
{{ item.text }} | |||
</view> | |||
</view> | |||
<view class="value"> | |||
{{ item.value }} | |||
</view> | |||
</view> | |||
</view> | |||
</template> | |||
<script> | |||
export default { | |||
name: "centerList", | |||
props: { | |||
list: {} | |||
}, | |||
data() { | |||
return { | |||
} | |||
}, | |||
methods: { | |||
// 点击列表项 | |||
tapItem(item, index) { | |||
console.log(item, index, "item,index==========") | |||
if (item.text === '联系客服') { | |||
console.log("联系客服") | |||
this.$emit('open') | |||
} else if (item.text === '我的挂单') { | |||
uni.navigateTo({ | |||
url: item.toPathUrl | |||
}) | |||
} else if (index === 2) { | |||
console.log("关于我们") | |||
} | |||
}, | |||
}, | |||
} | |||
</script> | |||
<style scoped lang="scss"> | |||
.content { | |||
background-color: #2e2e2e; | |||
.item { | |||
display: flex; | |||
justify-content: space-between; | |||
align-items: center; | |||
padding: 20rpx 40rpx; | |||
.key { | |||
display: flex; | |||
justify-content: center; | |||
align-items: center; | |||
color: #FFF; | |||
font-size: 32rpx; | |||
.img { | |||
width: 40rpx; | |||
height: 40rpx; | |||
} | |||
.text { | |||
margin-left: 20rpx; | |||
} | |||
} | |||
.value { | |||
color: #FFF; | |||
font-size: 36rpx; | |||
} | |||
} | |||
} | |||
</style> |
@ -0,0 +1,169 @@ | |||
<template> | |||
<view class="page"> | |||
<view class="item" v-for="(item, index) in 10" :key="index"> | |||
<view class="top"> | |||
<view class="service"> | |||
<text>铝制品</text> | |||
</view> | |||
<view class="status"> | |||
<text>审核通过</text> | |||
</view> | |||
</view> | |||
<view class="zhuti"> | |||
<view class="left"> | |||
<img src="../../static/order/qwe.png" style="width: 100%;height: 100%;"/> | |||
</view> | |||
<view class="right" @click="lookDetail(item,index)"> | |||
<view class="text-hidden-1"> | |||
客户姓名:张三 18888888888 | |||
</view> | |||
<view class="text-hidden-1"> | |||
商品规格:铝锭【Al>96%】 | |||
</view> | |||
<view class="text-hidden-1"> | |||
提货地址:北京市海淀区西二旗北路10号 | |||
</view> | |||
<view class="text-hidden-1"> | |||
提货日期:2021-08-01 | |||
</view> | |||
</view> | |||
<view class="tip"> | |||
<img src="../../static/order/1.svg" style="width: 100%;height: 100%;"/> | |||
</view> | |||
</view> | |||
<view class="bottom" v-if="showBackOrder"> | |||
<view @click="backOrder" class="btn"> | |||
我要撤单 | |||
</view> | |||
</view> | |||
</view> | |||
</view> | |||
</template> | |||
<script> | |||
export default { | |||
name: "orderList", | |||
props: { | |||
list: [], | |||
showBackOrder: { | |||
type: Boolean, | |||
default: false | |||
} | |||
}, | |||
data() { | |||
return {} | |||
}, | |||
methods: { | |||
// 查看详情 | |||
lookDetail(item, index) { | |||
uni.navigateTo({ | |||
url: `/pages_order/order/orderDetail2?id=1` | |||
}) | |||
}, | |||
// 撤单 | |||
backOrder() { | |||
uni.navigateTo({ | |||
url: `/pages_order/order/backOrder?id=1` | |||
}) | |||
}, | |||
} | |||
} | |||
</script> | |||
<style scoped lang="scss"> | |||
.page { | |||
display: flex; | |||
flex-direction: column; | |||
gap: 20rpx; | |||
.item { | |||
padding: 20rpx; | |||
border-radius: 40rpx; | |||
background-color: #fff; | |||
overflow: hidden; | |||
.top { | |||
display: flex; | |||
justify-content: space-between; | |||
align-items: center; | |||
font-size: 30rpx; | |||
.service { | |||
color: #000; | |||
} | |||
.status { | |||
color: #8d8d8d; | |||
font-size: 26rpx; | |||
font-weight: 600; | |||
} | |||
} | |||
.zhuti { | |||
display: flex; | |||
margin: 10rpx 0; | |||
position: relative; | |||
.left { | |||
width: 150rpx; | |||
height: 150rpx; | |||
border-radius: 10rpx; | |||
image { | |||
width: 150rpx; | |||
height: 150rpx; | |||
border-radius: 10rpx; | |||
} | |||
} | |||
.right { | |||
width: calc(100% - 160rpx); | |||
color: #777; | |||
font-size: 24rpx; | |||
padding-left: 20rpx; | |||
line-height: 40rpx; | |||
background-color: #f8f8f8; | |||
} | |||
.tip { | |||
width: 80rpx; | |||
height: 80rpx; | |||
position: absolute; | |||
bottom: -20rpx; | |||
right: -20rpx; | |||
} | |||
} | |||
.bottom { | |||
.btn { | |||
display: flex; | |||
align-items: center; | |||
justify-content: center; | |||
width: 25%; | |||
height: 50rpx; | |||
border-radius: 40rpx; | |||
color: #afafaf; | |||
font-size: 28rpx; | |||
margin: 20rpx 10rpx 0 0; | |||
background: #ffffff; | |||
border: 1px solid #757986; | |||
//margin-top: 20rpx; | |||
border-radius: 40rpx; | |||
} | |||
} | |||
} | |||
} | |||
</style> |
@ -0,0 +1,245 @@ | |||
<template> | |||
<view class="page"> | |||
<navbar title="我要撤单" leftClick @leftClick="$utils.navigateBack"/> | |||
<view class="frame"> | |||
<!--填写信息--> | |||
<view class="form"> | |||
<!--供应商名称--> | |||
<view class="item"> | |||
<view>供应商名称</view> | |||
<view> | |||
<!--<input disabled v-model="form.a" placeholder="" clearable></input>--> | |||
{{form.a}} | |||
</view> | |||
</view> | |||
<!--商品规格--> | |||
<view class="item"> | |||
<view>商品规格</view> | |||
<view> | |||
{{form.b}} | |||
</view> | |||
</view> | |||
<!--提货地点--> | |||
<view class="item"> | |||
<view>提货地点</view> | |||
<view> | |||
{{form.c}} | |||
</view> | |||
</view> | |||
<!--交货时间--> | |||
<view class="item"> | |||
<view>交货时间</view> | |||
<view> | |||
{{form.d}} | |||
</view> | |||
</view> | |||
<!--暂定数量--> | |||
<view class="tentativeQuantity"> | |||
<view class="key">暂定数量(吨)</view> | |||
<view class="value"> | |||
<uv-number-box v-model="form.tentativeQuantity"></uv-number-box> | |||
</view> | |||
</view> | |||
<!--单价--> | |||
<view class="item"> | |||
<view>单价</view> | |||
<view> | |||
<input v-model="form.price" disabled clearable></input> | |||
</view> | |||
</view> | |||
<view class="tip"> | |||
提示:提交“我要撤单”审核通过后之后不可轻易取消 | |||
</view> | |||
</view> | |||
<!--立即下单和联系我们--> | |||
<view class="btns"> | |||
<span @click="reviewSubmit" class="ontBtn"> | |||
提交审核 | |||
</span> | |||
<span @click="contactUs" class="twoBtn"> | |||
联系我们 | |||
</span> | |||
</view> | |||
</view> | |||
<!-- 联系客服弹框 --> | |||
<customerServicePopup ref="customerServicePopup" /> | |||
</view> | |||
</template> | |||
<script> | |||
import customerServicePopup from "@/components/config/customerServicePopup.vue"; | |||
export default { | |||
name: "backOrder", | |||
components: {customerServicePopup}, | |||
onLoad(options) { | |||
this.orderId = options.id | |||
}, | |||
data() { | |||
return { | |||
orderId: null, | |||
form:{ | |||
a: '湖南科技有限公司', | |||
b: '铝锭al>96%', | |||
c: '湖南省长沙市天心区天心街道天心小区1栋1单元101室', | |||
d: '2021-12-31 12:00:00', | |||
price: '¥111', | |||
} | |||
} | |||
}, | |||
methods: { | |||
// 联系我们 | |||
contactUs(){ | |||
this.$refs.customerServicePopup.open(); | |||
}, | |||
// 提交审核 | |||
reviewSubmit() { | |||
} | |||
}, | |||
} | |||
</script> | |||
<style scoped lang="scss"> | |||
.page { | |||
.frame { | |||
.title { | |||
display: flex; | |||
justify-content: center; | |||
align-items: center; | |||
font-size: 36rpx; | |||
color: #000; | |||
padding: 30rpx; | |||
} | |||
.form { | |||
margin: 20rpx; | |||
border: 1px solid #efefef; | |||
border-radius: 20rpx; | |||
overflow: hidden; | |||
.item { | |||
display: flex; | |||
align-items: center; | |||
background-color: #FFF; | |||
height: 100rpx; | |||
padding: 10rpx 0 0 20rpx; | |||
border-bottom: 1px solid #efefef; | |||
> view:nth-of-type(1) { | |||
width: 30%; | |||
// font-weight: 700; | |||
} | |||
> view:nth-of-type(2) { | |||
width: 70%; | |||
border-radius: 10rpx; | |||
overflow: hidden; | |||
input { | |||
background-color: #FFF; | |||
font-size: 28rpx; | |||
padding: 16rpx 8rpx 16rpx 15rpx; | |||
} | |||
} | |||
} | |||
.tentativeQuantity { | |||
display: flex; | |||
align-items: center; | |||
background-color: #FFF; | |||
height: 80rpx; | |||
// margin: 10rpx 0 0 0; | |||
padding: 10rpx 0 0 20rpx; | |||
.key { | |||
width: 30%; | |||
} | |||
.value { | |||
width: 70%; | |||
border-radius: 10rpx; | |||
overflow: hidden; | |||
} | |||
} | |||
.tip { | |||
display: flex; | |||
justify-content: center; | |||
align-items: center; | |||
font-size: 28rpx; | |||
color: #f95e7d; | |||
background-color: #f5f5f5; | |||
height: 40rpx; | |||
//margin-top: 20rpx; | |||
padding: 10rpx; | |||
} | |||
} | |||
.btns { | |||
width: 100%; | |||
display: flex; | |||
flex-direction: column; | |||
align-items: center; | |||
justify-content: center; | |||
gap: 20rpx; | |||
position: fixed; | |||
bottom: 80rpx; | |||
left: 0; | |||
right: 0; | |||
.ontBtn { | |||
display: flex; | |||
align-items: center; | |||
justify-content: center; | |||
width: 500rpx; | |||
height: 70rpx; | |||
border-radius: 40rpx; | |||
color: #FFF; | |||
font-size: 28rpx; | |||
margin: 20rpx 10rpx 0 0; | |||
background: $uni-color; | |||
//margin-top: 20rpx; | |||
border-radius: 40rpx; | |||
} | |||
.twoBtn { | |||
display: flex; | |||
align-items: center; | |||
justify-content: center; | |||
width: 500rpx; | |||
height: 70rpx; | |||
border-radius: 40rpx; | |||
color: #000000; | |||
font-size: 28rpx; | |||
margin: 20rpx 10rpx 0 0; | |||
background: #f1f1f1; | |||
//margin-top: 20rpx; | |||
border-radius: 40rpx; | |||
} | |||
} | |||
} | |||
} | |||
</style> |
@ -0,0 +1,416 @@ | |||
<template> | |||
<view class="page"> | |||
<navbar title="挂单详情" leftClick @leftClick="$utils.navigateBack"/> | |||
<view class="info"> | |||
<view class="flex"> | |||
<!--订单基本信息--> | |||
<view class="server-item"> | |||
<view class="img-box"> | |||
<img src="../../static/image/address/selectIcon.png" style="width: 100%;height: 100%;"/> | |||
</view> | |||
<view class="server-info"> | |||
<view class="server-title"> | |||
铝制品 | |||
</view> | |||
<view class="current-price"> | |||
<text class="unit">产品规格:</text> | |||
<text class="text">铝锭al>96%</text> | |||
</view> | |||
<view class="sales-volume" style="margin-top: 5px;"> | |||
<view class="desc">提货日期:2021-08-10</view> | |||
</view> | |||
</view> | |||
</view> | |||
<!--收货地址--> | |||
<view class="line address"> | |||
<view class="address-top"> | |||
<view class=""> | |||
收货地址 | |||
</view> | |||
<view class="copy"> | |||
<img style="width:40rpx;height:40rpx;" | |||
@click="$utils.copyText('1')" | |||
src="../static/order/copy.png"> | |||
</view> | |||
</view> | |||
<view class="addressDetail"> | |||
<view class="">张三 13812345678</view> | |||
<view class=""> | |||
北京市海淀区西二旗a座101北京市海淀区西二旗a座101北京市海淀区西二旗a座101北京市海淀区西二旗a座101 | |||
</view> | |||
</view> | |||
</view> | |||
<!-- 订单信息 --> | |||
<view class="line"> | |||
<view class="t min_tips"> | |||
<view class=""> | |||
订单信息 | |||
</view> | |||
</view> | |||
<view class="min_tips"> | |||
<view class=""> | |||
订单编号 | |||
</view> | |||
<view class=""> | |||
SF20210810001 | |||
</view> | |||
</view> | |||
<view class="min_tips"> | |||
<view class=""> | |||
下单时间 | |||
</view> | |||
<view class=""> | |||
2021-08-10 10:00:00 | |||
</view> | |||
</view> | |||
</view> | |||
<!-- 下单须知 --> | |||
<view class="line"> | |||
<view class="t min_tips"> | |||
<view class=""> | |||
下单须知 | |||
</view> | |||
</view> | |||
<view class="xdxz" style="line-height: 40rpx;"> | |||
<!--<uv-parse :content="content"></uv-parse>--> | |||
<view>1. 请您在收货时间前15分钟内到货,否则将视为放弃挂单。</view> | |||
<view>2. 请您在收货地址提供的手机号码收到货物</view> | |||
</view> | |||
</view> | |||
</view> | |||
<!--按钮--> | |||
<view class="btns"> | |||
<view @click="backOrder" class="oneBtn"> | |||
我要撤单 | |||
</view> | |||
<view @click="$refs.customerServicePopup.open()" class="twoBtn"> | |||
联系客服 | |||
</view> | |||
</view> | |||
</view> | |||
<!-- 联系客服弹框 --> | |||
<customerServicePopup ref="customerServicePopup"/> | |||
</view> | |||
</template> | |||
<script> | |||
import customerServicePopup from "@/components/config/customerServicePopup.vue"; | |||
export default { | |||
name: "orderDetail2", | |||
components: {customerServicePopup}, | |||
onLoad(options) { | |||
this.orderId = options.id | |||
}, | |||
data() { | |||
return { | |||
orderId: null, | |||
} | |||
}, | |||
methods: { | |||
// 撤单 | |||
backOrder() { | |||
console.log("撤单") | |||
uni.navigateTo({ | |||
url: `/pages_order/order/backOrder?id=1` | |||
}) | |||
}, | |||
}, | |||
} | |||
</script> | |||
<style scoped lang="scss"> | |||
.page { | |||
.info { | |||
margin: 10px; | |||
padding: 20rpx; | |||
background-color: #fff; | |||
width: calc(100% - 40px); | |||
border-radius: 10px; | |||
.head-title { | |||
font-family: PingFang SC, PingFang SC-Bold; | |||
color: #2f2e2e; | |||
line-height: 30rpx; | |||
margin-left: 10rpx; | |||
} | |||
.server-item { | |||
display: flex; | |||
flex-wrap: wrap; | |||
align-items: center; | |||
justify-content: space-between; | |||
background: white; | |||
border-radius: 15rpx; | |||
box-sizing: border-box; | |||
margin: 20rpx 0rpx; | |||
width: 100%; | |||
.img-box { | |||
width: 150rpx; | |||
height: 150rpx; | |||
border-radius: 10rpx; | |||
overflow: hidden; | |||
image { | |||
width: 100%; | |||
height: 100%; | |||
} | |||
} | |||
.server-info { | |||
display: flex; | |||
flex-direction: column; | |||
justify-content: space-around; | |||
width: calc(100% - 180rpx); | |||
box-sizing: border-box; | |||
padding: 10rpx 15rpx; | |||
.server-title { | |||
display: flex; | |||
margin-bottom: 10rpx; | |||
} | |||
.coupon { | |||
display: flex; | |||
justify-content: center; | |||
align-items: center; | |||
background: #F29E45; | |||
color: white; | |||
width: 120rpx; | |||
height: 40rpx; | |||
border-radius: 10rpx; | |||
margin-left: 10rpx; | |||
font-size: 22rpx; | |||
} | |||
.time-coupon, | |||
.price { | |||
display: flex; | |||
flex-wrap: wrap; | |||
align-items: center; | |||
} | |||
.time-coupon { | |||
margin: 10rpx 0rpx; | |||
font-size: 26rpx; | |||
justify-content: space-between; | |||
width: 100%; | |||
.flex { | |||
justify-content: center; | |||
align-items: center; | |||
} | |||
image { | |||
width: 25rpx; | |||
height: 25rpx; | |||
} | |||
.time { | |||
color: #B8B8B8; | |||
margin-left: 6rpx; | |||
} | |||
} | |||
.sales-volume { | |||
display: flex; | |||
align-items: center; | |||
color: #B8B8B8; | |||
font-size: 24rpx; | |||
image { | |||
width: 25rpx; | |||
height: 25rpx; | |||
} | |||
} | |||
} | |||
} | |||
.address { | |||
.address-top { | |||
display: flex; | |||
justify-content: space-between; | |||
align-items: center; | |||
image { | |||
width: 30rpx; | |||
height: 30rpx; | |||
} | |||
} | |||
.addressDetail { | |||
color: #777; | |||
font-size: 26rpx; | |||
padding: 5px 0; | |||
} | |||
text { | |||
background-color: #F29E45; | |||
padding: 8rpx 10rpx; | |||
color: #fff; | |||
font-size: 20rpx; | |||
margin-left: 10px; | |||
border-radius: 5px; | |||
} | |||
} | |||
.min_tips { | |||
font-size: 22rpx; | |||
color: #777; | |||
display: flex; | |||
justify-content: space-between; | |||
padding: 5px 0; | |||
align-items: center; | |||
} | |||
.btns { | |||
display: flex; | |||
justify-content: center; | |||
align-items: center; | |||
gap: 40rpx; | |||
.oneBtn { | |||
display: flex; | |||
align-items: center; | |||
justify-content: center; | |||
width: 30%; | |||
height: 70rpx; | |||
border-radius: 40rpx; | |||
color: white; | |||
font-size: 28rpx; | |||
margin: 20rpx 10rpx 0 0; | |||
background: #293143; | |||
//margin-top: 20rpx; | |||
border-radius: 40rpx; | |||
} | |||
.twoBtn { | |||
display: flex; | |||
align-items: center; | |||
justify-content: center; | |||
width: 30%; | |||
height: 70rpx; | |||
border-radius: 40rpx; | |||
color: #000000; | |||
font-size: 28rpx; | |||
margin: 20rpx 10rpx 0 0; | |||
background: #f2f2f2; | |||
//margin-top: 20rpx; | |||
border-radius: 40rpx; | |||
} | |||
} | |||
.xdxz { | |||
font-size: 24rpx; | |||
color: #777; | |||
line-height: 30rpx; | |||
} | |||
.current-price { | |||
font-size: 24rpx; | |||
color: #8c8888; | |||
.unit { | |||
} | |||
.text { | |||
} | |||
} | |||
.line { | |||
border-top: 2px dotted #00000011; | |||
padding: 20rpx 0; | |||
.t { | |||
padding: 5px 0; | |||
color: #000; | |||
font-size: 26rpx; | |||
} | |||
} | |||
.head-div { | |||
.nickname { | |||
font-size: 30rpx; | |||
font-weight: 600; | |||
text-align: left; | |||
line-height: 42rpx; | |||
display: flex; | |||
align-items: center; | |||
.tag { | |||
position: relative; | |||
display: flex; | |||
align-items: center; | |||
image { | |||
height: 45rpx; | |||
width: 90rpx; | |||
vertical-align: middle; | |||
} | |||
.auth { | |||
position: absolute; | |||
white-space: nowrap; | |||
color: $uni-color; | |||
left: 23rpx; | |||
font-size: 17rpx; | |||
} | |||
} | |||
} | |||
.days { | |||
font-size: 20rpx; | |||
font-weight: 400; | |||
text-align: left; | |||
line-height: 56rpx; | |||
display: flex; | |||
align-items: center; | |||
view { | |||
padding-left: 5px; | |||
} | |||
} | |||
} | |||
.btn-x { | |||
color: $uni-color; | |||
border: 1px solid $uni-color; | |||
padding: 10rpx 20rpx; | |||
border-radius: 30rpx; | |||
} | |||
.btns { | |||
display: flex; | |||
justify-content: center; | |||
.btn { | |||
color: $uni-color; | |||
border: 1px solid $uni-color; | |||
padding: 10rpx 20rpx; | |||
border-radius: 30rpx; | |||
} | |||
} | |||
} | |||
} | |||
</style> |
@ -0,0 +1,50 @@ | |||
<template> | |||
<view class="page"> | |||
<navbar title="我的挂单" leftClick @leftClick="$utils.navigateBack"/> | |||
<view class="frame"> | |||
<view class="content"> | |||
<orderList :orderList="list" :show-back-order="true"></orderList> | |||
</view> | |||
</view> | |||
</view> | |||
</template> | |||
<script> | |||
import orderList from "../components/order/orderList.vue"; | |||
import topbar from "@/components/base/topbar.vue"; | |||
import tabber from "@/components/base/tabbar.vue"; | |||
export default { | |||
name: "pendingOrder", | |||
components: {tabber, topbar, orderList}, | |||
data() { | |||
return { | |||
list: [], | |||
} | |||
}, | |||
methods: { | |||
}, | |||
} | |||
</script> | |||
<style scoped lang="scss"> | |||
.page { | |||
.frame { | |||
padding: 30rpx; | |||
background-color: #f5f5f5; | |||
.content { | |||
//height: calc(100vh - 120rpx); | |||
} | |||
} | |||
} | |||
</style> |
@ -0,0 +1 @@ | |||
<svg xmlns="http://www.w3.org/2000/svg" width="26.011" height="25.359" viewBox="0 0 26.011 25.359"><defs><style>.a{fill:#fff;}</style></defs><g transform="translate(-1.994 -2.32)"><g transform="translate(-291.101 0.3)"><g transform="translate(293.1 2)"><g transform="translate(-0.004 0.02)"><path class="a" d="M311.782,22.5v-.91h-2.772V19.785h2.433l-3.058-2.976,1.264-1.3,3.031,2.949,2.935-2.936,1.277,1.278-2.976,2.99h2.351v1.807H313.6v.91h2.664V24.31H313.6V27.9H311.8V24.31h-2.786V22.5Zm4.471-8.154h-1.807V6.195a1.807,1.807,0,0,0-1.807-1.807H294.509A1.815,1.815,0,0,0,292.7,6.195V24.31a1.807,1.807,0,0,0,1.807,1.807h14.5v1.807h-14.5A3.628,3.628,0,0,1,290.88,24.3V6.195a3.628,3.628,0,0,1,3.629-3.629h18.116a3.628,3.628,0,0,1,3.629,3.629Zm0,0" transform="translate(-290.88 -2.566)"/></g></g><path class="a" d="M467.913,191.663h1.248v-1.909h1.6v1.909h1v1.528h-1v1.865l1-.22a9.3,9.3,0,0,0-.044,1.63l-.94.235v3.349a1.474,1.474,0,0,1-.25.9,1.1,1.1,0,0,1-.72.4,13.091,13.091,0,0,1-1.7.088c-.073-.588-.176-1.116-.279-1.6a7.31,7.31,0,0,0,.94.059c.264,0,.411-.162.411-.485v-2.32l-1.219.294-.1-1.718,1.336-.264v-2.2h-1.248v-1.528Zm3.584,7.887h3.217v-1.425h-2.7V196.7h2.717v-1.116h1.718V196.7h2.629v1.425h-2.629v1.425h3.275v1.425H471.5Zm.4-5.713h2.82v-1.263h-2.5v-1.425h2.5v-1.4h1.718v1.4h2.644v1.425h-2.644v1.263h3.128v1.425h-7.667Zm0,0" transform="translate(-170.485 -181.022)"/></g></g></svg> |