hupeh: 调整页面

src/app.scss

@@ -13,6 +13,7 @@
 .justify-around{justify-content:space-around}
 .justify-between{justify-content:space-between}
 .justify-center{justify-content:center}
+.justify-stretch{justify-content:stretch}
 
 .flex-wrap{flex-wrap:wrap}
 
@@ -35,6 +36,8 @@
 .flex-5{flex: 5}
 .flex-shrink{flex-shrink: 0}
 
+.gap20rpx{gap: 20rpx}
+
 .w-1 {width: 10%;min-width: 75rpx}
 .w-2 {width: 20%;min-width: 150rpx}
 .w-3 {width: 30%;min-width: 225rpx}
@@ -85,6 +88,7 @@
 .mb-1 {margin-bottom: 10rpx}
 .mb-1_5 {margin-bottom: 15rpx}
 .mb-2 {margin-bottom: 20rpx}
+.mb-2_4 {margin-bottom: 24rpx}
 .mb-3 {margin-bottom: 30rpx}
 .mb-4 {margin-bottom: 40rpx}
 .mb-5 {margin-bottom: 50rpx}
@@ -329,6 +333,10 @@
 
 .border-none{border: none}
 
+.clip {
+  overflow: hidden;
+}
+
 .text-row1 {
   display: -webkit-box;
   text-overflow: ellipsis;
@@ -337,4 +345,12 @@
   -webkit-line-clamp:1;
 }
 
+.text-row3 {
+  display: -webkit-box;
+  text-overflow: ellipsis;
+  overflow: hidden;
+  -webkit-box-orient:vertical;
+  -webkit-line-clamp:3;
+}
+
 

src/components/image/image.tsx

@@ -5,8 +5,8 @@ import styles from './image.module.scss'
 import Taro from "@tarojs/taro";
 
 interface Props extends ImageProps {
-  width?: number
-  height?: number
+  width?: number | string
+  height?: number | string
   fallback?: string
 }
 
