Skip to content

E
Element
Commit 096b9f86 authored by 杨奕's avatar 杨奕 Committed by GitHub
Browse files
Options

Merge pull request #110 from baiyaaaaa/master 

update docs site
parents 3c3bfebe 9a1a1821
Hide whitespace changes
Inline Side-by-side
Showing with 68 additions and 348 deletions
examples/assets/images/banner-bg.svg 100644 → 100755
View file @ 096b9f86
...@@ -86,7 +86,7 @@ ...@@ -86,7 +86,7 @@
<feOffset dx="0.5" dy="0" in="SourceAlpha" result="shadowOffsetOuter1"></feOffset> <feOffset dx="0.5" dy="0" in="SourceAlpha" result="shadowOffsetOuter1"></feOffset>
<feColorMatrix values="0 0 0 0 0.494117647 0 0 0 0 0.670588235 0 0 0 0 0.929411765 0 0 0 1 0" type="matrix" in="shadowOffsetOuter1"></feColorMatrix> <feColorMatrix values="0 0 0 0 0.494117647 0 0 0 0 0.670588235 0 0 0 0 0.929411765 0 0 0 1 0" type="matrix" in="shadowOffsetOuter1"></feColorMatrix>
</filter> </filter>
<polygon id="path-47" points="67.155153 22.89922 79.5298116 19.9863847 79.5298116 44.1388753 67.155153 47.0200742"></polygon> <polygon id="path-47" points="68 22.9128354 80.3746586 20 80.3746586 44.1524906 68 47.0336895"></polygon>
<filter x="-50%" y="-50%" width="200%" height="200%" filterUnits="objectBoundingBox" id="filter-48"> <filter x="-50%" y="-50%" width="200%" height="200%" filterUnits="objectBoundingBox" id="filter-48">
<feOffset dx="0.5" dy="0" in="SourceAlpha" result="shadowOffsetOuter1"></feOffset> <feOffset dx="0.5" dy="0" in="SourceAlpha" result="shadowOffsetOuter1"></feOffset>
<feColorMatrix values="0 0 0 0 0.399626285 0 0 0 0 0.609381731 0 0 0 0 0.91236182 0 0 0 1 0" type="matrix" in="shadowOffsetOuter1"></feColorMatrix> <feColorMatrix values="0 0 0 0 0.399626285 0 0 0 0 0.609381731 0 0 0 0 0.91236182 0 0 0 1 0" type="matrix" in="shadowOffsetOuter1"></feColorMatrix>
...@@ -237,11 +237,6 @@ ...@@ -237,11 +237,6 @@
</g> </g>
<path d="M217.324845,66.6102349 C210.394808,69.0648935 212.014476,72.5604878 212.005429,77.0179572 L220.421524,77.0179572 C220.432381,75.2992633 219.347234,71.4116926 223.232513,70.4599518 C219.347234,71.4116926 236.356324,66.0319491 236.443181,66.6102349 C236.466705,66.7682757 226.036481,63.9019464 226.036481,63.9019464" id="Combined-Shape" fill-opacity="0.200000018" fill="#BCC4D1"></path> <path d="M217.324845,66.6102349 C210.394808,69.0648935 212.014476,72.5604878 212.005429,77.0179572 L220.421524,77.0179572 C220.432381,75.2992633 219.347234,71.4116926 223.232513,70.4599518 C219.347234,71.4116926 236.356324,66.0319491 236.443181,66.6102349 C236.466705,66.7682757 226.036481,63.9019464 226.036481,63.9019464" id="Combined-Shape" fill-opacity="0.200000018" fill="#BCC4D1"></path>
<path d="M256.324845,78.6102349 C250.384193,79.4679693 251.014476,84.5604878 251.005429,89.0179572 L259.421524,89.0179572 C259.432381,87.2992633 259.063665,83.5528001 261.920947,82.1573828 C258.035667,83.1091237 275.356324,78.0319491 275.443181,78.6102349 C275.466705,78.7682757 265.036481,75.9019464 265.036481,75.9019464" id="Combined-Shape" fill-opacity="0.200000018" fill="#BCC4D1"></path> <path d="M256.324845,78.6102349 C250.384193,79.4679693 251.014476,84.5604878 251.005429,89.0179572 L259.421524,89.0179572 C259.432381,87.2992633 259.063665,83.5528001 261.920947,82.1573828 C258.035667,83.1091237 275.356324,78.0319491 275.443181,78.6102349 C275.466705,78.7682757 265.036481,75.9019464 265.036481,75.9019464" id="Combined-Shape" fill-opacity="0.200000018" fill="#BCC4D1"></path>
<g id="Group-22" transform="translate(95.000000, 73.000000)">
<polygon id="Rectangle-3" fill="#BDCEEB" opacity="0.300000012" points="3 1 90 26.89678 90 49 3 24"></polygon>
<polygon id="Rectangle-3-Copy" fill="#D6E8FB" opacity="0.639458955" points="3.37286438 24 89.907135 48.9508495 89.907135 50.6262341 0 24.8664486"></polygon>
<polygon id="Rectangle-4" fill="#CCE7FF" points="0 0 3.4625074 1.0179419 3.4625074 24.0179419 0 24.9070677"></polygon>
</g>
<g id="Group-21" transform="translate(95.000000, 133.000000)"> <g id="Group-21" transform="translate(95.000000, 133.000000)">
<polygon id="Rectangle-3" fill="#BDCEEB" opacity="0.300000012" points="3 1 71 21 71 44 3 24"></polygon> <polygon id="Rectangle-3" fill="#BDCEEB" opacity="0.300000012" points="3 1 71 21 71 44 3 24"></polygon>
<polygon id="Rectangle-3-Copy" fill="#C0DBF8" opacity="0.639458955" points="3.37286438 24 71 43.9434662 71 45.7272129 0 24.8664486"></polygon> <polygon id="Rectangle-3-Copy" fill="#C0DBF8" opacity="0.639458955" points="3.37286438 24 71 43.9434662 71 45.7272129 0 24.8664486"></polygon>
...@@ -445,11 +440,13 @@ ...@@ -445,11 +440,13 @@
<use fill="#C9E2FB" fill-rule="evenodd" xlink:href="#path-65"></use> <use fill="#C9E2FB" fill-rule="evenodd" xlink:href="#path-65"></use>
</g> </g>
</g> </g>
<g id="title" transform="translate(185.000000, 71.000000)"> <g id="title" transform="translate(198.000000, 71.000000)">
<polygon id="Rectangle-6" fill-opacity="0.200000018" fill="#BCC4D1" points="12 11 107.310913 39.2488499 107.310913 71.595787 12 43.3839226"></polygon> <g id="Group">
<polygon id="Rectangle-3" fill="#AFCAF1" points="95 31.1094727 107.374659 28 107.374659 60.4360677 95 63.4540845"></polygon> <polygon id="Rectangle-6" fill-opacity="0.200000018" fill="#BCC4D1" points="12 11 107.310913 39.2488499 107.310913 71.595787 12 43.3839226"></polygon>
<polygon id="Rectangle-6" fill="#DAEDFE" points="0 3 95.3109131 31.2488499 95.3109131 63.595787 0 35.3839226"></polygon> <polygon id="Rectangle-3" fill="#AFCAF1" points="95 31.1094727 107.374659 28 107.374659 60.4360677 95 63.4540845"></polygon>
<polygon id="Rectangle-6" fill="#C9E1FB" points="12.370682 0 107 27.9739961 94.6952441 31 0 3.02147635"></polygon> <polygon id="Rectangle-6" fill="#DAEDFE" points="0 3 95.3109131 31.2488499 95.3109131 63.595787 0 35.3839226"></polygon>
<polygon id="Rectangle-6" fill="#C9E1FB" points="12.370682 0 107 27.9739961 94.6952441 31 0 3.02147635"></polygon>
</g>
</g> </g>
<g id="sidebar" transform="translate(93.000000, 2.000000)"> <g id="sidebar" transform="translate(93.000000, 2.000000)">
<g id="Path-22"> <g id="Path-22">
......
examples/assets/images/fankui.svg deleted 100644 → 0
View file @ 3c3bfebe
<?xml version="1.0" encoding="UTF-8" standalone="no"?>
<svg width="80px" height="80px" viewBox="0 0 80 80" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<!-- Generator: Sketch 39.1 (31720) - http://www.bohemiancoding.com/sketch -->
<title>Feedback_icon</title>
<desc>Created with Sketch.</desc>
<defs>
<path d="M26.3157895,54.7 L20,61 L20,25.3 C20,21.835 22.8421053,19 26.3157895,19 L53.6842105,19 C57.1578947,19 60,21.835 60,25.3 L60,48.4 C60,51.865 57.1578947,54.7 53.6842105,54.7 L26.3157895,54.7 Z" id="path-1"></path>
<filter x="-50%" y="-50%" width="200%" height="200%" filterUnits="objectBoundingBox" id="filter-2">
<feOffset dx="0" dy="2" in="SourceAlpha" result="shadowOffsetOuter1"></feOffset>
<feColorMatrix values="0 0 0 0 0 0 0 0 0 0.466666667 0 0 0 0 0.807843137 0 0 0 1 0" type="matrix" in="shadowOffsetOuter1"></feColorMatrix>
</filter>
</defs>
<g id="Page-1" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
<g id="Feedback_icon">
<g id="Group-18">
<path d="M40,80 C62.09139,80 80,62.09139 80,40 C80,17.90861 62.09139,0 40,0 C17.90861,0 0,17.90861 0,40 C0,62.09139 17.90861,80 40,80 Z" id="Mask" fill="#EFF5FD"></path>
<g id="Shape">
<use fill="black" fill-opacity="1" filter="url(#filter-2)" xlink:href="#path-1"></use>
<use fill="#20A0FF" fill-rule="evenodd" xlink:href="#path-1"></use>
</g>
<g id="Group" transform="translate(38.000000, 28.000000)" fill="#FFFFFF">
<rect id="Rectangle-path" x="0" y="7" width="4" height="11"></rect>
<circle id="Oval" cx="2" cy="2" r="2"></circle>
</g>
</g>
</g>
</g>
</svg>
\ No newline at end of file
examples/assets/images/kekong.svg deleted 100644 → 0
View file @ 3c3bfebe
<?xml version="1.0" encoding="UTF-8" standalone="no"?>
<svg width="80px" height="80px" viewBox="0 0 80 80" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<!-- Generator: Sketch 39.1 (31720) - http://www.bohemiancoding.com/sketch -->
<title>Controllability_icon</title>
<desc>Created with Sketch.</desc>
<defs></defs>
<g id="Page-1" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
<g id="Controllability_icon">
<g id="Group-24">
<path d="M40,80 C62.09139,80 80,62.09139 80,40 C80,17.90861 62.09139,0 40,0 C17.90861,0 0,17.90861 0,40 C0,62.09139 17.90861,80 40,80 Z" id="Mask" fill="#EFF5FD"></path>
<g id="controls" transform="translate(16.000000, 17.000000)">
<g id="Group" transform="translate(5.000000, 0.000000)" fill="#AFCAF1">
<path d="M0,1 L0,33 C0,33.553 0.448,34 1,34 C1.552,34 2,33.553 2,33 L2,1 C2,0.447 1.552,0 1,0 C0.448,0 0,0.447 0,1 Z" id="Shape"></path>
<path d="M37,12 C36.448,12 36,12.447 36,13 L36,45 C36,45.553 36.448,46 37,46 C37.552,46 38,45.553 38,45 L38,13 C38,12.447 37.552,12 37,12 L37,12 Z" id="Shape"></path>
<path d="M19,0 C18.448,0 18,0.447 18,1 L18,16 C18,16.553 18.448,17 19,17 C19.552,17 20,16.553 20,16 L20,1 C20,0.447 19.552,0 19,0 L19,0 Z" id="Shape"></path>
<path d="M19,27 C18.448,27 18,27.447 18,28 L18,45 C18,45.553 18.448,46 19,46 C19.552,46 20,45.553 20,45 L20,28 C20,27.447 19.552,27 19,27 L19,27 Z" id="Shape"></path>
</g>
<circle id="Oval" fill="#AFB6BB" cx="6" cy="41" r="6"></circle>
<circle id="Oval" fill="#AFB6BB" cx="42" cy="9" r="6"></circle>
<circle id="Oval" fill="#0077CE" cx="24" cy="24" r="6"></circle>
<circle id="Oval" fill="#E7ECED" cx="6" cy="39" r="6"></circle>
<circle id="Oval" fill="#E7ECED" cx="42" cy="7" r="6"></circle>
<circle id="Oval" fill="#20A0FF" cx="24" cy="22" r="6"></circle>
</g>
</g>
</g>
</g>
</svg>
\ No newline at end of file
examples/assets/images/navbar_0.png
View replaced file @ 3c3bfebe View file @ 096b9f86
examples/assets/images/navbar_0.png

