【需求描述】
1.需要动态的从后端获取文件进行渲染
2. 获取后端域名要求加密解析
【解决方案】
说白了也就是CSS中的变量使用——var() 函数用于动态改变url
<view class="Judicial_f" :style="{ '--j': Judicial, '--j1': Judicial1, '--j2': Judicial2 }">
// script 如下
data() {
return {
Judicial: "url(" + this.$getPicture("attachment/picture/home/ui/Judicial-l.png") + ")",
Judicial1: "url(" + this.$getPicture("attachment/picture/home/ui/Judicial-r-t.png") + ")",
Judicial2: "url(" + this.$getPicture("attachment/picture/home/ui/Judicial-r-b.png") + ")",
list: [],
list1: [],
DataTitle: "",
mode: "dot",
};
},
这里的this.$getPicture这个是全局获取baseURL的方法
// main.js
/**
* 获取图片url
*/
Vue.prototype.$getPicture = function (value) {
const url = uni.$u.http.config.baseURL + value
return url
};
完整代码如下:
<template>
<view class="top1">
<view class="home-body">
<!-- 司法鉴定 -->
<view class="Judicial">
<view class="Judicial_t">
<img style="padding-right: 10px" class="Health_img"
:src="this.$getPicture('attachment/picture/home/ui/title-icon.png')" />
<span style="font-size: 20px; font-weight: 600">司法鉴定</span>
</view>
<view class="Judicial_f" :style="{ '--j': Judicial, '--j1': Judicial1, '--j2': Judicial2 }">
<view class="Judicial_f-left" style="width: 48%" @click="goJudge(0)">
<view class="J-text">
<span style="font-size: 15px; font-weight: 600">鉴定咨询</span>
<span style="font-size: 10px; color: #999">Appraisal consultati</span>
</view>
</view>
<view class="Judicial_f-right" style="width: 48%">
<view class="Jr-t" @click="goJudge(1)">
<view class="J-text">
<span style="font-size: 15px; font-weight: 600">预约鉴定</span>
<span style="font-size: 0.35rem; color: #999">Appraisal consultati</span>
</view>
</view>
<view class="Jr-b" @click="goJudge(2)">
<view class="J-text">
<span style="font-size: 15px; font-weight: 600">法医鉴定</span>
<span style="font-size: 0.35rem; color: #999">Appraisal consultati</span>
</view>
</view>
</view>
</view>
</view>
</view>
</view>
</template>
<script>
import {
getTitle,
banner,
indexGoodsList
} from "../../api/home.js";
export default {
onPullDownRefresh: function() {
//下拉刷新的时候请求一次数据
this.getTitle();
},
data() {
return {
Judicial: "url(" + this.$getPicture("attachment/picture/home/ui/Judicial-l.png") + ")",
Judicial1: "url(" + this.$getPicture("attachment/picture/home/ui/Judicial-r-t.png") + ")",
Judicial2: "url(" + this.$getPicture("attachment/picture/home/ui/Judicial-r-b.png") + ")",
list: [],
list1: [],
DataTitle: "",
mode: "dot",
};
},
};
</script>
<style lang="scss" scoped>
.top1 {
height: 100%;
overflow: auto;
padding-bottom: 1rem;
}
.home-title {
position: absolute;
left: 5%;
top: 75px;
font-size: 20px;
font-weight: 500;
color: rgba(255, 255, 255, 1);
opacity: 0.9;
text-shadow: 0px 2px 10px rgba(33, 165, 191, 0.1);
z-index: 1;
width: 90%;
display: flex;
align-items: center;
justify-content: space-between;
}
.home-title .iconfont {
font-size: 15px;
}
.ad-image {
position: absolute;
width: 94%;
height: 2.75rem;
left: 3%;
top: 115px;
z-index: 1;
}
@mixin H-background($url) {
width: 48%;
background: url($url) no-repeat right 14px;
background-size: 100%;
height: 2rem;
text-align: left;
span {
position: relative;
top: 40%;
left: 12%;
font-size: 15px;
font-weight: 600;
}
}
@mixin H-Judicial($url, $h) {
background: $url no-repeat right;
background-size: 100%;
height: $h;
text-align: left;
}
.heads {
height: 250px;
}
.head-img {
position: relative;
width: 100%;
height: 210px;
top: 0px;
z-index: 0;
}
.img-header {
width: 100%;
height: 100%;
}
.Health {
margin: 10px 15px;
background: #ffffff;
border-radius: 10px;
padding: 15px;
&_t {
display: flex;
align-items: center;
}
&_img {
width: 25rpx;
height: 25rpx;
}
&_f {
display: grid;
grid-gap: 10px;
.hf-button {
display: flex;
flex-direction: column;
align-items: center;
margin: 15px 0px;
span {
font-weight: 600;
font-size: 15px;
padding-top: 0.2rem;
}
img {
width: 50px;
height: 50px;
}
}
}
}
.Judicial {
margin: 10px 15px;
background: #ffffff;
border-radius: 10px;
padding: 15px;
&_t {
display: flex;
align-items: center;
}
&_f {
display: flex;
justify-content: space-between;
margin-top: 15px;
.J-text {
display: flex;
flex-direction: column;
position: relative;
top: 20%;
left: 10%;
}
&-left {
@include H-Judicial(var(--j), 170px);
}
&-right {
display: flex;
flex-direction: column;
justify-content: space-between;
.Jr-t {
@include H-Judicial(var(--j1), 85px);
}
.Jr-b {
@include H-Judicial(var(--j2), 85px);
}
}
}
}
.HealthyMall {
margin: 10px 15px;
background: #ffffff;
border-radius: 10px;
padding: 15px;
&_t {
display: flex;
justify-content: space-between;
.Ht1 {
display: flex;
align-items: center;
}
.Ht2 {
@extend .Ht1;
}
}
.el-card {
border: 0 solid #ebeef5;
}
.images {
width: 2.6rem;
height: 2.6rem;
}
.HS-list {
margin-top: 15px;
}
.scroll-list {
@include flex(column);
&__goods-item {
margin-right: 20px;
&__image {
width: 80px;
height: 80px;
border-radius: 4px;
}
&__text {
color: #f56c6c;
text-align: center;
font-size: 15px;
margin-top: 5px;
}
}
&__show-more {
background-color: #fff0f0;
border-radius: 3px;
padding: 3px 6px;
@include flex(column);
align-items: center;
&__text {
font-size: 12px;
width: 12px;
color: #f56c6c;
line-height: 16px;
}
}
}
}
</style>
完结~