|
|
@@ -214,9 +214,35 @@ export default function Component(props: {
|
|
|
// console.log(svg2)
|
|
|
// debugger
|
|
|
|
|
|
+ var svgLine = `<svg xmlns="http://www.w3.org/2000/svg" width="100" height="${rpxToPx(28)}">`;
|
|
|
+ var svgNumber = `<svg xmlns="http://www.w3.org/2000/svg" width="${list.length * 10 - 8+60}" height="${rpxToPx(38)}">`;
|
|
|
+ for (var i = 0; i < 10; i++) {
|
|
|
+ var obj = list[i];
|
|
|
+ svgLine += `<line x1="${i * 10 + 1}" y1="0" x2="${i * 10 + 1}" y2="${obj.showBig ? rpxToPx(28) : obj.showMiddle ? rpxToPx(24) : rpxToPx(16)}" stroke="${props.themeColor}" stroke-width="2"/>`
|
|
|
+
|
|
|
+ }
|
|
|
+ for (var i = 0; i < list.length; i++) {
|
|
|
+ var obj = list[i];
|
|
|
+ if (obj.showBig) {
|
|
|
+ //字体设置参考 https://segmentfault.com/a/1190000006110417
|
|
|
+ svgNumber += `<text x="${i * 10+1+30}" y="${rpxToPx(2 + 36)}" text-anchor="middle" fill="white" font-family="PingFang SC,Helvetica Neue,Helvetica,Arial,Hiragino Sans GB,Heiti SC,Microsoft YaHei" font-size="${rpxToPx(36)}">${obj.value}</text>`
|
|
|
+ }
|
|
|
+ }
|
|
|
+ svgLine += `</svg>`
|
|
|
+ svgNumber += `</svg>`
|
|
|
+
|
|
|
+ var basestr = encodeURIComponent(svgLine)
|
|
|
+ var imgLines = `url("data:image/svg+xml,${basestr}");`
|
|
|
+ var basestr2 = encodeURIComponent(svgNumber)
|
|
|
+ var imgNum = `url("data:image/svg+xml,${basestr2}");`
|
|
|
+
|
|
|
+
|
|
|
+
|
|
|
+ const isLeonTest = true
|
|
|
+
|
|
|
return <View className="slidng">
|
|
|
<View className="number_bg" style={{ opacity: enableText ? 1 : 0.4 }}>
|
|
|
- <Text className="number">{current}</Text>
|
|
|
+ <Text className="number" style={{fontFamily:"PingFang SC,Helvetica Neue, Helvetica, Arial, Hiragino Sans GB, Heiti SC, Microsoft YaHei, WenQuanYi Micro Hei, sans-serif;"}}>{current}</Text>
|
|
|
<Text className="unit">{props.unit}</Text>
|
|
|
</View>
|
|
|
|
|
|
@@ -242,7 +268,7 @@ export default function Component(props: {
|
|
|
<View className="scrollPadding" style={{ width: rpxToPx(372) }} />
|
|
|
<View className="content">
|
|
|
{
|
|
|
- list.map((item, index) => {
|
|
|
+ !isLeonTest && list.map((item, index) => {
|
|
|
return <View className={(item as any).showBig ? 'slidng_item_big' : (item as any).showMiddle ? 'slidng_item_middle' : 'slidng_item'}
|
|
|
style={{ width: 2, marginRight: list.length - 1 == index ? 0 : 8, backgroundColor: props.themeColor, zIndex: 0 }} key={index}>
|
|
|
{
|
|
|
@@ -251,9 +277,16 @@ export default function Component(props: {
|
|
|
</View>
|
|
|
})
|
|
|
}
|
|
|
- {/* <View style={{ width: list.length * 10 - 8, height: 200 }}>
|
|
|
- <mysvg src={svg2} />
|
|
|
- </View> */}
|
|
|
+ {
|
|
|
+ isLeonTest && <View>
|
|
|
+ <View style={{ width: list.length * 10 - 8, height: 100 }}>
|
|
|
+ {/* <mysvg src={svg2} /> */}
|
|
|
+ <View style={{ width: list.length * 10 - 8, height: rpxToPx(28), backgroundImage: imgLines }} />
|
|
|
+ <View style={{ width: list.length * 10 - 8+60,marginLeft:-30, height: rpxToPx(38), backgroundImage: imgNum }} />
|
|
|
+ </View>
|
|
|
+ </View>
|
|
|
+ }
|
|
|
+
|
|
|
</View>
|
|
|
<View className="scrollPadding" />
|
|
|
|