5.06 KB | W: | H:

examples/assets/images/navbar_0.png

14.7 KB | W: | H:

examples/assets/images/navbar_0.png
examples/assets/images/navbar_0.png
examples/assets/images/navbar_0.png
examples/assets/images/navbar_0.png
  • 2-up
  • Swipe
  • Onion skin
examples/assets/images/navbar_1.png
View replaced file @ 3c3bfebe View file @ 096b9f86
examples/assets/images/navbar_1.png

5.2 KB | W: | H:

examples/assets/images/navbar_1.png

21.2 KB | W: | H:

examples/assets/images/navbar_1.png
examples/assets/images/navbar_1.png
examples/assets/images/navbar_1.png
examples/assets/images/navbar_1.png
  • 2-up
  • Swipe
  • Onion skin
examples/assets/images/navbar_2.png
View replaced file @ 3c3bfebe View file @ 096b9f86
examples/assets/images/navbar_2.png

7.75 KB | W: | H:

examples/assets/images/navbar_2.png

28.5 KB | W: | H:

examples/assets/images/navbar_2.png
examples/assets/images/navbar_2.png
examples/assets/images/navbar_2.png
examples/assets/images/navbar_2.png
  • 2-up
  • Swipe
  • Onion skin
examples/assets/images/navbar_3.png
View replaced file @ 3c3bfebe View file @ 096b9f86
examples/assets/images/navbar_3.png