@@ -37,7 +37,11 @@ const Img: FC<Props> = ({src, mode = 'aspectFill', width, height, fallback = sha
 
   return (
     <View
-      style={{width: `${width}rpx`, height: `${height}rpx`, backgroundColor: '#F8F8F8'}}
+      style={{
+        width: `${width}rpx`,
+        height: `${height}rpx`,
+        backgroundColor: '#F8F8F8'
+    }}
       className={`${props?.className} ${styles.imgBox}`}>
       {!isError &&
         <View animation={animationData}>

src/components/loginView/index.tsx

@@ -12,6 +12,7 @@ interface Props {
   paddingTop?: number
   style?: CSSProperties
   offImage?: boolean
+  onSuccess?: VoidFunction
 }
 
 const LoginView: FC<Props> = (props) => {
@@ -39,7 +40,11 @@ const LoginView: FC<Props> = (props) => {
               setToken(token)
               setCompany(company)
               setLoading(false)
+              if (props.onSuccess) {
+                props.onSuccess()
+              } else {
                 Taro.switchTab({url: '/pages/home/home'})
+              }
             }, 1500)
           } else {
             Taro.setStorageSync('openid', catch_key)

src/components/navigationBar/navigationBar.module.scss

@@ -12,6 +12,8 @@
 .leftNode {
   position: absolute;
   display: flex;
+  left: 0;
+  bottom: 0;
   align-items: center;
 }
 

src/components/navigationBar/navigationBar.tsx

@@ -1,15 +1,15 @@
 import {Image, View} from "@tarojs/components";
-import React, {FC, useMemo} from "react";
+import React, {FC, ReactNode, useMemo} from "react";
 import styles from './navigationBar.module.scss'
 import Taro from "@tarojs/taro";
 import leftArrow from '@/static/img/leftArrow.png'
 
 interface Props {
   // 文本
-  text?: string | JSX.Element
-  children?: JSX.Element
+  text?: string | ReactNode
+  children?: ReactNode | ReactNode[]
   // 	左边节点
-  leftNode?: string | JSX.Element
+  leftNode?: string | ReactNode | ReactNode[]
   // 字体颜色
   color?: string
   // 背景颜色
@@ -27,7 +27,8 @@ const NavigationBar: FC<Props> = (props) => {
     background: props.backgroundColor,
     position: props.inherit ? 'inherit' : "sticky",
     paddingTop: globalData.statusBarHeight + 'px',
-    height: globalData.textBarHeight + 'px',
+    height: globalData.textBarHeight + globalData.statusBarHeight + 'px',
+    boxSizing: 'border-box',
   }), [props])
 
 
@@ -36,11 +37,15 @@ const NavigationBar: FC<Props> = (props) => {
     height: globalData.textBarHeight + 'px',
   }), [props])
 
-
   return (
     <View className={`${props.className} ${styles.navigation}`} style={navigationBarStyle}>
       <View style={navigationTextStyle} className={styles.leftNode}>
-        {!props.cancelBack && <Image src={leftArrow} mode='aspectFill' className={styles.arrow}/>}
+        {!props.cancelBack && <View className="flex flex-column justify-center align-center" style={{
+          width: globalData.textBarHeight + 'px',
+          height: globalData.textBarHeight + 'px',
+        }} onClick={() => Taro.navigateBack()}>
+          <Image src={leftArrow} mode='aspectFill' className={styles.arrow}/>
+        </View>}
         {props.leftNode}
       </View>
       <View style={navigationTextStyle} className={styles.text}>{props.children || props.text}</View>

src/components/tabs/tabs.scss

@@ -19,7 +19,7 @@ View::-webkit-scrollbar {
   }
 
   .tabs-item {
-    padding: 20rpx;
+    padding: 16rpx 20rpx;
     font-size: 30rpx;
     font-family: PingFang SC-Medium, PingFang SC;
     font-weight: 500;

src/components/tabs/tabs.tsx

@@ -19,6 +19,7 @@ export type OnChangOpt<T = unknown> = {
 interface TabsProps {
   current?: number | string
   tabList: TabList[]
+  height?: number | string
   onChange?: (data: OnChangOpt) => void
 }
 
@@ -47,8 +48,8 @@ const Tabs: FC<TabsProps> = (opt: TabsProps) => {
 
 
   return (
-    <View className='tabs'>
-      <ScrollView scrollX scrollLeft={left} scrollWithAnimation showScrollbar={false}>
+    <View className='tabs' style={{height: opt.height}}>
+      <ScrollView scrollX scrollLeft={left} scrollWithAnimation showScrollbar={false} style={{height: opt.height}}>
         <View className={'tabs-scroll ' + (opt.tabList.length < 5 ? 'justify-around' : '')}>
           {opt.tabList.map((d, index) => <View
             key={index}

src/pages/home/home.module.scss

@@ -13,34 +13,46 @@
   font-size: 28rpx;
   font-family: PingFang SC-Medium, PingFang SC;
   font-weight: 500;
+  backdrop-filter: blur(10px);
+  -webkit-backdrop-filter: blur(10px);
 }
 
 .header {
   width: 100%;
   overflow: hidden;
   margin-bottom: 20rpx;
+  backdrop-filter: blur(10px);
+  -webkit-backdrop-filter: blur(10px);
+
+  //&:after {
+  //  min-height: 100vh;
+  //  position: absolute;
+  //  top: 0;
+  //  left: 0;
+  //  width: 100%;
+  //  content: '';
+  //  display: block;
+  //  background: linear-gradient(to right, #DBF3F5, #B9ECD7, #C1EEDA) no-repeat;
+  //  min-height: 100vh;
+  //  background-size: 100% 600rpx;
+  //  z-index: -1;
+  //}
+}
 
-  &:after {
-    min-height: 100vh;
+.headerDivider {
+  z-index: 99;
   position: absolute;
-    top: 0;
   left: 0;
-    width: 100%;
-    content: '';
-    display: block;
-    background: linear-gradient(to right, #DBF3F5, #B9ECD7, #C1EEDA) no-repeat;
-    min-height: 100vh;
-    background-size: 100% 600rpx;
-    z-index: -1;
-  }
+  right: 0;
+  bottom: 0;
+  height: 0;
+  transform: scaleY(0.5);
+  transform-origin: bottom center;
 }
 
 .content {
   padding: 0 20px;
-  min-height: 90vh;
   box-sizing: border-box;
-  width: 100%;
-  overflow: hidden;
 
   &:after {
     position: absolute;

src/pages/home/home.tsx

@@ -1,5 +1,5 @@
 import {FC, useEffect, useState} from "react";
-import {Image, View} from "@tarojs/components";
+import {Image, View, Text} from "@tarojs/components";
 import styles from "./home.module.scss";
 import Adware from "@/pages/home/components/adware";
 import Feature from "@/pages/home/components/feature";
@@ -9,16 +9,18 @@ import MyButton from "@/components/button/MyButton";
 import {Profile} from "@/store";
 import Taro from "@tarojs/taro";
 import {HomeApi, HomeData} from "@/api";
-import logo from '@/static/img/logo.png'
+import logo from '@/static/img/logo.svg'
 import Spin from "@/components/spinner";
 import NavigationBar from "@/components/navigationBar/navigationBar";
 import {Search} from "@/pages/home/components/search";
 
-
 const Home: FC = () => {
+  const globalData = Taro.getApp().globalData
   const {token} = Profile.useContainer()
   const [data, setData] = useState<null | HomeData>(null)
   const [enable, setEnable] = useState(true)
+  const [navbarOpacity, setNavbarOpacity] = useState('0')
+  const navbarHeight = globalData.statusBarHeight +  globalData.textBarHeight;
 
   function unLogin() {
     Taro.clearStorage()
@@ -34,14 +36,31 @@ const Home: FC = () => {
     }, 600)
   }, [])
 
+  Taro.usePageScroll((e) => {
+    const v = (Math.min(e.scrollTop / navbarHeight, 1) * 0.9).toFixed(6)
+    if (v != navbarOpacity) {
+      setNavbarOpacity(v)
+    }
+  })
 
   return (
     <>
-      <NavigationBar className={styles.header}
-                     leftNode={<Image src={logo} style={{height: "80%"}} mode='heightFix'/>}
-                     cancelBack/>
-      <View className={styles.content}>
+      <NavigationBar
+        className={styles.header}
+        backgroundColor={`rgba(255,255,255,${navbarOpacity})`}
+        // backgroundColor={`rgba(255,255,255,0.89)`}
+        leftNode={
+          <>
+            <Image src={logo} style={{height: "80%"}} mode='heightFix'/>
+            <Text style={{color: '#45d4a8', fontWeight: 'bold'}}>医学道</Text>
+          </>
+        }
+        cancelBack
+      >
+        <View className={styles.headerDivider} style={{borderBottom: `1px solid rgba(200,200,200,${navbarOpacity})`}}></View>
+      </NavigationBar>
       <Spin enable={enable} overlay/>
+      <View className={styles.content} style={{paddingBottom: token ? 0 : '100rpx'}}>
         <Search/>
         <Adware data={data?.adverts || []} only_flag='routine_home_top_banner' width={710}/>
         <Feature/>
@@ -54,9 +73,9 @@ const Home: FC = () => {
         <Adware data={data?.adverts || []} only_flag='routine_home_recommend_banner' width={710}/>
         {data && <CurRecommended/>}
         {
-          !token && <View className={styles.tipsLogin} onClick={unLogin}>
+          !token && <View className={styles.tipsLogin}>
             <View>登录后享受更多服务~</View>
-            <MyButton fillet size='mini'>立即登录</MyButton>
+            <MyButton fillet size='mini' onClick={unLogin}>立即登录</MyButton>
           </View>
         }
       </View>

src/pages/index/components/videoList.tsx

@@ -87,16 +87,13 @@ export const VideoList: FC<Props> = ({categoryKey, setCategoryKey}) => {
   // }
   // })
 
-  useDidShow(() => {
+  const fetchData = () => {
     getData().then()
     getRecords().then()
-  })
-
-  useEffect(() => {
-    getData().then()
-    getRecords().then()
-  }, [page])
+  }
 
+  useDidShow(fetchData)
+  useEffect(fetchData, [page])
 
   function changeSwiper(e) {
     const index = e.detail.current
@@ -121,7 +118,7 @@ export const VideoList: FC<Props> = ({categoryKey, setCategoryKey}) => {
               {
                 !token
                 && key === 'is_required'
-                  ? <LoginView/> : value?.length ?
+                  ? <LoginView onSuccess={fetchData}/> : value?.length ?
                     <>
                       {
                         value?.map(c =>

src/pages/index/index.tsx

@@ -19,15 +19,17 @@ const Index: FC = () => {
     setCategoryKey(data.tab?.value as CoursesKey)
   }
 
-
   return (
     <View className={styles.content}>
-      <NavigationBar cancelBack
+      <NavigationBar
+        cancelBack
         leftNode={<Tabs tabList={category} onChange={tabChange} current={categoryKey}/>}
-                     backgroundColor={'transparent'}/>
+        backgroundColor={'transparent'}
+      />
       <VideoList
         categoryKey={categoryKey}
-        setCategoryKey={(categoryKey) => setCategoryKey(categoryKey)}/>
+        setCategoryKey={(categoryKey) => setCategoryKey(categoryKey)}
+      />
     </View>
   )
 }

src/pages/preview/brand/list/list.module.scss

@@ -1,22 +1,54 @@
-.box {
-  display: flex;
+.box2 {
+  //display: flex;
   margin-bottom: 20rpx;
   background-color: #fff;
   border-radius: 16rpx;
+  padding: 36rpx 24rpx;
+  box-sizing: border-box;
+  position: relative;
+
+  .bnox2Info {
+    display: flex;
+  }
+}
+
+.box {
+  display: flex;
+  //margin-bottom: 20rpx;
+  //background-color: #fff;
+  border-radius: 16rpx;
+  //margin-bottom: 6rpx;
   padding: 24rpx;
   box-sizing: border-box;
+  position: relative;
+
+  &:not(:last-child)::after {
+    position: absolute;
+    left: 24rpx;
+    right: 24rpx;
+    bottom: 0;
+    display: block;
+    content: "";
+    height: 0;
+    border-bottom: 1px solid rgba(0,0,0,0.2);
+    transform-origin: bottom center;
+    transform: scaleY(0.5);
+  }
 }
+
 .image{
   width: 128rpx;
   height:128rpx;
   background-color: #ededed;
   border-radius: 8rpx;
 }
+
 .rightBox{
   padding-left: 24rpx;
   box-sizing: border-box;
   flex: 1;
 }
+
 .desc{
   font-size: 24rpx;
   font-weight: 500;

src/pages/preview/brand/list/list.tsx

@@ -1,12 +1,60 @@
-import {FC, useCallback, useEffect, useState} from "react";
-import {View} from "@tarojs/components";
+import {FC, ReactNode, useCallback, useEffect, useState} from "react";
+import {Video, View} from "@tarojs/components";
 import {brandApi, BrandRecord} from "@/api";
-import styles from './list.module.scss'
 import Taro, {useReachBottom} from "@tarojs/taro";
 import Empty from "@/components/empty/empty";
 import Spinner from "@/components/spinner";
 import Img from "@/components/image/image";
 
+const BrandItem: FC<{ data: BrandRecord; onClick: VoidFunction }> = ({data, onClick}) => {
+  let media: ReactNode
+  if (data.introductory_video_resource) {
+    media = <Video
+      style={{width: '100%'}}
+      src={data.introductory_video_resource.url}
+    />
+  } else if (data.brand_album) {
+    media = <Img
+      width={712}
+      height={320}
+      src={data.brand_album.split(",")[0]}
+      mode="aspectFill"
+      style={{background: '#ededed'}}
+      onClick={onClick}
+    />
+  }
+
+  return (
+    <View className="bg-white flex flex-column justify-stretch mb-2_4 rounded-10 clip">
+      {media}
+      <View className="p-3" onClick={onClick}>
+        <View className='font-weight mb-2 font-32 flex align-center'>
+          <Img
+            width={32}
+            height={32}
+            src={data.logo}
+            mode='aspectFill'
+            className="rounded-10 clip"
+            style={{background: '#ededed'}}
+          />
+          <View className="ml-1 flex-1">
+            <View className="text-row1 font-28">{data.name}</View>
+          </View>
+        </View>
+        <View className="font-24 text-muted mb-4 text-row3" style={{lineHeight:1.4}}>
+          {data.graphic_introduction}
+        </View>
+        <View className="flex gap20rpx font-24 text-muted">
+          <View>2023/03.29 12:22:01</View>
+          <View className="flex-1"></View>
+          <View>文章：123</View>
+          <View>点赞：234</View>
+        </View>
+      </View>
+    </View>
+  )
+}
+
 const BrandList: FC = () => {
   const [page, setPage] = useState(1)
   const [brands, setBrands] = useState<BrandRecord[]>([])
@@ -51,24 +99,22 @@ const BrandList: FC = () => {
     }
   }, [total, brands]))
 
+  let content: ReactNode
+  if (brands.length) {
+    content = (
+      <>
+        {brands.map(d => <BrandItem data={d} key={d.id} onClick={() => jumpInfo(d.id)}/>)}
+        <View style={{width: '710rpx', textAlign: 'center', color: '#999'}} className="font-28 mt-3">{text}</View>
+      </>
+    )
+  } else {
+    content = <Empty name='空空如也'/>
+  }
 
   return (
     <View className='p-2'>
       <Spinner enable={loading} overlay/>
-      {
-        brands.length ?
-          <>
-            {brands.map((d) => <View onClick={() => jumpInfo(d.id)} className={styles.box} key={d.id}>
-              <Img width={128} height={128} src={d.logo} mode='aspectFill' className={styles.image}/>
-              <View className={styles.rightBox}>
-                <View className='font-weight mb-2 font-28'>{d.name}</View>
-                <View className={styles.desc}>{d.graphic_introduction}</View>
-              </View>
-            </View>)
-            }
-            <View style={{width: '710rpx', textAlign: 'center', color: '#999'}} className="font-28 mt-3">{text}</View>
-          </> : <Empty name='空空如也'/>
-      }
+      {content}
     </View>
   )
 }

src/pages/preview/health/health.module.scss

@@ -1,6 +1,6 @@
 .container {
   width: 100%;
-  padding: 0 20rpx;
+  padding: 20rpx;
   box-sizing: border-box;
   columns: 2;
   column-gap: 20rpx;

src/pages/preview/health/health.tsx

@@ -1,5 +1,5 @@
 import {FC, useEffect, useState} from "react";
-import {Image, ScrollView, View} from "@tarojs/components";
+import {Image, View} from "@tarojs/components";
 import {HomeApi} from "@/api";
 import Taro, {useReachBottom} from "@tarojs/taro";
 import styles from './health.module.scss'
@@ -38,21 +38,26 @@ const Health: FC = () => {
   }
 
   return (
-    <ScrollView>
+    <>
       <Spin enable={enable} overlay/>
-      <View className={styles.container}>
+      <View>
         {
           data.length > 0
-            ? data.map(d => <View key={d.id} className={styles.health} onClick={() => jump(d)}>
+            ? <>
+              <View className={styles.container}>
+                {data.map(d => <View key={d.id} className={styles.health} onClick={() => jump(d)}>
                   <Img width={370} height={345} src={d.url_path} mode='widthFix'/>
                   <Image src={play} className={styles.play} mode='aspectFit'/>
                   <View className='text-ellipsis-2 m-2 text-dark'>{d.title}</View>
                   <View className='font-26  text-muted mx-2 mb-2'>{d.video_view}观看</View>
-            </View>)
+                </View>)}
+              </View>
+              <View className="font-28 mt-3 text-center text-muted">没有更多了</View>
+            </>
             : <Empty name='暂无数据'/>
         }
       </View>
-    </ScrollView>
+    </>
   )
 }
 

src/pages/preview/illness/sort/sort.module.scss

@@ -10,7 +10,7 @@
 }
 
 .firstOrder {
-  width: 400rpx;
+  width: 200rpx;
   height: 100%;
 
   View {
@@ -83,7 +83,7 @@
 }
 
 .back {
-  padding: 25rpx 10rpx 20rpx 30rpx;
+  //padding: 25rpx 10rpx 20rpx 30rpx;
   width: 30rpx;
   height: 30rpx;
 }

src/pages/preview/illness/sort/sort.tsx

@@ -1,5 +1,5 @@
-import {Image, ScrollView, Swiper, SwiperItem, View} from "@tarojs/components";
-import {FC, useEffect, useMemo, useState} from "react";
+import {ScrollView, Image, Swiper, SwiperItem, View} from "@tarojs/components";
+import {CSSProperties, FC, useEffect, useMemo, useState} from "react";
 import {Category, HomeApi} from "@/api";
 import Taro from "@tarojs/taro";
 import styles from './sort.module.scss'
@@ -8,6 +8,7 @@ import {illnessApi} from "@/api/illness";
 import Empty from "@/components/empty/empty";
 import leftArrow from "@/static/img/leftArrow.png"
 import Spin from "@/components/spinner";
+// import NavigationBar from "@/components/navigationBar/navigationBar";
 
 const prefix = 'SORT'
 const Sort: FC = () => {
@@ -46,7 +47,7 @@ const Sort: FC = () => {
     }))
   }, [data])
 
-  const headerStyles: React.CSSProperties = {
+  const headerStyles: CSSProperties = {
     paddingTop: globalData.statusBarHeight + 'px',
     display: 'flex',
     alignItems: "center",
@@ -86,17 +87,24 @@ const Sort: FC = () => {
     <View>
       <Spin enable={enable} overlay/>
       <View style={headerStyles}>
-        <Image src={leftArrow}
+        <View
+          className="flex flex-column align-center justify-center"
+          style={{width:globalData.textBarHeight+'px', height: globalData.textBarHeight+'px'}}
+          onClick={() => Taro.navigateBack()}
+        >
+          <Image
+            src={leftArrow}
             mode='widthFix'
             className={styles.back}
-               onClick={() => Taro.navigateBack()}/>
-        <View style={{width: '100%'}}>
-          <View style={{width: '200px', margin: 'auto'}}>
+          />
+        </View>
+        <View className="flex">
           <Tabs
             tabList={getTabList}
             current={firstId}
-              onChange={(data) => firstIdChange(data.tab?.value as number)}/>
-          </View>
+            onChange={(data) => firstIdChange(data.tab?.value as number)}
+          />
+          <View className="flex-1" />
         </View>
       </View>
 
@@ -139,8 +147,6 @@ const Sort: FC = () => {
             </ScrollView>
           </SwiperItem>)
         }
-
-
       </Swiper>
     </View>
   )

src/static/css/module.scss

@@ -11,6 +11,9 @@ page,
 View::-webkit-scrollbar,
 page::-webkit-scrollbar {
   display: none;
+  width: 0;
+  height: 0;
+  color: transparent;
 }
 
 .weui-cells_checkbox .weui-check:checked + .weui-icon-checked:before,

src/static/img/logo.svg

@@ -0,0 +1,52 @@
+<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="60" height="60"
+     viewBox="0 0 60 60">
+    <defs>
+        <style>
+            .a,.f,.k{fill:none;}.a{stroke:rgba(255,0,0,0);}.b{fill:#45d4a8;}.c{fill:#ffbb8f;}.c,.d{stroke:rgba(0,0,0,0);}.d{fill:#ff9e5f;stroke-miterlimit:10;}.e{fill:#36bb92;}.f{stroke:#ebebeb;}.g{clip-path:url(#a);}.h{clip-path:url(#c);}.i{clip-path:url(#d);}.j{stroke:none;}
+        </style>
+        <clipPath id="a">
+            <rect class="a" width="30" height="31.006"/>
+        </clipPath>
+        <clipPath id="c">
+            <rect class="b" width="30" height="31.166"/>
+        </clipPath>
+        <clipPath id="d">
+            <rect class="e" width="30" height="31.166"/>
+        </clipPath>
+    </defs>
+    <g transform="translate(-159 -180)">
+        <g transform="translate(-1)">
+            <g transform="translate(175 194.975)">
+                <g transform="translate(0 0.028)">
+                    <g class="g">
+                        <g class="g">
+                            <path class="a"
+                                  d="M28.887,18.313A41.879,41.879,0,0,1,16.2,27.768,40.857,40.857,0,0,1,7.1,30.911a4.273,4.273,0,0,1-4.907-2.725,37.1,37.1,0,0,1-1.98-8.75A40.568,40.568,0,0,1,.12,12.158,44.3,44.3,0,0,1,1.756,3.1,4.279,4.279,0,0,1,6.988.153,52.15,52.15,0,0,1,20.1,5.752,46.709,46.709,0,0,1,28.731,12.4a4.27,4.27,0,0,1,.156,5.912"
+                                  transform="translate(0 0)"/>
+                        </g>
+                    </g>
+                </g>
+                <g transform="translate(0 0)">
+                    <g class="h" transform="translate(0 0)">
+                        <path class="b"
+                              d="M1.424,3.749a48.472,48.472,0,0,0,.083,23.657,4.987,4.987,0,0,0,6.127,3.587,50.257,50.257,0,0,0,20.754-11.9,4.994,4.994,0,0,0,.042-7.31A48.826,48.826,0,0,0,7.528.166a4.982,4.982,0,0,0-6.1,3.584"
+                              transform="translate(0 0)"/>
+                    </g>
+                </g>
+            </g>
+            <path class="c"
+                  d="M.5,14.519a.529.529,0,0,1-.5-.53V0A52.031,52.031,0,0,1,8.914,3.98v9.97a.529.529,0,0,1-.865.409L4.911,11.751a.528.528,0,0,0-.666-.009L.855,14.405a.521.521,0,0,1-.3.114Z"
+                  transform="translate(185.543 196.083)"/>
+            <path class="d"
+                  d="M0,14.026V0C.187.063.373.126.558.191V14.026L3.9,11.338a1.083,1.083,0,0,1,1.364.018L8.4,13.964,8.371,3.725q.274.155.543.31v9.951a.529.529,0,0,1-.53.529.516.516,0,0,1-.335-.123L4.91,11.785a.531.531,0,0,0-.338-.122.525.525,0,0,0-.327.113L.854,14.441a.523.523,0,0,1-.324.113A.529.529,0,0,1,0,14.026Z"
+                  transform="translate(185.542 196.048)"/>
+            <g transform="translate(175 194.975)">
+                <g class="i" transform="translate(0 0)">
+                    <path class="e"
+                          d="M6.253.43A4.61,4.61,0,0,1,7.42.581,48.178,48.178,0,0,1,28.136,12.092a4.565,4.565,0,0,1-.039,6.682,49.677,49.677,0,0,1-20.575,11.8,4.545,4.545,0,0,1-5.6-3.278A47.787,47.787,0,0,1,1.842,3.854,4.537,4.537,0,0,1,6.253.43m0-.43A4.975,4.975,0,0,0,1.425,3.749a48.472,48.472,0,0,0,.083,23.657,4.976,4.976,0,0,0,6.127,3.587,50.256,50.256,0,0,0,20.754-11.9,5,5,0,0,0,.042-7.31A48.828,48.828,0,0,0,7.529.166,5.026,5.026,0,0,0,6.253,0"
+                          transform="translate(0 0)"/>
+                </g>
+            </g>
+        </g>
+    </g>
+</svg>