标签：SVN uniapp 简书 13.782633 3E% path% 3C 173.470027 id
实现效果
1.打开阿里巴巴矢量库，找到想要的图标，赋值SVN代码
2.打开下方网址，将复制的svn代码赋值到网址指定位置，即可得到uniapp和小程序需要的SVN代码
https://codepen.io/jakob-e/pen/doMoML
3.代码
<template>
<view class="display ">
<view class="display justifybetween">
<view class="contentbox1item " v-for="(item,index) in list1" :key="index">
<view @click="golink(item.url)">
<view class="justifycenter display ">
<view class="images">
<view :class="item.src"></view>
</view>
</view>
</view>
</view>
</view>
</view>
</template>
<script>
export default {
data() {
return {
list1: [{
//对应style中的class名
src: 'recycling',
//url对应自己的界面路径
url: '/pages/recycling/recycling'
},
{
src: 'integral',
url: '/pages/integral/integral'
},
],
},
},
methods: {
golink(url) {
uni.navigateTo({
url: url
})
},
}
}
</script>
<style>
.recycling {
background-size: 50upx 50upx;
width: 50upx;
height: 50upx;
//svn代码块
background-image: url("data:image/svg+xml,%3Csvg t='1641898778587' class='icon' viewBox='0 0 1241 1024' version='1.1' xmlns='http://www.w3.org/2000/svg' p-id='2667' width='16' height='16'%3E%3Cpath d='M194.333316 827.233078a130.501274 130.501274 0 0 1-130.501274-130.501274v-204.016992q0-8.796753 0.77334-17.40017H63.832042l0.918342-1.933352a194.930237 194.930237 0 0 1 60.610592-123.106203l93.525913-189.903521h470.481261v136.833003h356.220146a130.501274 130.501274 0 0 1 130.501274 130.501274v399.672237z' fill='%23333333' p-id='2668'%3E%3C/path%3E%3Cpath d='M194.333316 891.227037A194.543567 194.543567 0 0 1 0.031418 696.876805v-204.161993c0-3.866704 0-7.781743 0.241669-11.648447a64.042292 64.042292 0 0 1 1.981687-22.523554 258.875861 258.875861 0 0 1 70.664023-146.209761l88.740867-180.23676a63.993958 63.993958 0 0 1 57.42056-35.718682h470.481261a63.993958 63.993958 0 0 1 63.993959 63.993958v72.839045h292.226187a194.543567 194.543567 0 0 1 194.301897 194.301897v399.672237a63.993958 63.993958 0 0 1-63.993958 63.993958z m-65.782309-410.837346v0.676674q-0.531672 5.84839-0.531672 11.745114v204.161994a66.410649 66.410649 0 0 0 66.313981 66.313981h917.762296V427.560842a66.410649 66.410649 0 0 0-66.313981-66.313981h-356.220146a63.993958 63.993958 0 0 1-63.993958-63.993958V224.413858h-366.853582l-75.932409 154.184839a63.993958 63.993958 0 0 1-13.630133 18.41518 130.936279 130.936279 0 0 0-40.745398 82.699141z' fill='%23333333' p-id='2669'%3E%3C/path%3E%3Cpath d='M564.280262 0h531.381856a145.581422 145.581422 0 0 1 145.581422 145.581422v368.786934H564.280262A145.581422 145.581422 0 0 1 418.69884 368.786935V145.581422A145.581422 145.581422 0 0 1 564.280262 0zM344.699784 975.956197a125.667894 125.667894 0 1 1 125.667894-125.667893 125.667894 125.667894 0 0 1-125.716227 125.667893z' fill='%23FFFFFF' p-id='2670'%3E%3C/path%3E%3Cpath d='M344.651451 772.954215a77.334089 77.334089 0 1 0 77.334088 77.334089 77.575758 77.575758 0 0 0-77.334088-77.334089m0-95.990937a173.470027 173.470027 0 1 1-173.470028 173.470027 173.470027 173.470027 0 0 1 173.470028-173.470027z' fill='%23333333' p-id='2671'%3E%3C/path%3E%3Cpath d='M917.310376 975.956197a125.667894 125.667894 0 1 1 125.667894-125.667893 125.667894 125.667894 0 0 1-125.667894 125.667893z' fill='%23F8FAF9' p-id='2672'%3E%3C/path%3E%3Cpath d='M917.310376 772.954215a77.334089 77.334089 0 1 0 77.334089 77.334089 77.575758 77.575758 0 0 0-77.334089-77.334089m0-95.990937a173.470027 173.470027 0 1 1-173.470027 173.470027 173.470027 173.470027 0 0 1 173.470027-173.470027z' fill='%23333333' p-id='2673'%3E%3C/path%3E%3Cpath d='M328.121289 307.258001L248.418844 470.867932a48.527141 48.527141 0 0 1-87.242519-42.533749l79.702445-163.609931a48.527141 48.527141 0 1 1 87.242519 42.485415z' fill='%23FFFFFF' p-id='2674'%3E%3C/path%3E%3C/svg%3E");
}
.integral {
background-size: 50upx 50upx;
width: 50upx;
height: 50upx;
background-image: url("data:image/svg+xml,%3Csvg t='1641898802211' class='icon' viewBox='0 0 1024 1024' version='1.1' xmlns='http://www.w3.org/2000/svg' p-id='2813' width='16' height='16'%3E%3Cpath d='M312.178738 41.30972h402.177994a13.782633 13.782633 0 0 1 13.782633 13.782633v443.487715a13.782633 13.782633 0 0 1-13.782633 13.782633H312.178738a13.782633 13.782633 0 0 1-13.782633-13.782633V55.092353a13.782633 13.782633 0 0 1 13.782633-13.782633z' fill='%23FFFFFF' p-id='2814'%3E%3C/path%3E%3Cpath d='M714.318553 553.596063H312.140559a55.168711 55.168711 0 0 1-55.092353-55.015995V55.092353A55.168711 55.168711 0 0 1 312.140559 0h402.177994a55.168711 55.168711 0 0 1 55.092353 55.092353v443.487715a55.168711 55.168711 0 0 1-55.092353 55.015995z m-374.612728-82.61944h347.085641V82.61944H339.705825z' fill='%23FFFFFF' p-id='2815'%3E%3C/path%3E%3Cpath d='M507.159089 220.713023a5.497782 5.497782 0 0 1 9.888371 0l119.767645 245.185788c0.80176 1.641699 2.405279 2.78707 277.027105 39.858916a5.497782 5.497782 0 0 1 3.054323 9.468402l-198.760076 188.184482a5.535961 5.535961 0 0 0-1.641698 5.001454l48.869169 267.787778a5.497782 5.497782 0 0 1-7.979419 5.841393l-242.742329-128.777898a5.497782 5.497782 0 0 0-5.15417 0l-242.742329 128.777898a5.497782 5.497782 0 0 1-7.979419-5.841393l48.86917-267.787778a5.535961 5.535961 0 0 0-1.641699-5.001454l-198.760076-188.184482a5.497782 5.497782 0 0 1 3.054323-9.468402c274.660005-37.071847 276.225346-38.179039 277.027106-39.858916z' fill='%23333333' p-id='2816'%3E%3C/path%3E%3Cpath d='M264.225865 1023.923642a46.807502 46.807502 0 0 1-46.0821-55.168711l45.394877-248.736438-184.672011-174.859998a46.807502 46.807502 0 0 1 25.923568-80.405056c143.438649-19.356773 222.43108-30.275978 254.272398-35.162894l110.910108-227.050744a46.807502 46.807502 0 0 1 83.993885 0l110.910108 227.050744c31.879497 4.886917 110.719213 15.806122 254.310578 35.162894a46.807502 46.807502 0 0 1 25.923567 80.405056l-184.672011 174.859998 45.394877 248.698259a46.807502 46.807502 0 0 1-37.759069 54.481488 47.571082 47.571082 0 0 1-30.123262-4.619664l-226.096267-119.958539-225.981731 119.882181a47.074755 47.074755 0 0 1-21.647515 5.421424zM190.043992 536.606391l144.393125 136.757317a46.692964 46.692964 0 0 1 13.858991 42.378733l-35.582864 195.094888 177.456173-94.14951a47.609261 47.609261 0 0 1 43.867715 0l177.456173 94.14951-35.621044-195.094888a46.692964 46.692964 0 0 1 13.858991-42.378733l144.431304-136.757317c-85.062898-11.453712-137.940867-18.898624-167.529622-23.251035a712.611759 712.611759 0 0 1-32.98669-5.306887 44.974908 44.974908 0 0 1-33.941165-24.090973l-87.620894-179.441482-87.582715 179.441482a44.974908 44.974908 0 0 1-33.979345 24.090973c-5.841393 1.18355-15.997017 2.825249-32.986689 5.306887-29.512397 4.390589-82.390366 11.720965-167.491444 23.289214z' fill='%23333333' p-id='2817'%3E%3C/path%3E%3Cpath d='M383.764435 698.29462a41.157004 41.157004 0 0 1-29.206964-12.102755l-90.904292-90.904292a41.347899 41.347899 0 1 1 58.452109-58.452108l90.904291 90.904291a41.30972 41.30972 0 0 1-29.206965 70.516685z' fill='%23FFFFFF' p-id='2818'%3E%3C/path%3E%3C/svg%3E");
}
.display {
display: flex;
}
.justifycenter {
justify-content: center;
}
.justifybetween {
justify-content: space-between;
}
.contentbox1item {
width: 23%;
padding: 40upx 0upx;
}
.images image {
height: 50upx;
width: 50upx;
}
</style>
标签：SVN,uniapp,简书,13.782633,3E%,path%,3C,173.470027,id 来源： https://blog.csdn.net/m0_61169066/article/details/122836617
本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享； 2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关； 3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关； 4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除； 5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。