5.29 KB | W: | H:

examples/assets/images/navbar_3.png

18.9 KB | W: | H:

examples/assets/images/navbar_3.png
examples/assets/images/navbar_3.png
examples/assets/images/navbar_3.png
examples/assets/images/navbar_3.png
  • 2-up
  • Swipe
  • Onion skin
examples/assets/images/xiaolv.svg deleted 100644 → 0
View file @ 3c3bfebe
<?xml version="1.0" encoding="UTF-8" standalone="no"?>
<svg width="80px" height="80px" viewBox="0 0 80 80" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<!-- Generator: Sketch 39.1 (31720) - http://www.bohemiancoding.com/sketch -->
<title>Efficiency_icon</title>
<desc>Created with Sketch.</desc>
<defs>
<path d="M43.6603748,19.56255 L46.4332957,17.3863539 C47.2985626,16.70729 47.5414536,15.3895504 46.9704615,14.4341545 L44.060739,9.56554545 C43.4921406,8.61415464 42.1911396,8.15294772 41.1583334,8.5341334 L37.8026261,9.77265 C35.5689955,7.74945 32.8589812,6.2118 29.8520812,5.33325 L29.2951424,1.97075284 C29.1148653,0.8823361 28.0692991,0 26.9696546,0 L21.0301902,0 C19.9261358,0 18.8852541,0.880702537 18.7047023,1.97080827 L18.1477635,5.3334 C15.1410188,6.21195 12.4310045,7.7496 10.1972186,9.7728 L6.84161092,8.5342834 C5.8072857,8.15252573 4.510253,8.61029956 3.93926098,9.56569545 L1.02953845,14.4343045 C0.460940067,15.3856954 0.697235865,16.7041427 1.56670429,17.3865039 L4.3396252,19.5627 C3.99615694,20.98815 3.81417466,22.47345 3.81417466,24 C3.81417466,25.52655 3.99615694,27.01185 4.33946993,28.43745 L1.56664823,30.6136461 C0.701412305,31.29271 0.458546432,32.6104357 1.02953845,33.5658144 L3.93926098,38.4343356 C4.50785937,39.3857093 5.80883543,39.8469023 6.84161092,39.4657166 L10.1972186,38.2272 C12.4310045,40.2504 15.1410188,41.78805 18.1477635,42.6666 L18.7047023,46.0291917 C18.8849794,47.1176391 19.9305456,48 21.0301902,48 L26.9696546,48 C28.0737089,48 29.1145906,47.1192727 29.2951424,46.0291363 L29.8520812,42.66645 C32.8588259,41.7879 35.5688402,40.25025 37.8026261,38.22705 L41.1582338,39.4655666 C42.192559,39.8473243 43.489606,39.3895783 44.0606159,38.434217 L46.9704294,33.5657845 C47.5390455,32.6144282 47.3027392,31.2959605 46.4332396,30.6135388 L43.6602195,28.43715 C44.0036878,27.01185 44.18567,25.52655 44.18567,24 C44.18567,22.47345 44.0036878,20.98815 43.6603748,19.56255 Z" id="path-1"></path>
<filter x="-50%" y="-50%" width="200%" height="200%" filterUnits="objectBoundingBox" id="filter-3">
<feOffset dx="0" dy="2" in="SourceAlpha" result="shadowOffsetOuter1"></feOffset>
<feColorMatrix values="0 0 0 0 0.68627451 0 0 0 0 0.71372549 0 0 0 0 0.733333333 0 0 0 1 0" type="matrix" in="shadowOffsetOuter1"></feColorMatrix>
</filter>
</defs>
<g id="Page-1" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
<g id="Efficiency_icon">
<g id="Group-23">
<path d="M40,80 C62.09139,80 80,62.09139 80,40 C80,17.90861 62.09139,0 40,0 C17.90861,0 0,17.90861 0,40 C0,62.09139 17.90861,80 40,80 Z" id="Mask" fill="#EFF5FD"></path>
<g id="efficiency" transform="translate(16.000000, 16.000000)">
<g id="XMLID_474_">
<g id="XMLID_476_">
<mask id="mask-2" fill="white">
<use xlink:href="#path-1"></use>
</mask>
<g id="Mask">
<use fill="black" fill-opacity="1" filter="url(#filter-3)" xlink:href="#path-1"></use>
<use fill="#E7ECED" fill-rule="evenodd" xlink:href="#path-1"></use>
</g>
</g>
<ellipse id="XMLID_477_" fill="#FFFFFF" cx="24" cy="24.7741935" rx="14.7096774" ry="14.7096774"></ellipse>
<rect id="XMLID_478_" fill="#0077CE" x="23" y="15" width="2" height="12"></rect>
<rect id="XMLID_3_" fill="#20A0FF" x="23" y="25" width="10" height="2"></rect>
</g>
</g>
</g>
</g>
</g>
</svg>
\ No newline at end of file
examples/assets/images/yizhi.svg deleted 100644 → 0
View file @ 3c3bfebe
<?xml version="1.0" encoding="UTF-8" standalone="no"?>
<svg width="80px" height="80px" viewBox="0 0 80 80" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<!-- Generator: Sketch 39.1 (31720) - http://www.bohemiancoding.com/sketch -->
<title>Consistency_icon</title>
<desc>Created with Sketch.</desc>
<defs>
<circle id="path-1" cx="40" cy="40" r="40"></circle>
<rect id="path-3" x="0" y="20" width="5" height="18"></rect>
<filter x="-50%" y="-50%" width="200%" height="200%" filterUnits="objectBoundingBox" id="filter-4">
<feOffset dx="0" dy="2" in="SourceAlpha" result="shadowOffsetOuter1"></feOffset>
<feColorMatrix values="0 0 0 0 0 0 0 0 0 0.466666667 0 0 0 0 0.807843137 0 0 0 1 0" type="matrix" in="shadowOffsetOuter1"></feColorMatrix>
</filter>
<rect id="path-5" x="10" y="20" width="5" height="18" rx="1"></rect>
<filter x="-50%" y="-50%" width="200%" height="200%" filterUnits="objectBoundingBox" id="filter-6">
<feOffset dx="0" dy="2" in="SourceAlpha" result="shadowOffsetOuter1"></feOffset>
<feColorMatrix values="0 0 0 0 0 0 0 0 0 0.466666667 0 0 0 0 0.807843137 0 0 0 1 0" type="matrix" in="shadowOffsetOuter1"></feColorMatrix>
</filter>
<rect id="path-7" x="20" y="20" width="5" height="18" rx="1"></rect>
<filter x="-50%" y="-50%" width="200%" height="200%" filterUnits="objectBoundingBox" id="filter-8">
<feOffset dx="0" dy="2" in="SourceAlpha" result="shadowOffsetOuter1"></feOffset>
<feColorMatrix values="0 0 0 0 0 0 0 0 0 0.466666667 0 0 0 0 0.807843137 0 0 0 1 0" type="matrix" in="shadowOffsetOuter1"></feColorMatrix>
</filter>
<rect id="path-9" x="30" y="20" width="5" height="18" rx="1"></rect>
<filter x="-50%" y="-50%" width="200%" height="200%" filterUnits="objectBoundingBox" id="filter-10">
<feOffset dx="0" dy="2" in="SourceAlpha" result="shadowOffsetOuter1"></feOffset>
<feColorMatrix values="0 0 0 0 0 0 0 0 0 0.466666667 0 0 0 0 0.807843137 0 0 0 1 0" type="matrix" in="shadowOffsetOuter1"></feColorMatrix>
</filter>
</defs>
<g id="Page-1" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
<g id="Consistency_icon">
<mask id="mask-2" fill="white">
<use xlink:href="#path-1"></use>
</mask>
<use id="Mask" fill="#EFF5FD" xlink:href="#path-1"></use>
<g id="Group-7" mask="url(#mask-2)">
<g transform="translate(22.000000, 21.000000)">
<g id="Rectangle-path" fill="none">
<use fill="black" fill-opacity="1" filter="url(#filter-4)" xlink:href="#path-3"></use>
<use fill="#20A0FF" fill-rule="evenodd" xlink:href="#path-3"></use>
</g>
<path d="M0,6 C0,5.44771525 0.447365195,5 0.998153687,5 L30,5 L30,7 L0.998153687,7 C0.446888627,7 0,6.55613518 0,6 Z M36,6 L30,12 L30,1.8369702e-16 L36,6 Z" id="Combined-Shape" fill="#7383BF" fill-rule="evenodd"></path>
<g id="Rectangle-path" fill="none">
<use fill="black" fill-opacity="1" filter="url(#filter-6)" xlink:href="#path-5"></use>
<use fill="#20A0FF" fill-rule="evenodd" xlink:href="#path-5"></use>
</g>
<g id="Rectangle-path" fill="none">
<use fill="black" fill-opacity="1" filter="url(#filter-8)" xlink:href="#path-7"></use>
<use fill="#20A0FF" fill-rule="evenodd" xlink:href="#path-7"></use>
</g>
<g id="Rectangle-path" fill="none">
<use fill="black" fill-opacity="1" filter="url(#filter-10)" xlink:href="#path-9"></use>
<use fill="#20A0FF" fill-rule="evenodd" xlink:href="#path-9"></use>
</g>
</g>
</g>
</g>
</g>
</svg>
\ No newline at end of file
examples/assets/images/zhinan.svg deleted 100644 → 0
View file @ 3c3bfebe
<?xml version="1.0" encoding="UTF-8" standalone="no"?>
<svg width="120px" height="120px" viewBox="0 0 120 120" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<!-- Generator: Sketch 39.1 (31720) - http://www.bohemiancoding.com/sketch -->
<title>landingpage_doc_icon</title>
<desc>Created with Sketch.</desc>
<defs>
<circle id="path-1" cx="60" cy="60" r="60"></circle>
<path d="M72.7204805,55 C72.3212048,55 71.8159682,55.2518631 71.583447,55.5744208 L68.6205739,59.6845744 L30.9907556,59.6845744 C28.7867221,59.6845744 27,61.4733181 27,63.6828821 L27,94.9419923 C27,97.1501967 28.7995699,98.9402999 31.0045707,98.9402999 L88.9954293,98.9402986 C91.2070926,98.9402985 93,97.1496402 93,94.9439184 L93,58.9963801 C93,56.7892403 91.2181016,55.1145608 89.0176162,55.1367239 L72.7204805,55 Z" id="path-3"></path>
<filter x="-50%" y="-50%" width="200%" height="200%" filterUnits="objectBoundingBox" id="filter-4">
<feOffset dx="0" dy="2" in="SourceAlpha" result="shadowOffsetOuter1"></feOffset>
<feColorMatrix values="0 0 0 0 0 0 0 0 0 0.466666667 0 0 0 0 0.807843137 0 0 0 1 0" type="matrix" in="shadowOffsetOuter1"></feColorMatrix>
</filter>
</defs>
<g id="Page-1" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
<g id="landingpage_doc_icon">
<g id="Group">
<g id="Group-2">
<mask id="mask-2" fill="white">
<use xlink:href="#path-1"></use>
</mask>
<use id="Mask" fill="#EFF5FD" xlink:href="#path-1"></use>
<path d="M27,59.0081112 C27,56.7944925 28.7811186,55 30.9977467,55 L47.586785,55 C47.9921103,55 48.5248696,55.2699688 48.7688582,55.5925758 L51.7488113,59.5327339 L88.2558934,59.5327339 C88.6668521,59.5327339 89,59.8566406 89,60.264357 L89,96.2683769 C89,96.6724412 88.6664231,97 88.260519,97 L27.739481,97 C27.3310769,97 27,96.6619234 27,96.2710114 L27,59.0081112 Z" id="Rectangle" fill="#0077CE" mask="url(#mask-2)"></path>
<g id="Group-9" mask="url(#mask-2)">
<g transform="translate(32.000000, 15.000000)">
<path d="M42.2461314,0 L55.7180083,13.3923872 L55.7180083,68.1865965 C55.7180083,70.6980461 53.6816152,72.7323226 51.1722822,72.7323226 L4.62309912,72.7323226 C2.11376615,72.7323226 0.0773730599,70.6980461 0.0773730599,68.1865965 L0.0773730599,4.54572606 C0.0773730599,2.0342765 2.11400132,0 4.62309912,0 L42.2461314,0 Z" id="Shape" fill="#FFFFFF"></path>
<path d="M55.6523941,13.4558849 L46.8080847,13.4558849 C44.2987517,13.4558849 42.2623586,11.4194918 42.2623586,8.91015881 L42.2623586,0.0453890595 L55.6523941,13.4558849 Z" id="Shape" fill="#D9EDFE"></path>
<polygon id="Path" fill="#EFF5FD" points="6.16906036 36.1924682 30.1690604 36.1924682 30.1690604 31.6467421 6.16906036 31.6467421"></polygon>
<polygon id="Path" fill="#20A0FF" points="6 8 6 12 33 12 32.999746 8"></polygon>
<polygon id="Path" fill="#EFF5FD" points="6.16906036 21.9292516 6.16906036 25.9292516 51.1690604 25.9292516 51.1690604 21.9292516"></polygon>
</g>
</g>
<g id="Rectangle-Copy" mask="url(#mask-2)">
<use fill="black" fill-opacity="1" filter="url(#filter-4)" xlink:href="#path-3"></use>
<use fill="#20A0FF" fill-rule="evenodd" xlink:href="#path-3"></use>
</g>
<text id="Elemnet" mask="url(#mask-2)" font-family="PingFangSC-Semibold, PingFang SC" font-size="14" font-weight="500" line-spacing="30" fill="#0077CE">
<tspan x="33" y="82">Elemnet</tspan>
</text>
</g>
<path d="M100.506172,19.2377548 C100.506172,18.3510985 98.1302446,14.3428431 98.1302446,14.3428431 C97.1524382,12.6147723 97.7714617,11.9727442 99.5476926,12.9005283 C99.5476926,12.9005283 103.291856,15.0088747 104.371071,15.0088747 C105.964825,15.0088747 109.247423,12.9669733 109.247423,12.9669733 C110.978808,11.9987744 111.601512,12.6239259 110.672549,14.3744675 C110.672549,14.3744675 108.657471,17.7591636 108.657471,19.2377548 C108.657471,20.4447205 110.721457,24.1294186 110.721457,24.1294186 C111.638756,25.887084 110.992695,26.4842846 109.270392,25.4942095 C109.270392,25.4942095 105.670245,23.2219716 104.371071,23.2219716 C102.997276,23.2219716 99.4459871,25.4942095 99.4459871,25.4942095 C97.7415162,26.4981217 97.2289914,25.9503 98.257018,24.2518201 C98.257018,24.2518201 100.506172,21.0366554 100.506172,19.2377548 Z" id="Rectangle-22" fill="#FFACAD" transform="translate(104.403023, 19.235844) rotate(135.000000) translate(-104.403023, -19.235844) "></path>
<path d="M97.9563635,39.9441042 C97.9563635,39.2992632 96.6862323,37.2218793 96.6862323,37.2218793 C95.7222557,35.5024456 96.3641883,34.8700535 98.1353687,35.7777355 C98.1353687,35.7777355 99.9823157,36.868555 100.7672,36.868555 C101.926293,36.868555 103.446659,35.8329857 103.446659,35.8329857 C105.184667,34.8806167 105.817305,35.5201588 104.908745,37.2811628 C104.908745,37.2811628 103.884581,38.8687651 103.884581,39.9441042 C103.884581,40.8218974 104.955257,42.6329686 104.955257,42.6329686 C105.86009,44.3910456 105.207738,44.9955706 103.466102,44.0173303 C103.466102,44.0173303 101.712053,42.8417164 100.7672,42.8417164 C99.7680756,42.8417164 98.045543,44.0173303 98.045543,44.0173303 C96.3308398,45.0108454 95.8049382,44.4506312 96.8077051,42.7354455 C96.8077051,42.7354455 97.9563635,41.2523955 97.9563635,39.9441042 Z" id="Rectangle-22" fill="#FFD6D2" transform="translate(100.800150, 39.935899) rotate(135.000000) translate(-100.800150, -39.935899) "></path>
</g>
</g>
</g>
</svg>
\ No newline at end of file
examples/assets/images/ziyuan.svg deleted 100644 → 0
View file @ 3c3bfebe
<?xml version="1.0" encoding="UTF-8" standalone="no"?>
<svg width="134px" height="120px" viewBox="0 0 134 120" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<!-- Generator: Sketch 39.1 (31720) - http://www.bohemiancoding.com/sketch -->
<title>landingpage_sketch_icon</title>
<desc>Created with Sketch.</desc>
<defs>
<circle id="path-1" cx="83" cy="60" r="60"></circle>
</defs>
<g id="Page-1" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
<g id="landingpage_sketch_icon">
<g id="Group-7" transform="translate(-9.000000, 0.000000)">
<mask id="mask-2" fill="white">
<use xlink:href="#path-1"></use>
</mask>
<use id="Mask" fill="#EFF5FD" xlink:href="#path-1"></use>
<path d="M139,95 L139,97 C139,98.1 137.734375,99 136.1875,99 L29.8125,99 C28.2665625,99 27,98.1 27,97 L27,95 L139,95 Z" id="Shape" fill="#0077CE"></path>
<g id="Group-15" transform="translate(0.000000, 10.000000)">
<g id="Group-9" transform="translate(26.000000, 72.000000)" fill="#20A0FF">
<polygon id="Rectangle-731" points="9 0.00446001895 105 0.00446001895 112.920506 13 0.989849838 13.3241507"></polygon>
</g>
<path d="M35,6.44020485 C35,5.09251693 36.0946646,4 37.4331334,4 L128.566867,4 C129.910649,4 131,5.09565993 131,6.44020485 L131,72 L35,72 L35,6.44020485 Z" id="Rectangle-731" fill="#D9EDFE"></path>
<rect id="Rectangle-13" fill="#FFFFFF" x="41" y="10" width="84" height="56"></rect>
<g id="Group-11" transform="translate(87.589150, 38.649096) scale(-1, 1) translate(-87.589150, -38.649096) translate(58.589150, 20.149096)">
<rect id="Rectangle-733" fill="#FF9EA4" x="0.425215481" y="0.00674799284" width="15.7704918" height="15.7012987"></rect>
<rect id="Rectangle-733-Copy-2" fill="#FFCFC7" x="21.0481663" y="20.5392155" width="15.7704918" height="15.7012987"></rect>
<rect id="Rectangle-733-Copy" fill="#EFF5FD" x="21.0481663" y="0.00674799284" width="15.7704918" height="15.7012987"></rect>
<rect id="Rectangle-733-Copy" fill="#EFF5FD" x="41.6711171" y="20.5392155" width="15.7704918" height="15.7012987"></rect>
</g>
<g id="Group-20" transform="translate(25.049180, 14.701299)">
<circle id="Oval-4" fill="#20A0FF" cx="15" cy="15" r="15"></circle>
<path d="M21.9841499,12.529882 L19.7537045,10.8565359 C19.7036857,10.8045119 19.64724,10.7618965 19.5852055,10.73035 L18.0826867,9.60297906 C17.970913,9.5194086 17.8348284,9.47402597 17.6948318,9.47402597 L11.9736917,9.47402597 C11.8336951,9.47402597 11.6973311,9.5194086 11.5858368,9.60297906 L7.68409413,12.529882 C7.40046821,12.7426823 7.3451402,13.1433777 7.56058413,13.4239752 L14.3226173,22.228759 C14.5799764,22.563871 15.0882676,22.563871 15.3456267,22.228759 L22.1079393,13.4239752 C22.3233833,13.1433777 22.2677758,12.7426823 21.9841499,12.529882 L21.9841499,12.529882 Z" id="Sketch" fill="#FFFFFF"></path>
</g>
<g id="Group-16" transform="translate(19.933385, 18.437778) rotate(-26.000000) translate(-19.933385, -18.437778) translate(4.933385, 5.437778)">
<rect id="Rectangle-23" fill="#FFCFC7" x="25.5270465" y="0.854317229" width="3.8499999" height="11.0799999"></rect>
<path d="M10.981875,8.34555266 C10.4466477,7.48650426 10.7986346,6.36966093 11.70694,5.8837127 L11.70694,5.8837127 C12.6426096,5.38312444 13.8231901,5.65474724 14.3702344,6.53276219 L18.3008157,12.8414083 C18.836043,13.7004567 18.484056,14.8173001 17.5757507,15.3032483 L17.5757507,15.3032483 C16.6400811,15.8038366 15.4595006,15.5322138 14.9124562,14.6541988 L10.981875,8.34555266" id="Rectangle-23" fill="#FF9EA4"></path>
<path d="M0.957497949,21.3837223 C0.0308614262,20.8877504 -0.266799001,19.7574503 0.25738261,18.9157632 L0.25738261,18.9157632 C0.797356108,18.0487189 1.96581964,17.7369549 2.91291496,18.2438771 L9.71791212,21.8861756 C10.6445486,22.3821474 10.9422091,23.5124476 10.4180275,24.3541347 L10.4180275,24.3541347 C9.87805396,25.221179 8.70959043,25.532943 7.76249511,25.0260208 L0.957497949,21.3837223" id="Rectangle-23" fill="#FFCFC7"></path>
</g>
</g>
</g>
</g>
</g>
</svg>
\ No newline at end of file
examples/assets/images/zujian.svg deleted 100644 → 0
View file @ 3c3bfebe
<?xml version="1.0" encoding="UTF-8" standalone="no"?>
<svg width="120px" height="120px" viewBox="0 0 120 120" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<!-- Generator: Sketch 39.1 (31720) - http://www.bohemiancoding.com/sketch -->
<title>landingpage_demo_icon</title>
<desc>Created with Sketch.</desc>
<defs>
<rect id="path-1" x="0" y="0" width="68" height="12"></rect>
<filter x="-50%" y="-50%" width="200%" height="200%" filterUnits="objectBoundingBox" id="filter-2">
<feOffset dx="0" dy="2" in="SourceAlpha" result="shadowOffsetOuter1"></feOffset>
<feColorMatrix values="0 0 0 0 0 0 0 0 0 0.466666667 0 0 0 0 0.807843137 0 0 0 1 0" type="matrix" in="shadowOffsetOuter1"></feColorMatrix>
</filter>
<polyline id="path-3" points="95.3575369 19.0075852 100.34433 8.39738533 104.940596 12.254111 95.3575369 19.0075852"></polyline>
<mask id="mask-4" maskContentUnits="userSpaceOnUse" maskUnits="objectBoundingBox" x="-1" y="-1" width="11.5830596" height="12.6101999">
<rect x="94.3575369" y="7.39738533" width="11.5830596" height="12.6101999" fill="white"></rect>
<use xlink:href="#path-3" fill="black"></use>
</mask>
<polyline id="path-5" points="95.7283485 30.6666667 101.271652 25.1568381 103.271652 28.6209397 95.7283485 30.6666667"></polyline>
<mask id="mask-6" maskContentUnits="userSpaceOnUse" maskUnits="objectBoundingBox" x="-1" y="-1" width="9.54330305" height="7.50982859">
<rect x="94.7283485" y="24.1568381" width="9.54330305" height="7.50982859" fill="white"></rect>
<use xlink:href="#path-5" fill="black"></use>
</mask>
</defs>
<g id="Page-1" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
<g id="landingpage_demo_icon">
<g id="Group-17">
<circle id="Oval-7" fill="#EFF5FD" cx="60" cy="60" r="60"></circle>
<g id="Group-8" transform="translate(10.000000, 16.000000)">
<g id="Rectangle-27">
<use fill="black" fill-opacity="1" filter="url(#filter-2)" xlink:href="#path-1"></use>
<use fill="#20A0FF" fill-rule="evenodd" xlink:href="#path-1"></use>
</g>
<rect id="Rectangle-36" fill="#FFFFFF" x="0" y="14" width="68" height="69"></rect>
<path d="M9.04980469,81.7578125 C10.9093537,78.8748781 11.4501953,73 11.4501953,73 L75.4501953,73 L75.4501953,77.9414074 C75.4501953,80.735191 73.1859826,83 70.383591,83 L10.0666043,83 C7.26839602,83 7.24754402,82.9859929 9.04980469,81.7578125 C9.04980469,81.7578125 7.81646034,83.6699164 9.04980469,81.7578125 Z" id="Rectangle-36-Copy" fill="#D9EDFE"></path>
<circle id="Oval-8" fill="#0077CE" cx="6.5" cy="6.5" r="2.5"></circle>
<circle id="Oval-8" fill="#0077CE" cx="14.5" cy="6.5" r="2.5"></circle>
<circle id="Oval-8" fill="#0077CE" cx="22.5" cy="6.5" r="2.5"></circle>
<rect id="Rectangle-20" fill="#20A0FF" x="24" y="57" width="20" height="6" rx="3"></rect>
<rect id="Rectangle-37" fill="#D9EDFE" x="8" y="20" width="15" height="4"></rect>
<rect id="Rectangle-37" fill="#EFF5FD" x="8" y="27" width="52" height="4"></rect>
<rect id="Rectangle-37" fill="#D9EDFE" x="8" y="37" width="15" height="4"></rect>
<rect id="Rectangle-37" fill="#EFF5FD" x="8" y="44" width="52" height="4"></rect>
</g>
<g id="Group-8" transform="translate(58.000000, 39.000000)">
<polygon id="Combined-Shape" fill="#6496DC" points="12 29.8863636 14.5 29.8863637 17 34.8863636 12 34.8863636"></polygon>
<path d="M14,33.8884505 C14,34.9918675 14.5735636,35.1980873 15.2746482,34.3567858 L19,29.8863636 L14,29.8863636 L14,33.8884505 Z" id="Combined-Shape" fill="#80A8E1"></path>
<g id="Group-12" transform="translate(0.000000, 0.136364)">
<g id="Group-19">
<rect id="Rectangle-20" fill="#6496DD" x="0" y="0.863636364" width="49" height="29"></rect>
<rect id="Rectangle-20" fill="#80A8E1" x="2" y="0.863636364" width="49" height="29"></rect>
<polygon id="Fill-1" fill="#FFFFFF" points="34.4995277 21.9823228 40.7552877 15.6968482 34.4995277 9.41128616 32.6225734 11.2972638 37.0018433 15.6971981 32.6225734 20.0965784"></polygon>
<polygon id="Fill-2" fill="#FFFFFF" points="18.25576 9.41128616 12 15.6967316 18.25576 21.982177 20.1327143 20.096316 15.7534444 15.6963817 20.1327143 11.2971181"></polygon>
<polygon id="Fill-3" fill="#FFFFFF" points="30.6244081 9.37209893 24.6448241 23.2004929 22.4809422 22.8285106 28.4605725 9"></polygon>
</g>
</g>
</g>
<g id="Triangle-3">
<use fill="#FFACAD" fill-rule="evenodd" xlink:href="#path-3"></use>
<use stroke="#FFACAD" mask="url(#mask-4)" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" xlink:href="#path-3"></use>
</g>
<g id="Triangle-3">
<use fill="#FFD6D2" fill-rule="evenodd" xlink:href="#path-5"></use>
<use stroke="#FFD6D2" mask="url(#mask-6)" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" xlink:href="#path-5"></use>
</g>
</g>
</g>
</g>
</svg>
\ No newline at end of file
examples/pages/design.vue
View file @ 096b9f86
...@@ -9,6 +9,8 @@ ...@@ -9,6 +9,8 @@
img { img {
margin: 40px auto 25px; margin: 40px auto 25px;
width: 80px;
height: 80px;
} }
h4 { h4 {
font-size: 18px; font-size: 18px;
...@@ -28,28 +30,28 @@ ...@@ -28,28 +30,28 @@
<el-row :gutter="14" class="cards"> <el-row :gutter="14" class="cards">
<el-col :span="6"> <el-col :span="6">
<div class="card"> <div class="card">
<img src="~examples/assets/images/yizhi.svg" alt="Consistency"> <img src="~examples/assets/images/consistency.png" alt="Consistency">
<h4>一致</h4> <h4>一致</h4>
<span>Consistency</span> <span>Consistency</span>
</div> </div>
</el-col> </el-col>
<el-col :span="6"> <el-col :span="6">
<div class="card"> <div class="card">
<img src="~examples/assets/images/fankui.svg" alt="Feedback"> <img src="~examples/assets/images/feedback.png" alt="Feedback">
<h4>反馈</h4> <h4>反馈</h4>
<span>Feedback</span> <span>Feedback</span>
</div> </div>
</el-col> </el-col>
<el-col :span="6"> <el-col :span="6">
<div class="card"> <div class="card">
<img src="~examples/assets/images/xiaolv.svg" alt="Efficiency"> <img src="~examples/assets/images/efficiency.png" alt="Efficiency">
<h4>效率</h4> <h4>效率</h4>
<span>Efficiency</span> <span>Efficiency</span>
</div> </div>
</el-col> </el-col>
<el-col :span="6"> <el-col :span="6">
<div class="card"> <div class="card">
<img src="~examples/assets/images/kekong.svg" alt="Controllability"> <img src="~examples/assets/images/controllability.png" alt="Controllability">
<h4>可控</h4> <h4>可控</h4>
<span>Controllability</span> <span>Controllability</span>
</ul> </ul>
......
examples/pages/index.vue
View file @ 096b9f86
<style scoped> <style scoped>
.actor { .actor {
&.typing:after { min-height: 65px;
content: '|';
animation: blink 500ms infinite; &:after {
content: '';
width: 6px;
height: 50px;
vertical-align: -8px;
margin-left: 5px;
background-color: #fff;
display: inline-block;
animation: blink 400ms infinite alternate;
} }
} }
.banner { .banner {
...@@ -37,7 +45,8 @@ ...@@ -37,7 +45,8 @@
transform: translateX(-50%); transform: translateX(-50%);
} }
.banner-desc { .banner-desc {
padding-top: 80px; padding-top: 110px;
padding-left: 30px;
font-size: 46px; font-size: 46px;
position: relative; position: relative;
z-index: 10; z-index: 10;
...@@ -52,6 +61,7 @@ ...@@ -52,6 +61,7 @@
opacity: .8; opacity: .8;
width: 420px; width: 420px;
line-height: 1.8; line-height: 1.8;
padding-left: 3px;
} }
} }
.cards { .cards {
...@@ -72,6 +82,11 @@ ...@@ -72,6 +82,11 @@
float: left; float: left;
list-style: none; list-style: none;
} }
img {
width: 120px;
height: 120px;
}
} }
.card { .card {
height: 430px; height: 430px;
...@@ -149,7 +164,6 @@ ...@@ -149,7 +164,6 @@
<div class="container"> <div class="container">
<div class="banner-desc"> <div class="banner-desc">
<h2>网站快速成型工具</h2> <h2>网站快速成型工具</h2>
<div id="line1" class="actor"></div>
<div id="line2" class="actor"></div> <div id="line2" class="actor"></div>
<p>Element，一套为开发者、设计师和产品经理准备的基于 Vue 2.0 的组件库，提供了配套设计资源，帮助你的网站快速成型。</p> <p>Element，一套为开发者、设计师和产品经理准备的基于 Vue 2.0 的组件库，提供了配套设计资源，帮助你的网站快速成型。</p>
</div> </div>
...@@ -160,7 +174,7 @@ ...@@ -160,7 +174,7 @@
<ul class="container"> <ul class="container">
<li> <li>
<div class="card"> <div class="card">
<img src="~examples/assets/images/zhinan.png" alt=""> <img src="~examples/assets/images/guide.png" alt="">
<h3>指南</h3> <h3>指南</h3>
<p>了解设计指南，帮助产品设计人员搭建逻辑清晰、结构合理且高效易用的产品。</p> <p>了解设计指南，帮助产品设计人员搭建逻辑清晰、结构合理且高效易用的产品。</p>
<router-link <router-link
...@@ -172,7 +186,7 @@ ...@@ -172,7 +186,7 @@
</li> </li>
<li> <li>
<div class="card"> <div class="card">
<img src="~examples/assets/images/zujian.png" alt=""> <img src="~examples/assets/images/component.png" alt="">
<h3>组件</h3> <h3>组件</h3>
<p>使用组件 Demo 快速体验交互细节；使用前端框架封装的代码帮助工程师快速开发。</p> <p>使用组件 Demo 快速体验交互细节；使用前端框架封装的代码帮助工程师快速开发。</p>
<router-link <router-link
...@@ -184,7 +198,7 @@ ...@@ -184,7 +198,7 @@
</li> </li>
<li> <li>
<div class="card"> <div class="card">
<img src="~examples/assets/images/ziyuan.svg" alt=""> <img src="~examples/assets/images/resource.png" alt="">
<h3>资源</h3> <h3>资源</h3>
<p>下载相关资源，用其快速搭建页面原型或高保真视觉稿，提升产品设计效率。</p> <p>下载相关资源，用其快速搭建页面原型或高保真视觉稿，提升产品设计效率。</p>
<router-link <router-link
...@@ -205,11 +219,11 @@ ...@@ -205,11 +219,11 @@
mounted() { mounted() {
function typing(theater) { function typing(theater) {
theater theater
.addScene('产品设计师', 600, -5, 800) .addScene('产品设计师', 1800, -5, 800)
.addScene('交互设计师', 600, -5, 500) .addScene('交互设计师', 1800, -5, 500)
.addScene('视觉设计师', 600, -5, 700) .addScene('视觉设计师', 1800, -5, 700)
.addScene('产品经理', 600, -4, 600) .addScene('产品经理', 1800, -4, 600)
.addScene('前端工程师', 600, -5, 800) .addScene('前端工程师', 1800, -5, 800)
.addScene((done) => { .addScene((done) => {
typing(theater); typing(theater);
done(); done();
...@@ -224,12 +238,11 @@ ...@@ -224,12 +238,11 @@
theater.getCurrentActor().$element.classList.remove('typing'); theater.getCurrentActor().$element.classList.remove('typing');
}); });
theater theater
.addActor('line1', { speed: 0.8, accuracy: 0.6 }) .addActor('line2', { speed: 0.5, accuracy: 1 })
.addActor('line2') .addScene(2600)
.addScene(400) .addScene('line2:只为守护世界和平', 300, -6, 1000)
.addScene('line1:快速搭建页面', 600) .addScene('让你少加班', 300, -5)
.addScene('line2:只为守护世界和平', 800, -6, '让你少加班', 1000) .addScene('line2:只为这样的你: ', 400)
.addScene('line2:只为这样的你: ', 600)
.addScene((done) => { .addScene((done) => {
typing(theater); typing(theater);
done(); done();
......
examples/pages/nav.vue
View file @ 096b9f86
...@@ -62,7 +62,15 @@ ...@@ -62,7 +62,15 @@
} }
.zoom-enter, .zoom-enter,
.zoom-leave-active { .zoom-leave-active {
transform: scale(0); transform: scale(0.3);
opacity: 0;
}
.fade-enter-active,
.fade-leave-active {
transition: opacity .3s cubic-bezier(0.78, 0.14, 0.15, 0.86);
}
.fade-enter,
.fade-leave-active {
opacity: 0; opacity: 0;
} }
</style> </style>
...@@ -107,14 +115,16 @@ ...@@ -107,14 +115,16 @@
</el-col> </el-col>
</el-row> </el-row>
</div> </div>
<div class="mask" v-show="showDialog" @click="showDialog = false"></div> <transition name="fade">
<div class="dialog-img" v-show="showDialog" @click="showDialog = false"> <div class="mask" v-show="showDialog" @click="showDialog = false"></div>
<transition name="zoom"> </transition>
<div class="imgWrap" :style="imgStyle" v-show="showDialog"> <transition name="zoom">
<img src="~examples/assets/images/navbar_2.png" alt=""> <div class="dialog-img" :style='imgWrapStyle' v-show="showDialog" @click="showDialog = false">
<div class="imgWrap" :style="imgStyle">
<img :src="imgUrl" alt="">
</div> </div>
</transition> </div>
</div> </transition>
</div> </div>
</template> </template>
<script> <script>
...@@ -124,7 +134,8 @@ ...@@ -124,7 +134,8 @@
imgUrl: '', imgUrl: '',
imgBound: {}, imgBound: {},
showDialog: false, showDialog: false,
imgStyle: {} imgStyle: {},
imgWrapStyle: {}
}; };
}, },
watch: { watch: {
...@@ -145,7 +156,8 @@ ...@@ -145,7 +156,8 @@
this.imgUrl = imgNode.src; this.imgUrl = imgNode.src;
this.imgBound = imgNode.getBoundingClientRect(); this.imgBound = imgNode.getBoundingClientRect();
this.imgStyle.transformOrigin = `${ev.clientX - offset.left}px ${ev.clientY - offset.top}px`; this.imgWrapStyle.transformOrigin = `${ev.clientX}px ${ev.clientY}px`;
// this.imgStyle.transformOrigin = `${ev.clientX}px ${ev.clientY}px`;
this.imgStyle.width = imgWidth + 'px'; this.imgStyle.width = imgWidth + 'px';
this.showDialog = true; this.showDialog = true;
} }
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment