Browse Source

Project front-end

pull/2/head
遇见 5 years ago
parent
commit
76866c8883
  1. 1
      .env.development
  2. 1
      .env.production
  3. 2
      README.md
  4. 46
      package-lock.json
  5. 3
      package.json
  6. 4
      public/index.html
  7. 101
      src/assets/images/bak.svg
  8. BIN
      src/assets/images/lineart.png
  9. BIN
      src/assets/images/test.png
  10. 1
      src/assets/index.js
  11. 9
      src/assets/styles/reset.css
  12. 28
      src/components/BlogHeader/index.vue
  13. 24
      src/components/Footer/index.vue
  14. 51
      src/components/Top/index.vue
  15. 2
      src/main.js
  16. 21
      src/router/index.js
  17. 1
      src/utils/request.js
  18. 30
      src/views/About/index.vue
  19. 9
      src/views/Archive/index.vue
  20. 65
      src/views/Article/index.vue
  21. 64
      src/views/Home/components/Article.vue
  22. 36
      src/views/Home/index.vue
  23. 27
      vue.config.js

1
.env.development

@ -0,0 +1 @@ @@ -0,0 +1 @@
VUE_APP_BASE_API = "http://www.exapmple.com/dev"

1
.env.production

@ -0,0 +1 @@ @@ -0,0 +1 @@
VUE_APP_BASE_API = "http://www.exapmple.com/prod"

2
README.md

@ -2,5 +2,5 @@ @@ -2,5 +2,5 @@
### 基于Vue和Express的全栈博客系统。
- [ ] 基础的博客前端搭建
- [x] 基础的博客前端搭建
- [ ] 基础的后端增删改查

46
package-lock.json generated

@ -1936,6 +1936,11 @@ @@ -1936,6 +1936,11 @@
"integrity": "sha1-l6ERlkmyEa0zaR2fn0hqjsn74KM=",
"dev": true
},
"animejs": {
"version": "3.2.0",
"resolved": "https://registry.npm.taobao.org/animejs/download/animejs-3.2.0.tgz",
"integrity": "sha1-La6nNlmDJJAizEVPpyas20qENF0="
},
"ansi-colors": {
"version": "3.2.4",
"resolved": "https://registry.npm.taobao.org/ansi-colors/download/ansi-colors-3.2.4.tgz",
@ -2196,6 +2201,37 @@ @@ -2196,6 +2201,37 @@
"integrity": "sha1-oXs6jqgRBg501H0wYSJACtRJeuI=",
"dev": true
},
"axios": {
"version": "0.19.2",
"resolved": "https://registry.npm.taobao.org/axios/download/axios-0.19.2.tgz",
"integrity": "sha1-PqNsXYgY0NX4qKl6bTa4bNwAyyc=",
"requires": {
"follow-redirects": "1.5.10"
},
"dependencies": {
"debug": {
"version": "3.1.0",
"resolved": "https://registry.npm.taobao.org/debug/download/debug-3.1.0.tgz",
"integrity": "sha1-W7WgZyYotkFJVmuhaBnmFRjGcmE=",
"requires": {
"ms": "2.0.0"
}
},
"follow-redirects": {
"version": "1.5.10",
"resolved": "https://registry.npm.taobao.org/follow-redirects/download/follow-redirects-1.5.10.tgz?cache=0&sync_timestamp=1585479417937&other_urls=https%3A%2F%2Fregistry.npm.taobao.org%2Ffollow-redirects%2Fdownload%2Ffollow-redirects-1.5.10.tgz",
"integrity": "sha1-e3qfmuov3/NnhqlP9kPtB/T/Xio=",
"requires": {
"debug": "=3.1.0"
}
},
"ms": {
"version": "2.0.0",
"resolved": "https://registry.npm.taobao.org/ms/download/ms-2.0.0.tgz",
"integrity": "sha1-VgiurfwAvmwpAd9fmGF4jeDVl8g="
}
}
},
"babel-eslint": {
"version": "10.1.0",
"resolved": "https://registry.npm.taobao.org/babel-eslint/download/babel-eslint-10.1.0.tgz?cache=0&sync_timestamp=1582676223200&other_urls=https%3A%2F%2Fregistry.npm.taobao.org%2Fbabel-eslint%2Fdownload%2Fbabel-eslint-10.1.0.tgz",
@ -8464,6 +8500,16 @@ @@ -8464,6 +8500,16 @@
}
}
},
"postcss-px-to-viewport": {
"version": "1.1.1",
"resolved": "https://registry.npm.taobao.org/postcss-px-to-viewport/download/postcss-px-to-viewport-1.1.1.tgz",
"integrity": "sha1-olykELVTyYksyLUlzHENpHvxqlU=",
"dev": true,
"requires": {
"object-assign": ">=4.0.1",
"postcss": ">=5.0.2"
}
},
"postcss-reduce-initial": {
"version": "4.0.3",
"resolved": "https://registry.npm.taobao.org/postcss-reduce-initial/download/postcss-reduce-initial-4.0.3.tgz",

3
package.json

@ -8,6 +8,8 @@ @@ -8,6 +8,8 @@
"lint": "vue-cli-service lint"
},
"dependencies": {
"animejs": "^3.2.0",
"axios": "^0.19.2",
"core-js": "^3.6.5",
"vue": "^2.6.11",
"vue-router": "^3.2.0",
@ -24,6 +26,7 @@ @@ -24,6 +26,7 @@
"eslint": "^6.7.2",
"eslint-plugin-prettier": "^3.1.3",
"eslint-plugin-vue": "^6.2.2",
"postcss-px-to-viewport": "^1.1.1",
"prettier": "^1.19.1",
"vue-template-compiler": "^2.6.11"
}

4
public/index.html

@ -3,9 +3,9 @@ @@ -3,9 +3,9 @@
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width,initial-scale=1.0">
<meta name="viewport" content="width=device-width,initial-scale=1.0,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no">
<link rel="icon" href="<%= BASE_URL %>favicon.ico">
<title><%= htmlWebpackPlugin.options.title %></title>
<title>YuJian-Blog</title>
</head>
<body>
<noscript>

101
src/assets/images/bak.svg

@ -0,0 +1,101 @@ @@ -0,0 +1,101 @@
<svg xmlns="http://www.w3.org/2000/svg" width="2560" height="2560" viewBox="0 0 2560 2560">
<g fill="none" fill-rule="evenodd">
<path fill="#F19595" fill-rule="nonzero" d="M2541.01117,1859.60723 C2540.73094,1859.60723 2540.44611,1859.5474 2540.17649,1859.42079 C2539.20878,1858.96653 2538.79586,1857.83157 2539.25477,1856.87853 C2539.51448,1856.33905 2541.9244,1851.57939 2546.40987,1850.75956 C2549.02607,1850.28374 2551.63554,1851.24513 2554.17213,1853.62079 C2555.84821,1855.18983 2557.42027,1855.86079 2558.84195,1855.61627 C2561.10503,1855.22705 2562.92193,1852.56652 2563.38014,1851.6653 C2563.86099,1850.72026 2565.02862,1850.3373 2565.99103,1850.8093 C2566.95238,1851.28165 2567.34194,1852.43052 2566.8618,1853.37592 C2566.75388,1853.58809 2564.16457,1858.58566 2559.51245,1859.38496 C2556.80602,1859.8521 2554.10668,1858.8427 2551.488,1856.39122 C2549.90958,1854.91366 2548.44367,1854.28339 2547.13132,1854.51957 C2544.9705,1854.9074 2543.25019,1857.53975 2542.76969,1858.52131 C2542.43427,1859.20618 2541.73687,1859.60723 2541.01117,1859.60723 Z" opacity=".76" transform="rotate(33 2553.067 1855.107)"/>
<path fill="#F19595" fill-rule="nonzero" d="M2256.55041,1517.40056 C2256.27018,1517.40056 2255.98535,1517.34073 2255.71574,1517.21412 C2254.74802,1516.75986 2254.3351,1515.6249 2254.79402,1514.67186 C2255.05372,1514.13238 2257.46364,1509.37272 2261.94911,1508.5529 C2264.56531,1508.07707 2267.17479,1509.03846 2269.71138,1511.41412 C2271.38746,1512.98316 2272.95951,1513.65412 2274.38119,1513.4096 C2276.64427,1513.02038 2278.46117,1510.35986 2278.91938,1509.45864 C2279.40023,1508.51359 2280.56786,1508.13064 2281.53027,1508.60264 C2282.49162,1509.07498 2282.88118,1510.22385 2282.40104,1511.16925 C2282.29312,1511.38142 2279.70381,1516.37899 2275.05169,1517.1783 C2272.34527,1517.64543 2269.64592,1516.63604 2267.02724,1514.18455 C2265.44882,1512.70699 2263.98291,1512.07673 2262.67057,1512.3129 C2260.50974,1512.70073 2258.78943,1515.33308 2258.30894,1516.31464 C2257.97351,1516.99951 2257.27611,1517.40056 2256.55041,1517.40056 Z" opacity=".99" transform="rotate(39 2268.607 1512.9)"/>
<path fill="#F19595" fill-rule="nonzero" d="M2458.68186,1289.05978 C2458.40163,1289.05978 2458.1168,1288.99995 2457.84718,1288.87334 C2456.87947,1288.41908 2456.46655,1287.28413 2456.92546,1286.33108 C2457.18517,1285.7916 2459.59509,1281.03195 2464.08056,1280.21212 C2466.69676,1279.73629 2469.30624,1280.69768 2471.84282,1283.07334 C2473.5189,1284.64238 2475.09096,1285.31334 2476.51264,1285.06882 C2478.77572,1284.6796 2480.59262,1282.01908 2481.05083,1281.11786 C2481.53168,1280.17281 2482.69931,1279.78986 2483.66172,1280.26186 C2484.62307,1280.73421 2485.01263,1281.88308 2484.53249,1282.82847 C2484.42457,1283.04064 2481.83526,1288.03821 2477.18314,1288.83752 C2474.47672,1289.30465 2471.77737,1288.29526 2469.15869,1285.84378 C2467.58027,1284.36621 2466.11436,1283.73595 2464.80201,1283.97212 C2462.64119,1284.35995 2460.92088,1286.9923 2460.44038,1287.97387 C2460.10496,1288.65874 2459.40756,1289.05978 2458.68186,1289.05978 Z" opacity=".85" transform="rotate(-115 2470.738 1284.56)"/>
<path fill="#F19595" fill-rule="nonzero" d="M2311.76874,956.057877 C2311.48851,956.057877 2311.20367,955.998051 2310.93406,955.871442 C2309.96634,955.41718 2309.55342,954.282223 2310.01234,953.329178 C2310.27205,952.789699 2312.68197,948.030042 2317.16743,947.210216 C2319.78363,946.734389 2322.39311,947.695781 2324.9297,950.071436 C2326.60578,951.640481 2328.17783,952.311438 2329.59951,952.066916 C2331.86259,951.677698 2333.67949,949.017174 2334.1377,948.115956 C2334.61855,947.170911 2335.78618,946.787954 2336.74859,947.259955 C2337.70994,947.732303 2338.09951,948.881174 2337.61936,949.826566 C2337.51144,950.03874 2334.92214,955.03631 2330.27001,955.835616 C2327.56359,956.302747 2324.86424,955.293354 2322.24556,952.841873 C2320.66714,951.364307 2319.20123,950.734045 2317.88889,950.970219 C2315.72806,951.358046 2314.00776,953.990396 2313.52726,954.971963 C2313.19183,955.656833 2312.49444,956.057877 2311.76874,956.057877 Z" opacity=".79" transform="rotate(132 2323.825 951.558)"/>
<path fill="#F19595" fill-rule="nonzero" d="M2339.85344,507.978587 C2339.57321,507.978587 2339.28837,507.918761 2339.01876,507.792152 C2338.05104,507.337891 2337.63812,506.202933 2338.09704,505.249889 C2338.35675,504.71041 2340.76666,499.950753 2345.25213,499.130926 C2347.86833,498.6551 2350.47781,499.616492 2353.0144,501.992146 C2354.69048,503.561192 2356.26253,504.232149 2357.68421,503.987627 C2359.94729,503.598409 2361.76419,500.937885 2362.2224,500.036666 C2362.70325,499.091622 2363.87088,498.708665 2364.83329,499.180665 C2365.79464,499.653014 2366.18421,500.801884 2365.70406,501.747277 C2365.59614,501.959451 2363.00684,506.957021 2358.35471,507.756326 C2355.64829,508.223457 2352.94894,507.214065 2350.33026,504.762584 C2348.75184,503.285017 2347.28593,502.654756 2345.97359,502.89093 C2343.81276,503.278756 2342.09246,505.911107 2341.61196,506.892673 C2341.27653,507.577543 2340.57914,507.978587 2339.85344,507.978587 Z" opacity=".74" transform="rotate(-141 2351.91 503.479)"/>
<path fill="#F19595" fill-rule="nonzero" d="M1929.29787,1821.30637 C1929.01764,1821.30637 1928.73281,1821.24654 1928.46319,1821.11993 C1927.49547,1820.66567 1927.08256,1819.53071 1927.54147,1818.57767 C1927.80118,1818.03819 1930.2111,1813.27853 1934.69657,1812.45871 C1937.31276,1811.98288 1939.92224,1812.94427 1942.45883,1815.31993 C1944.13491,1816.88897 1945.70696,1817.55993 1947.12864,1817.31541 C1949.39172,1816.92619 1951.20863,1814.26566 1951.66683,1813.36445 C1952.14768,1812.4194 1953.31531,1812.03644 1954.27772,1812.50844 C1955.23907,1812.98079 1955.62864,1814.12966 1955.14849,1815.07506 C1955.04058,1815.28723 1952.45127,1820.2848 1947.79915,1821.08411 C1945.09272,1821.55124 1942.39337,1820.54184 1939.7747,1818.09036 C1938.19627,1816.6128 1936.73036,1815.98253 1935.41802,1816.21871 C1933.2572,1816.60654 1931.53689,1819.23889 1931.05639,1820.22045 C1930.72096,1820.90532 1930.02357,1821.30637 1929.29787,1821.30637 Z" opacity=".74" transform="rotate(36 1941.354 1816.806)"/>
<path fill="#F19595" fill-rule="nonzero" d="M2126.31349,994.797621 C2126.03326,994.797621 2125.74843,994.737795 2125.47881,994.611186 C2124.5111,994.156925 2124.09818,993.021967 2124.55709,992.068923 C2124.8168,991.529444 2127.22672,986.769787 2131.71219,985.94996 C2134.32839,985.474133 2136.93787,986.435526 2139.47446,988.81118 C2141.15054,990.380225 2142.72259,991.051183 2144.14427,990.806661 C2146.40735,990.417443 2148.22425,987.756918 2148.68246,986.8557 C2149.16331,985.910656 2150.33094,985.527699 2151.29335,985.999699 C2152.2547,986.472048 2152.64426,987.620918 2152.16412,988.566311 C2152.0562,988.778485 2149.46689,993.776055 2144.81477,994.57536 C2142.10835,995.042491 2139.409,994.033099 2136.79032,991.581618 C2135.2119,990.104051 2133.74599,989.47379 2132.43365,989.709964 C2130.27282,990.09779 2128.55251,992.730141 2128.07202,993.711707 C2127.73659,994.396577 2127.03919,994.797621 2126.31349,994.797621 Z" opacity=".86" transform="rotate(-152 2138.37 990.298)"/>
<path fill="#F19595" fill-rule="nonzero" d="M1971.29518,771.260421 C1971.01495,771.260421 1970.73012,771.200595 1970.4605,771.073986 C1969.49278,770.619725 1969.07986,769.484767 1969.53878,768.531723 C1969.79849,767.992244 1972.20841,763.232587 1976.69387,762.41276 C1979.31007,761.936934 1981.91955,762.898326 1984.45614,765.273981 C1986.13222,766.843026 1987.70427,767.513983 1989.12595,767.269461 C1991.38903,766.880243 1993.20593,764.219719 1993.66414,763.3185 C1994.14499,762.373456 1995.31262,761.990499 1996.27503,762.462499 C1997.23638,762.934848 1997.62595,764.083719 1997.1458,765.029111 C1997.03788,765.241285 1994.44858,770.238855 1989.79645,771.03816 C1987.09003,771.505291 1984.39068,770.495899 1981.772,768.044418 C1980.19358,766.566851 1978.72767,765.93659 1977.41533,766.172764 C1975.25451,766.560591 1973.5342,769.192941 1973.0537,770.174507 C1972.71827,770.859378 1972.02088,771.260421 1971.29518,771.260421 Z" opacity=".85" transform="rotate(66 1983.351 766.76)"/>
<path fill="#F19595" fill-rule="nonzero" d="M1661.8523,2008.10359 C1661.57207,2008.10359 1661.28724,2008.04376 1661.01762,2007.91716 C1660.0499,2007.46289 1659.63699,2006.32794 1660.0959,2005.37489 C1660.35561,2004.83541 1662.76553,2000.07576 1667.251,1999.25593 C1669.8672,1998.7801 1672.47667,1999.7415 1675.01326,2002.11715 C1676.68934,2003.68619 1678.2614,2004.35715 1679.68307,2004.11263 C1681.94615,2003.72341 1683.76306,2001.06289 1684.22126,2000.16167 C1684.70211,1999.21662 1685.86974,1998.83367 1686.83215,1999.30567 C1687.7935,1999.77802 1688.18307,2000.92689 1687.70292,2001.87228 C1687.59501,2002.08445 1685.0057,2007.08202 1680.35358,2007.88133 C1677.64715,2008.34846 1674.9478,2007.33907 1672.32913,2004.88759 C1670.7507,2003.41002 1669.2848,2002.77976 1667.97245,2003.01593 C1665.81163,2003.40376 1664.09132,2006.03611 1663.61082,2007.01768 C1663.27539,2007.70255 1662.578,2008.10359 1661.8523,2008.10359 Z" opacity=".83" transform="rotate(18 1673.908 2003.604)"/>
<path fill="#F19595" fill-rule="nonzero" d="M1729.94765,1847.22538 C1729.66742,1847.22538 1729.38259,1847.16555 1729.11298,1847.03894 C1728.14526,1846.58468 1727.73234,1845.44972 1728.19126,1844.49668 C1728.45096,1843.9572 1730.86088,1839.19754 1735.34635,1838.37772 C1737.96255,1837.90189 1740.57203,1838.86328 1743.10862,1841.23894 C1744.7847,1842.80798 1746.35675,1843.47894 1747.77843,1843.23442 C1750.04151,1842.8452 1751.85841,1840.18467 1752.31662,1839.28346 C1752.79747,1838.33841 1753.9651,1837.95545 1754.92751,1838.42746 C1755.88886,1838.8998 1756.27842,1840.04867 1755.79828,1840.99407 C1755.69036,1841.20624 1753.10105,1846.20381 1748.44893,1847.00312 C1745.74251,1847.47025 1743.04316,1846.46085 1740.42448,1844.00937 C1738.84606,1842.53181 1737.38015,1841.90155 1736.06781,1842.13772 C1733.90698,1842.52555 1732.18667,1845.1579 1731.70618,1846.13946 C1731.37075,1846.82433 1730.67335,1847.22538 1729.94765,1847.22538 Z" opacity=".82" transform="rotate(86 1742.004 1842.725)"/>
<path fill="#F19595" fill-rule="nonzero" d="M1816.89383,1644.37738 C1816.6136,1644.37738 1816.32877,1644.31755 1816.05915,1644.19094 C1815.09144,1643.73668 1814.67852,1642.60172 1815.13743,1641.64868 C1815.39714,1641.1092 1817.80706,1636.34954 1822.29253,1635.52972 C1824.90873,1635.05389 1827.51821,1636.01528 1830.05479,1638.39094 C1831.73087,1639.95998 1833.30293,1640.63094 1834.72461,1640.38642 C1836.98769,1639.9972 1838.80459,1637.33667 1839.2628,1636.43546 C1839.74365,1635.49041 1840.91128,1635.10745 1841.87369,1635.57946 C1842.83504,1636.0518 1843.2246,1637.20067 1842.74446,1638.14607 C1842.63654,1638.35824 1840.04723,1643.35581 1835.39511,1644.15512 C1832.68868,1644.62225 1829.98934,1643.61285 1827.37066,1641.16137 C1825.79224,1639.68381 1824.32633,1639.05355 1823.01398,1639.28972 C1820.85316,1639.67755 1819.13285,1642.3099 1818.65235,1643.29146 C1818.31693,1643.97633 1817.61953,1644.37738 1816.89383,1644.37738 Z" opacity=".97" transform="rotate(-19 1828.95 1639.877)"/>
<path fill="#F19595" fill-rule="nonzero" d="M1809.94432,1361.01716 C1809.66409,1361.01716 1809.37926,1360.95733 1809.10964,1360.83072 C1808.14192,1360.37646 1807.72901,1359.24151 1808.18792,1358.28846 C1808.44763,1357.74898 1810.85755,1352.98932 1815.34302,1352.1695 C1817.95922,1351.69367 1820.56869,1352.65506 1823.10528,1355.03072 C1824.78136,1356.59976 1826.35342,1357.27072 1827.77509,1357.0262 C1830.03817,1356.63698 1831.85508,1353.97646 1832.31328,1353.07524 C1832.79413,1352.13019 1833.96176,1351.74724 1834.92417,1352.21924 C1835.88552,1352.69159 1836.27509,1353.84046 1835.79494,1354.78585 C1835.68703,1354.99802 1833.09772,1359.99559 1828.4456,1360.7949 C1825.73917,1361.26203 1823.03982,1360.25264 1820.42115,1357.80116 C1818.84272,1356.32359 1817.37682,1355.69333 1816.06447,1355.9295 C1813.90365,1356.31733 1812.18334,1358.94968 1811.70284,1359.93125 C1811.36741,1360.61612 1810.67002,1361.01716 1809.94432,1361.01716 Z" opacity=".9" transform="rotate(160 1822 1356.517)"/>
<path fill="#F19595" fill-rule="nonzero" d="M1434.32859,1290.91084 C1434.04836,1290.91084 1433.76353,1290.85102 1433.49391,1290.72441 C1432.52619,1290.27015 1432.11328,1289.13519 1432.57219,1288.18214 C1432.8319,1287.64267 1435.24182,1282.88301 1439.72729,1282.06318 C1442.34349,1281.58736 1444.95296,1282.54875 1447.48955,1284.9244 C1449.16563,1286.49345 1450.73769,1287.1644 1452.15937,1286.91988 C1454.42244,1286.53066 1456.23935,1283.87014 1456.69755,1282.96892 C1457.17841,1282.02388 1458.34604,1281.64092 1459.30845,1282.11292 C1460.2698,1282.58527 1460.65936,1283.73414 1460.17922,1284.67953 C1460.0713,1284.89171 1457.48199,1289.88928 1452.82987,1290.68858 C1450.12344,1291.15571 1447.42409,1290.14632 1444.80542,1287.69484 C1443.22699,1286.21727 1441.76109,1285.58701 1440.44874,1285.82319 C1438.28792,1286.21101 1436.56761,1288.84336 1436.08711,1289.82493 C1435.75168,1290.5098 1435.05429,1290.91084 1434.32859,1290.91084 Z" opacity=".74" transform="rotate(-135 1446.385 1286.41)"/>
<path fill="#F19595" fill-rule="nonzero" d="M1535.27368,1112.63872 C1534.99345,1112.63872 1534.70862,1112.57889 1534.439,1112.45228 C1533.47128,1111.99802 1533.05837,1110.86306 1533.51728,1109.91002 C1533.77699,1109.37054 1536.18691,1104.61088 1540.67238,1103.79106 C1543.28858,1103.31523 1545.89805,1104.27662 1548.43464,1106.65228 C1550.11072,1108.22132 1551.68278,1108.89228 1553.10446,1108.64776 C1555.36754,1108.25854 1557.18444,1105.59802 1557.64265,1104.6968 C1558.1235,1103.75175 1559.29113,1103.3688 1560.25354,1103.8408 C1561.21489,1104.31314 1561.60445,1105.46202 1561.12431,1106.40741 C1561.01639,1106.61958 1558.42708,1111.61715 1553.77496,1112.41646 C1551.06853,1112.88359 1548.36918,1111.8742 1545.75051,1109.42271 C1544.17208,1107.94515 1542.70618,1107.31489 1541.39383,1107.55106 C1539.23301,1107.93889 1537.5127,1110.57124 1537.0322,1111.5528 C1536.69677,1112.23767 1535.99938,1112.63872 1535.27368,1112.63872 Z" opacity=".89" transform="rotate(76 1547.33 1108.139)"/>
<path fill="#F19595" fill-rule="nonzero" d="M1438.95187,1016.10823 C1438.67163,1016.10823 1438.3868,1016.0484 1438.11719,1015.92179 C1437.14947,1015.46753 1436.73655,1014.33257 1437.19547,1013.37953 C1437.45518,1012.84005 1439.86509,1008.08039 1444.35056,1007.26057 C1446.96676,1006.78474 1449.57624,1007.74613 1452.11283,1010.12179 C1453.78891,1011.69083 1455.36096,1012.36179 1456.78264,1012.11727 C1459.04572,1011.72805 1460.86262,1009.06753 1461.32083,1008.16631 C1461.80168,1007.22126 1462.96931,1006.83831 1463.93172,1007.31031 C1464.89307,1007.78265 1465.28263,1008.93152 1464.80249,1009.87692 C1464.69457,1010.08909 1462.10527,1015.08666 1457.45314,1015.88597 C1454.74672,1016.3531 1452.04737,1015.34371 1449.42869,1012.89222 C1447.85027,1011.41466 1446.38436,1010.7844 1445.07202,1011.02057 C1442.91119,1011.4084 1441.19089,1014.04075 1440.71039,1015.02231 C1440.37496,1015.70718 1439.67757,1016.10823 1438.95187,1016.10823 Z" opacity=".91" transform="rotate(-35 1451.008 1011.608)"/>
<path fill="#F19595" fill-rule="nonzero" d="M1386.74438,227.86244 C1386.46414,227.86244 1386.17931,227.802613 1385.9097,227.676005 C1384.94198,227.221743 1384.52906,226.086786 1384.98798,225.133741 C1385.24769,224.594262 1387.6576,219.834605 1392.14307,219.014778 C1394.75927,218.538952 1397.36875,219.500344 1399.90534,221.875999 C1401.58142,223.445044 1403.15347,224.116001 1404.57515,223.871479 C1406.83823,223.482261 1408.65513,220.821737 1409.11334,219.920519 C1409.59419,218.975474 1410.76182,218.592517 1411.72423,219.064518 C1412.68558,219.536866 1413.07514,220.685737 1412.595,221.631129 C1412.48708,221.843303 1409.89777,226.840873 1405.24565,227.640179 C1402.53923,228.107309 1399.83988,227.097917 1397.2212,224.646436 C1395.64278,223.16887 1394.17687,222.538608 1392.86453,222.774782 C1390.7037,223.162609 1388.98339,225.794959 1388.5029,226.776525 C1388.16747,227.461396 1387.47008,227.86244 1386.74438,227.86244 Z" transform="rotate(137 1398.8 223.362)"/>
<path fill="#F19595" fill-rule="nonzero" d="M1246.67952,1931.96446 C1246.39928,1931.96446 1246.11445,1931.90463 1245.84484,1931.77802 C1244.87712,1931.32376 1244.4642,1930.1888 1244.92312,1929.23576 C1245.18283,1928.69628 1247.59274,1923.93662 1252.07821,1923.1168 C1254.69441,1922.64097 1257.30389,1923.60236 1259.84048,1925.97802 C1261.51656,1927.54706 1263.08861,1928.21802 1264.51029,1927.9735 C1266.77337,1927.58428 1268.59027,1924.92376 1269.04848,1924.02254 C1269.52933,1923.07749 1270.69696,1922.69454 1271.65937,1923.16654 C1272.62072,1923.63888 1273.01028,1924.78775 1272.53014,1925.73315 C1272.42222,1925.94532 1269.83292,1930.94289 1265.18079,1931.7422 C1262.47437,1932.20933 1259.77502,1931.19994 1257.15634,1928.74845 C1255.57792,1927.27089 1254.11201,1926.64063 1252.79967,1926.8768 C1250.63884,1927.26463 1248.91854,1929.89698 1248.43804,1930.87854 C1248.10261,1931.56341 1247.40522,1931.96446 1246.67952,1931.96446 Z" opacity=".83" transform="rotate(-72 1258.736 1927.464)"/>
<path fill="#F19595" fill-rule="nonzero" d="M1164.63117,1718.77807 C1164.35094,1718.77807 1164.06611,1718.71824 1163.79649,1718.59163 C1162.82877,1718.13737 1162.41586,1717.00241 1162.87477,1716.04937 C1163.13448,1715.50989 1165.5444,1710.75023 1170.02987,1709.93041 C1172.64607,1709.45458 1175.25554,1710.41597 1177.79213,1712.79163 C1179.46821,1714.36067 1181.04027,1715.03163 1182.46194,1714.78711 C1184.72502,1714.39789 1186.54193,1711.73736 1187.00013,1710.83615 C1187.48099,1709.8911 1188.64862,1709.50814 1189.61103,1709.98014 C1190.57237,1710.45249 1190.96194,1711.60136 1190.48179,1712.54676 C1190.37388,1712.75893 1187.78457,1717.7565 1183.13245,1718.55581 C1180.42602,1719.02294 1177.72667,1718.01354 1175.108,1715.56206 C1173.52957,1714.0845 1172.06367,1713.45424 1170.75132,1713.69041 C1168.5905,1714.07824 1166.87019,1716.71059 1166.38969,1717.69215 C1166.05426,1718.37702 1165.35687,1718.77807 1164.63117,1718.77807 Z" transform="rotate(143 1176.687 1714.278)"/>
<path fill="#F19595" fill-rule="nonzero" d="M1101.67217,1300.94205 C1101.39194,1300.94205 1101.10711,1300.88222 1100.83749,1300.75562 C1099.86977,1300.30135 1099.45686,1299.1664 1099.91577,1298.21335 C1100.17548,1297.67387 1102.5854,1292.91422 1107.07087,1292.09439 C1109.68707,1291.61856 1112.29654,1292.57996 1114.83313,1294.95561 C1116.50921,1296.52465 1118.08127,1297.19561 1119.50295,1296.95109 C1121.76603,1296.56187 1123.58293,1293.90135 1124.04113,1293.00013 C1124.52199,1292.05509 1125.68962,1291.67213 1126.65203,1292.14413 C1127.61338,1292.61648 1128.00294,1293.76535 1127.5228,1294.71074 C1127.41488,1294.92291 1124.82557,1299.92048 1120.17345,1300.71979 C1117.46702,1301.18692 1114.76767,1300.17753 1112.149,1297.72605 C1110.57057,1296.24848 1109.10467,1295.61822 1107.79232,1295.85439 C1105.6315,1296.24222 1103.91119,1298.87457 1103.43069,1299.85614 C1103.09526,1300.54101 1102.39787,1300.94205 1101.67217,1300.94205 Z" transform="rotate(-54 1113.728 1296.442)"/>
<path fill="#F19595" fill-rule="nonzero" d="M1121.37391,179.34849 C1121.09368,179.34849 1120.80885,179.288664 1120.53923,179.162055 C1119.57151,178.707794 1119.1586,177.572836 1119.61751,176.619792 C1119.87722,176.080313 1122.28714,171.320656 1126.77261,170.500829 C1129.38881,170.025002 1131.99828,170.986395 1134.53487,173.362049 C1136.21095,174.931094 1137.78301,175.602051 1139.20469,175.357529 C1141.46776,174.968312 1143.28467,172.307787 1143.74287,171.406569 C1144.22373,170.461524 1145.39136,170.078568 1146.35377,170.550568 C1147.31512,171.022916 1147.70468,172.171787 1147.22454,173.117179 C1147.11662,173.329353 1144.52731,178.326924 1139.87519,179.126229 C1137.16876,179.59336 1134.46941,178.583967 1131.85074,176.132487 C1130.27231,174.65492 1128.80641,174.024659 1127.49406,174.260833 C1125.33324,174.648659 1123.61293,177.28101 1123.13243,178.262576 C1122.797,178.947446 1122.09961,179.34849 1121.37391,179.34849 Z" opacity=".72" transform="rotate(-96 1133.43 174.848)"/>
<path fill="#F19595" fill-rule="nonzero" d="M714.225204,1539.10348 C713.944973,1539.10348 713.660142,1539.04366 713.390525,1538.91705 C712.422807,1538.46279 712.009891,1537.32783 712.468805,1536.37479 C712.728514,1535.83531 715.138432,1531.07565 719.623901,1530.25582 C722.240101,1529.78 724.849577,1530.74139 727.386165,1533.11704 C729.062245,1534.68609 730.6343,1535.35705 732.055979,1535.11252 C734.319058,1534.72331 736.135961,1532.06278 736.594168,1531.16156 C737.075019,1530.21652 738.242649,1529.83356 739.20506,1530.30556 C740.166409,1530.77791 740.555973,1531.92678 740.075829,1532.87217 C739.967912,1533.08435 737.378603,1538.08192 732.726481,1538.88122 C730.020056,1539.34835 727.320707,1538.33896 724.702031,1535.88748 C723.123607,1534.40991 721.657701,1533.77965 720.345355,1534.01583 C718.184532,1534.40365 716.464223,1537.036 715.983726,1538.01757 C715.648297,1538.70244 714.950904,1539.10348 714.225204,1539.10348 Z" opacity=".88" transform="rotate(-179 726.281 1534.603)"/>
<path fill="#F19595" fill-rule="nonzero" d="M657.21696,1434.94359 C656.936729,1434.94359 656.651898,1434.88377 656.382282,1434.75716 C655.414564,1434.3029 655.001648,1433.16794 655.460562,1432.21489 C655.720271,1431.67541 658.130189,1426.91576 662.615658,1426.09593 C665.231857,1425.6201 667.841334,1426.5815 670.377922,1428.95715 C672.054002,1430.5262 673.626057,1431.19715 675.047735,1430.95263 C677.310815,1430.56341 679.127718,1427.90289 679.585925,1427.00167 C680.066776,1426.05663 681.234406,1425.67367 682.196816,1426.14567 C683.158165,1426.61802 683.547729,1427.76689 683.067585,1428.71228 C682.959668,1428.92446 680.37036,1433.92203 675.718238,1434.72133 C673.011813,1435.18846 670.312464,1434.17907 667.693788,1431.72759 C666.115364,1430.25002 664.649457,1429.61976 663.337112,1429.85593 C661.176288,1430.24376 659.45598,1432.87611 658.975482,1433.85768 C658.640054,1434.54255 657.94266,1434.94359 657.21696,1434.94359 Z" opacity=".98" transform="rotate(148 669.273 1430.444)"/>
<path fill="#F19595" fill-rule="nonzero" d="M866.75042,729.231945 C866.470189,729.231945 866.185358,729.172119 865.915741,729.04551 C864.948024,728.591248 864.535107,727.456291 864.994021,726.503246 C865.25373,725.963768 867.663648,721.204111 872.149118,720.384284 C874.765317,719.908457 877.374793,720.869849 879.911382,723.245504 C881.587462,724.814549 883.159517,725.485506 884.581195,725.240984 C886.844274,724.851766 888.661178,722.191242 889.119384,721.290024 C889.600236,720.344979 890.767866,719.962022 891.730276,720.434023 C892.691625,720.906371 893.081189,722.055242 892.601045,723.000634 C892.493128,723.212808 889.903819,728.210378 885.251698,729.009684 C882.545272,729.476815 879.845924,728.467422 877.227247,726.015941 C875.648824,724.538375 874.182917,723.908113 872.870572,724.144287 C870.709748,724.532114 868.989439,727.164464 868.508942,728.146031 C868.173514,728.830901 867.47612,729.231945 866.75042,729.231945 Z" opacity=".81" transform="rotate(-11 878.807 724.732)"/>
<path fill="#F19595" fill-rule="nonzero" d="M773.58135,252.436815 C773.301118,252.436815 773.016287,252.376989 772.746671,252.25038 C771.778953,251.796119 771.366037,250.661161 771.824951,249.708117 C772.08466,249.168638 774.494578,244.408981 778.980047,243.589154 C781.596246,243.113327 784.205723,244.07472 786.742311,246.450374 C788.418391,248.019419 789.990446,248.690376 791.412124,248.445854 C793.675204,248.056637 795.492107,245.396112 795.950314,244.494894 C796.431165,243.549849 797.598795,243.166893 798.561205,243.638893 C799.522554,244.111241 799.912118,245.260112 799.431975,246.205504 C799.324057,246.417678 796.734749,251.415249 792.082627,252.214554 C789.376202,252.681685 786.676853,251.672292 784.058177,249.220812 C782.479753,247.743245 781.013846,247.112984 779.701501,247.349158 C777.540677,247.736984 775.820369,250.369335 775.339871,251.350901 C775.004443,252.035771 774.307049,252.436815 773.58135,252.436815 Z" opacity=".8" transform="rotate(136 785.638 247.937)"/>
<path fill="#F19595" fill-rule="nonzero" d="M482.869993,1472.04662 C482.589762,1472.04662 482.304931,1471.98679 482.035315,1471.86019 C481.067597,1471.40592 480.65468,1470.27097 481.113594,1469.31792 C481.373304,1468.77844 483.783222,1464.01879 488.268691,1463.19896 C490.88489,1462.72313 493.494367,1463.68453 496.030955,1466.06018 C497.707035,1467.62922 499.27909,1468.30018 500.700768,1468.05566 C502.963848,1467.66644 504.780751,1465.00592 505.238957,1464.1047 C505.719809,1463.15966 506.887439,1462.7767 507.849849,1463.2487 C508.811198,1463.72105 509.200762,1464.86992 508.720618,1465.81531 C508.612701,1466.02748 506.023392,1471.02505 501.371271,1471.82436 C498.664845,1472.29149 495.965497,1471.2821 493.346821,1468.83062 C491.768397,1467.35305 490.30249,1466.72279 488.990145,1466.95896 C486.829321,1467.34679 485.109013,1469.97914 484.628515,1470.96071 C484.293087,1471.64558 483.595693,1472.04662 482.869993,1472.04662 Z" opacity=".72" transform="rotate(-19 494.926 1467.547)"/>
<path fill="#F19595" fill-rule="nonzero" d="M568.176691,385.284698 C567.896459,385.284698 567.611628,385.224872 567.342012,385.098263 C566.374294,384.644002 565.961378,383.509044 566.420292,382.555999 C566.680001,382.016521 569.089919,377.256864 573.575388,376.437037 C576.191587,375.96121 578.801064,376.922602 581.337652,379.298257 C583.013732,380.867302 584.585787,381.538259 586.007465,381.293737 C588.270545,380.904519 590.087448,378.243995 590.545655,377.342777 C591.026506,376.397732 592.194136,376.014775 593.156547,376.486776 C594.117896,376.959124 594.507459,378.107995 594.027316,379.053387 C593.919398,379.265561 591.33009,384.263132 586.677968,385.062437 C583.971543,385.529568 581.272194,384.520175 578.653518,382.068695 C577.075094,380.591128 575.609188,379.960866 574.296842,380.197041 C572.136019,380.584867 570.41571,383.217217 569.935213,384.198784 C569.599784,384.883654 568.902391,385.284698 568.176691,385.284698 Z" opacity=".91" transform="rotate(-74 580.233 380.785)"/>
<path fill="#F19595" fill-rule="nonzero" d="M134.867891,2078.8985 C134.587659,2078.8985 134.302828,2078.83867 134.033212,2078.71206 C133.065494,2078.2578 132.652578,2077.12284 133.111492,2076.1698 C133.371201,2075.63032 135.781119,2070.87066 140.266588,2070.05084 C142.882787,2069.57501 145.492264,2070.5364 148.028852,2072.91206 C149.704932,2074.4811 151.276987,2075.15206 152.698665,2074.90754 C154.961745,2074.51832 156.778648,2071.85779 157.236855,2070.95658 C157.717706,2070.01153 158.885336,2069.62857 159.847747,2070.10057 C160.809095,2070.57292 161.198659,2071.72179 160.718516,2072.66719 C160.610598,2072.87936 158.02129,2077.87693 153.369168,2078.67624 C150.662743,2079.14337 147.963394,2078.13397 145.344718,2075.68249 C143.766294,2074.20493 142.300388,2073.57467 140.988042,2073.81084 C138.827219,2074.19867 137.10691,2076.83102 136.626412,2077.81258 C136.290984,2078.49745 135.593591,2078.8985 134.867891,2078.8985 Z" opacity=".94" transform="rotate(-170 146.924 2074.398)"/>
<path fill="#F19595" fill-rule="nonzero" d="M13.4461839,1768.9943 C13.1659526,1768.9943 12.8811216,1768.93448 12.6115052,1768.80787 C11.6437874,1768.35361 11.2308709,1767.21865 11.689785,1766.26561 C11.9494942,1765.72613 14.3594122,1760.96647 18.8448813,1760.14664 C21.4610806,1759.67082 24.0705572,1760.63221 26.6071454,1763.00786 C28.2832255,1764.57691 29.8552803,1765.24787 31.2769585,1765.00334 C33.5400382,1764.61413 35.3569415,1761.9536 35.8151479,1761.05238 C36.2959993,1760.10734 37.4636295,1759.72438 38.4260398,1760.19638 C39.3873887,1760.66873 39.7769526,1761.8176 39.2968089,1762.76299 C39.1888916,1762.97517 36.5995831,1767.97274 31.9474613,1768.77204 C29.2410361,1769.23917 26.5416873,1768.22978 23.9230112,1765.7783 C22.3445875,1764.30073 20.8786808,1763.67047 19.5663353,1763.90665 C17.4055117,1764.29447 15.6852032,1766.92682 15.2047057,1767.90839 C14.8692774,1768.59326 14.1718837,1768.9943 13.4461839,1768.9943 Z" opacity=".93" transform="rotate(50 25.502 1764.494)"/>
<path fill="#F19595" fill-rule="nonzero" d="M224.67622,1577.50773 C224.395989,1577.50773 224.111158,1577.44791 223.841541,1577.3213 C222.873823,1576.86704 222.460907,1575.73208 222.919821,1574.77904 C223.17953,1574.23956 225.589448,1569.4799 230.074917,1568.66007 C232.691117,1568.18425 235.300593,1569.14564 237.837181,1571.52129 C239.513261,1573.09034 241.085316,1573.7613 242.506995,1573.51677 C244.770074,1573.12756 246.586978,1570.46703 247.045184,1569.56581 C247.526035,1568.62077 248.693665,1568.23781 249.656076,1568.70981 C250.617425,1569.18216 251.006989,1570.33103 250.526845,1571.27642 C250.418928,1571.4886 247.829619,1576.48617 243.177497,1577.28547 C240.471072,1577.7526 237.771723,1576.74321 235.153047,1574.29173 C233.574623,1572.81416 232.108717,1572.1839 230.796371,1572.42008 C228.635548,1572.8079 226.915239,1575.44025 226.434742,1576.42182 C226.099313,1577.10669 225.40192,1577.50773 224.67622,1577.50773 Z" opacity=".74" transform="rotate(166 236.732 1573.008)"/>
<path fill="#F19595" fill-rule="nonzero" d="M288.513937,1339.43693 C288.233706,1339.43693 287.948875,1339.37711 287.679258,1339.2505 C286.71154,1338.79624 286.298624,1337.66128 286.757538,1336.70824 C287.017247,1336.16876 289.427165,1331.4091 293.912634,1330.58927 C296.528834,1330.11345 299.13831,1331.07484 301.674898,1333.45049 C303.350978,1335.01954 304.923033,1335.6905 306.344711,1335.44597 C308.607791,1335.05676 310.424694,1332.39623 310.882901,1331.49501 C311.363752,1330.54997 312.531382,1330.16701 313.493793,1330.63901 C314.455142,1331.11136 314.844706,1332.26023 314.364562,1333.20562 C314.256644,1333.4178 311.667336,1338.41537 307.015214,1339.21467 C304.308789,1339.6818 301.60944,1338.67241 298.990764,1336.22093 C297.41234,1334.74336 295.946434,1334.1131 294.634088,1334.34928 C292.473265,1334.7371 290.752956,1337.36945 290.272459,1338.35102 C289.93703,1339.03589 289.239637,1339.43693 288.513937,1339.43693 Z" opacity=".96" transform="rotate(7 300.57 1334.937)"/>
<path fill="#F19595" fill-rule="nonzero" d="M168.021079,1147.59085 C167.740848,1147.59085 167.456017,1147.53102 167.1864,1147.40441 C166.218682,1146.95015 165.805766,1145.81519 166.26468,1144.86215 C166.524389,1144.32267 168.934307,1139.56301 173.419776,1138.74319 C176.035976,1138.26736 178.645452,1139.22875 181.18204,1141.60441 C182.85812,1143.17345 184.430175,1143.84441 185.851854,1143.59989 C188.114933,1143.21067 189.931837,1140.55014 190.390043,1139.64893 C190.870894,1138.70388 192.038524,1138.32092 193.000935,1138.79293 C193.962284,1139.26527 194.351848,1140.41414 193.871704,1141.35954 C193.763787,1141.57171 191.174478,1146.56928 186.522356,1147.36859 C183.815931,1147.83572 181.116582,1146.82632 178.497906,1144.37484 C176.919482,1142.89728 175.453576,1142.26702 174.14123,1142.50319 C171.980407,1142.89102 170.260098,1145.52337 169.779601,1146.50493 C169.444172,1147.1898 168.746779,1147.59085 168.021079,1147.59085 Z" opacity=".95" transform="rotate(-85 180.077 1143.09)"/>
<path stroke="#EEE236" stroke-width="3" d="M2366.67685,1934.03735 C2366.92458,1933.54717 2367.33163,1933.55787 2367.57395,1934.03735 L2375.01967,1948.77036 C2375.26739,1949.26053 2375.02191,1949.6579 2374.47442,1949.6579 L2359.77638,1949.6579 C2359.22752,1949.6579 2358.98881,1949.24983 2359.23113,1948.77036 L2366.67685,1934.03735 Z" opacity=".76" transform="rotate(92 2367.126 1941.658)"/>
<path stroke="#EEE236" stroke-width="3" d="M2503.16237,1084.84907 C2503.4101,1084.35889 2503.81715,1084.36959 2504.05946,1084.84907 L2511.50519,1099.58208 C2511.75291,1100.07226 2511.50743,1100.46962 2510.95994,1100.46962 L2496.2619,1100.46962 C2495.71304,1100.46962 2495.47433,1100.06156 2495.71665,1099.58208 L2503.16237,1084.84907 Z" opacity=".75" transform="rotate(-85 2503.612 1092.47)"/>
<path stroke="#EEE236" stroke-width="3" d="M2366.22508,80.6499535 C2366.4728,80.1597746 2366.87985,80.1704739 2367.12217,80.6499535 L2374.56789,95.382963 C2374.81561,95.8731419 2374.57014,96.2705104 2374.02264,96.2705104 L2359.3246,96.2705104 C2358.77574,96.2705104 2358.53704,95.8624426 2358.77935,95.382963 L2366.22508,80.6499535 Z" opacity=".98" transform="rotate(77 2366.675 88.27)"/>
<path stroke="#EEE236" stroke-width="3" d="M2075.52082,2426.90272 C2075.76855,2426.41254 2076.17559,2426.42324 2076.41791,2426.90272 L2083.86363,2441.63573 C2084.11136,2442.12591 2083.86588,2442.52328 2083.31839,2442.52328 L2068.62035,2442.52328 C2068.07149,2442.52328 2067.83278,2442.11521 2068.0751,2441.63573 L2075.52082,2426.90272 Z" opacity=".75" transform="rotate(-166 2075.97 2434.523)"/>
<path stroke="#EEE236" stroke-width="3" d="M2061.6785,1988.64763 C2061.92622,1988.15745 2062.33327,1988.16815 2062.57559,1988.64763 L2070.02131,2003.38064 C2070.26904,2003.87082 2070.02356,2004.26819 2069.47606,2004.26819 L2054.77802,2004.26819 C2054.22917,2004.26819 2053.99046,2003.86012 2054.23278,2003.38064 L2061.6785,1988.64763 Z" opacity=".97" transform="rotate(-6 2062.128 1996.268)"/>
<path stroke="#EEE236" stroke-width="3" d="M2019.12929,1549.3036 C2019.37701,1548.81342 2019.78406,1548.82412 2020.02638,1549.3036 L2027.4721,1564.03661 C2027.71983,1564.52679 2027.47435,1564.92416 2026.92686,1564.92416 L2012.22881,1564.92416 C2011.67996,1564.92416 2011.44125,1564.51609 2011.68357,1564.03661 L2019.12929,1549.3036 Z" opacity=".92" transform="rotate(174 2019.579 1556.924)"/>
<path stroke="#EEE236" stroke-width="3" d="M1999.78396,1369.85861 C2000.03169,1369.36843 2000.43874,1369.37913 2000.68105,1369.85861 L2008.12678,1384.59162 C2008.3745,1385.0818 2008.12902,1385.47917 2007.58153,1385.47917 L1992.88349,1385.47917 C1992.33463,1385.47917 1992.09592,1385.0711 1992.33824,1384.59162 L1999.78396,1369.85861 Z" opacity=".8" transform="rotate(-61 2000.233 1377.48)"/>
<path stroke="#EEE236" stroke-width="3" d="M2098.31864,444.19801 C2098.56637,443.707831 2098.97342,443.71853 2099.21574,444.19801 L2106.66146,458.931019 C2106.90918,459.421198 2106.6637,459.818566 2106.11621,459.818566 L2091.41817,459.818566 C2090.86931,459.818566 2090.6306,459.410499 2090.87292,458.931019 L2098.31864,444.19801 Z" opacity=".73" transform="rotate(-74 2098.768 451.819)"/>
<path stroke="#EEE236" stroke-width="3" d="M2033.57176,247.973232 C2033.81948,247.483053 2034.22653,247.493752 2034.46885,247.973232 L2041.91457,262.706241 C2042.1623,263.19642 2041.91682,263.593789 2041.36932,263.593789 L2026.67128,263.593789 C2026.12242,263.593789 2025.88372,263.185721 2026.12603,262.706241 L2033.57176,247.973232 Z" opacity=".91" transform="rotate(-179 2034.021 255.594)"/>
<path stroke="#EEE236" stroke-width="3" d="M2020.98303,156.635156 C2021.23076,156.144977 2021.63781,156.155676 2021.88013,156.635156 L2029.32585,171.368165 C2029.57357,171.858344 2029.32809,172.255713 2028.7806,172.255713 L2014.08256,172.255713 C2013.5337,172.255713 2013.29499,171.847645 2013.53731,171.368165 L2020.98303,156.635156 Z" opacity=".94" transform="rotate(-103 2021.432 164.256)"/>
<path stroke="#EEE236" stroke-width="3" d="M1655.96743,2430.78105 C1656.21515,2430.29087 1656.6222,2430.30157 1656.86452,2430.78105 L1664.31024,2445.51406 C1664.55797,2446.00424 1664.31249,2446.40161 1663.765,2446.40161 L1649.06695,2446.40161 C1648.5181,2446.40161 1648.27939,2445.99354 1648.52171,2445.51406 L1655.96743,2430.78105 Z" opacity=".8" transform="rotate(75 1656.417 2438.402)"/>
<path stroke="#EEE236" stroke-width="3" d="M1883.33613,2219.38721 C1883.58385,2218.89703 1883.9909,2218.90773 1884.23322,2219.38721 L1891.67894,2234.12022 C1891.92667,2234.6104 1891.68119,2235.00777 1891.13369,2235.00777 L1876.43565,2235.00777 C1875.8868,2235.00777 1875.64809,2234.5997 1875.8904,2234.12022 L1883.33613,2219.38721 Z" opacity=".78" transform="rotate(-26 1883.786 2227.008)"/>
<path stroke="#EEE236" stroke-width="3" d="M1725.20135,1192.97925 C1725.44907,1192.48907 1725.85612,1192.49977 1726.09844,1192.97925 L1733.54416,1207.71226 C1733.79189,1208.20244 1733.54641,1208.59981 1732.99891,1208.59981 L1718.30087,1208.59981 C1717.75202,1208.59981 1717.51331,1208.19174 1717.75563,1207.71226 L1725.20135,1192.97925 Z" opacity=".73" transform="rotate(149 1725.65 1200.6)"/>
<path stroke="#EEE236" stroke-width="3" d="M1890.09533,1002.10961 C1890.34305,1001.61943 1890.7501,1001.63013 1890.99242,1002.10961 L1898.43814,1016.84262 C1898.68586,1017.3328 1898.44038,1017.73017 1897.89289,1017.73017 L1883.19485,1017.73017 C1882.64599,1017.73017 1882.40729,1017.3221 1882.6496,1016.84262 L1890.09533,1002.10961 Z" opacity=".76" transform="rotate(-69 1890.545 1009.73)"/>
<path stroke="#EEE236" stroke-width="3" d="M1452.13228,2305.92682 C1452.38001,2305.43664 1452.78705,2305.44734 1453.02937,2305.92682 L1460.47509,2320.65982 C1460.72282,2321.15 1460.47734,2321.54737 1459.92985,2321.54737 L1445.23181,2321.54737 C1444.68295,2321.54737 1444.44424,2321.1393 1444.68656,2320.65982 L1452.13228,2305.92682 Z" opacity=".72" transform="rotate(117 1452.582 2313.547)"/>
<path stroke="#EEE236" stroke-width="3" d="M1398.17915,1613.19485 C1398.42688,1612.70467 1398.83393,1612.71537 1399.07624,1613.19485 L1406.52197,1627.92786 C1406.76969,1628.41804 1406.52421,1628.81541 1405.97672,1628.81541 L1391.27868,1628.81541 C1390.72982,1628.81541 1390.49111,1628.40734 1390.73343,1627.92786 L1398.17915,1613.19485 Z" opacity=".97" transform="rotate(-1 1398.629 1620.815)"/>
<path stroke="#EEE236" stroke-width="3" d="M1066.04303,2494.22738 C1066.29076,2493.7372 1066.69781,2493.7479 1066.94012,2494.22738 L1074.38585,2508.96039 C1074.63357,2509.45056 1074.38809,2509.84793 1073.8406,2509.84793 L1059.14256,2509.84793 C1058.5937,2509.84793 1058.35499,2509.43987 1058.59731,2508.96039 L1066.04303,2494.22738 Z" opacity=".85" transform="rotate(-10 1066.492 2501.848)"/>
<path stroke="#EEE236" stroke-width="3" d="M981.925164,2195.1729 C982.172889,2194.68272 982.579938,2194.69342 982.822256,2195.1729 L990.267978,2209.90591 C990.515703,2210.39608 990.270224,2210.79345 989.722731,2210.79345 L975.024689,2210.79345 C974.475832,2210.79345 974.237124,2210.38539 974.479442,2209.90591 L981.925164,2195.1729 Z" opacity=".76" transform="rotate(124 982.375 2202.793)"/>
<path stroke="#EEE236" stroke-width="3" d="M1079.18241,711.383636 C1079.43013,710.893457 1079.83718,710.904156 1080.0795,711.383636 L1087.52522,726.116645 C1087.77295,726.606824 1087.52747,727.004192 1086.97998,727.004192 L1072.28193,727.004192 C1071.73308,727.004192 1071.49437,726.596125 1071.73669,726.116645 L1079.18241,711.383636 Z" opacity=".77" transform="rotate(-87 1079.632 719.004)"/>
<path stroke="#EEE236" stroke-width="3" d="M1048.22163,265.032157 C1048.46936,264.541978 1048.87641,264.552677 1049.11872,265.032157 L1056.56445,279.765166 C1056.81217,280.255345 1056.56669,280.652714 1056.0192,280.652714 L1041.32116,280.652714 C1040.7723,280.652714 1040.53359,280.244646 1040.77591,279.765166 L1048.22163,265.032157 Z" opacity=".84" transform="rotate(51 1048.671 272.653)"/>
<path stroke="#EEE236" stroke-width="3" d="M781.820366,2293.33504 C782.068091,2292.84486 782.47514,2292.85556 782.717458,2293.33504 L790.16318,2308.06805 C790.410905,2308.55823 790.165426,2308.9556 789.617933,2308.9556 L774.919891,2308.9556 C774.371034,2308.9556 774.132326,2308.54753 774.374644,2308.06805 L781.820366,2293.33504 Z" opacity=".83" transform="rotate(-91 782.27 2300.956)"/>
<path stroke="#EEE236" stroke-width="3" d="M787.91713,1765.77285 C788.164855,1765.28267 788.571904,1765.29337 788.814222,1765.77285 L796.259944,1780.50586 C796.507669,1780.99604 796.262189,1781.39341 795.714697,1781.39341 L781.016655,1781.39341 C780.467798,1781.39341 780.22909,1780.98534 780.471408,1780.50586 L787.91713,1765.77285 Z" opacity=".83" transform="rotate(-1 788.367 1773.393)"/>
<path stroke="#EEE236" stroke-width="3" d="M885.163433,1216.18614 C885.411158,1215.69596 885.818206,1215.70666 886.060524,1216.18614 L893.506246,1230.91915 C893.753971,1231.40933 893.508492,1231.8067 892.960999,1231.8067 L878.262958,1231.8067 C877.714101,1231.8067 877.475393,1231.39863 877.71771,1230.91915 L885.163433,1216.18614 Z" opacity=".83" transform="rotate(103 885.613 1223.807)"/>
<path stroke="#EEE236" stroke-width="3" d="M773.931113,1021.47552 C774.178838,1020.98535 774.585887,1020.99604 774.828205,1021.47552 L782.273927,1036.20853 C782.521652,1036.69871 782.276173,1037.09608 781.72868,1037.09608 L767.030638,1037.09608 C766.481781,1037.09608 766.243073,1036.68801 766.485391,1036.20853 L773.931113,1021.47552 Z" opacity=".92" transform="rotate(-123 774.38 1029.096)"/>
<path stroke="#EEE236" stroke-width="3" d="M789.589559,613.693719 C789.837284,613.20354 790.244333,613.214239 790.486651,613.693719 L797.932373,628.426728 C798.180098,628.916907 797.934618,629.314276 797.387126,629.314276 L782.689084,629.314276 C782.140227,629.314276 781.901519,628.906208 782.143837,628.426728 L789.589559,613.693719 Z" opacity=".78" transform="rotate(-24 790.039 621.314)"/>
<path stroke="#EEE236" stroke-width="3" d="M436.070618,2388.74643 C436.318343,2388.25625 436.725392,2388.26695 436.96771,2388.74643 L444.413432,2403.47944 C444.661157,2403.96962 444.415678,2404.36699 443.868185,2404.36699 L429.170143,2404.36699 C428.621287,2404.36699 428.382578,2403.95892 428.624896,2403.47944 L436.070618,2388.74643 Z" opacity=".94" transform="rotate(-108 436.52 2396.367)"/>
<path stroke="#EEE236" stroke-width="3" d="M538.917342,1190.74301 C539.165067,1190.25283 539.572116,1190.26353 539.814434,1190.74301 L547.260156,1205.47602 C547.507881,1205.9662 547.262402,1206.36357 546.714909,1206.36357 L532.016867,1206.36357 C531.46801,1206.36357 531.229302,1205.9555 531.47162,1205.47602 L538.917342,1190.74301 Z" opacity=".7" transform="rotate(142 539.367 1198.364)"/>
<path stroke="#EEE236" stroke-width="3" d="M403.382132,684.598719 C403.629857,684.10854 404.036906,684.119239 404.279223,684.598719 L411.724945,699.331728 C411.972671,699.821907 411.727191,700.219275 411.179698,700.219275 L396.481657,700.219275 C395.9328,700.219275 395.694092,699.811208 395.93641,699.331728 L403.382132,684.598719 Z" opacity=".75" transform="rotate(-53 403.832 692.22)"/>
<path stroke="#EEE236" stroke-width="3" d="M438.539907,506.84824 C438.787632,506.358061 439.194681,506.36876 439.436999,506.84824 L446.882721,521.581249 C447.130446,522.071428 446.884967,522.468797 446.337474,522.468797 L431.639432,522.468797 C431.090575,522.468797 430.851867,522.060729 431.094185,521.581249 L438.539907,506.84824 Z" opacity=".99" transform="rotate(49 438.99 514.469)"/>
<path stroke="#EEE236" stroke-width="3" d="M128.488736,2277.28243 C128.736461,2276.79225 129.14351,2276.80295 129.385828,2277.28243 L136.83155,2292.01544 C137.079275,2292.50562 136.833796,2292.90298 136.286303,2292.90298 L121.588261,2292.90298 C121.039405,2292.90298 120.800696,2292.49492 121.043014,2292.01544 L128.488736,2277.28243 Z" opacity=".81" transform="rotate(124 128.938 2284.903)"/>
<path stroke="#EEE236" stroke-width="3" d="M262.806581,969.07016 C263.054306,968.579981 263.461355,968.59068 263.703673,969.07016 L271.149395,983.803169 C271.39712,984.293348 271.151641,984.690717 270.604148,984.690717 L255.906106,984.690717 C255.35725,984.690717 255.118541,984.282649 255.360859,983.803169 L262.806581,969.07016 Z" opacity=".82" transform="rotate(-9 263.256 976.69)"/>
<path stroke="#EEE236" stroke-width="3" d="M150.007882,562.693781 C150.255607,562.203602 150.662656,562.214301 150.904974,562.693781 L158.350696,577.426791 C158.598421,577.916969 158.352942,578.314338 157.805449,578.314338 L143.107407,578.314338 C142.55855,578.314338 142.319842,577.90627 142.56216,577.426791 L150.007882,562.693781 Z" opacity=".77" transform="rotate(77 150.457 570.314)"/>
<path stroke="#EEE236" stroke-width="3" d="M226.106532,245.47819 C226.354257,244.988011 226.761306,244.998711 227.003624,245.47819 L234.449346,260.2112 C234.697071,260.701379 234.451592,261.098747 233.904099,261.098747 L219.206057,261.098747 C218.6572,261.098747 218.418492,260.690679 218.66081,260.2112 L226.106532,245.47819 Z" transform="rotate(-62 226.556 253.099)"/>
<path stroke="#EEE236" stroke-width="3" d="M36.4132926,65.2857912 C36.6610177,64.7956123 37.0680665,64.8063115 37.3103844,65.2857912 L44.7561065,80.0188006 C45.0038316,80.5089795 44.7583522,80.906348 44.2108594,80.906348 L29.5128176,80.906348 C28.9639609,80.906348 28.7252526,80.4982803 28.9675705,80.0188006 L36.4132926,65.2857912 Z" opacity=".79" transform="rotate(-39 36.863 72.906)"/>
<circle cx="2404.862" cy="2406.123" r="8.5" stroke="#71BCF4" stroke-width="4" opacity=".7" transform="rotate(106 2404.862 2406.123)"/>
<circle cx="2507.139" cy="2229.794" r="8.5" stroke="#71BCF4" stroke-width="4" opacity=".92" transform="rotate(-69 2507.14 2229.794)"/>
<circle cx="2268.169" cy="652.126" r="8.5" stroke="#71BCF4" stroke-width="4" opacity=".76" transform="rotate(169 2268.169 652.126)"/>
<circle cx="2345.758" cy="395.291" r="8.5" stroke="#71BCF4" stroke-width="4" opacity=".89" transform="rotate(-176 2345.758 395.291)"/>
<circle cx="1959.144" cy="2166.712" r="8.5" stroke="#71BCF4" stroke-width="4" opacity=".84" transform="rotate(3 1959.144 2166.712)"/>
<circle cx="2219.192" cy="1114.553" r="8.5" stroke="#71BCF4" stroke-width="4" opacity=".87" transform="rotate(54 2219.192 1114.553)"/>
<circle cx="1762.689" cy="652.037" r="8.5" stroke="#71BCF4" stroke-width="4" opacity=".96" transform="rotate(27 1762.689 652.037)"/>
<circle cx="1714.763" cy="579.69" r="8.5" stroke="#71BCF4" stroke-width="4" opacity=".83" transform="rotate(165 1714.763 579.69)"/>
<circle cx="1855.009" cy="233.559" r="8.5" stroke="#71BCF4" stroke-width="4" opacity=".72" transform="rotate(158 1855.01 233.56)"/>
<circle cx="1659.903" cy="69.418" r="8.5" stroke="#71BCF4" stroke-width="4" opacity=".83" transform="rotate(-150 1659.903 69.418)"/>
<circle cx="1549.486" cy="2371.844" r="8.5" stroke="#71BCF4" stroke-width="4" opacity=".95" transform="rotate(-143 1549.486 2371.844)"/>
<circle cx="1478.155" cy="2048.596" r="8.5" stroke="#71BCF4" stroke-width="4" opacity=".95" transform="rotate(-74 1478.155 2048.596)"/>
<circle cx="1524.847" cy="1739.461" r="8.5" stroke="#71BCF4" stroke-width="4" opacity=".91" transform="rotate(174 1524.847 1739.461)"/>
<circle cx="1352.959" cy="806.96" r="8.5" stroke="#71BCF4" stroke-width="4" opacity=".83" transform="rotate(8 1352.959 806.96)"/>
<circle cx="1376.212" cy="535.972" r="8.5" stroke="#71BCF4" stroke-width="4" opacity=".83" transform="rotate(-178 1376.212 535.972)"/>
<circle cx="1431.516" cy="159.673" r="8.5" stroke="#71BCF4" stroke-width="4" opacity=".97" transform="rotate(21 1431.516 159.673)"/>
<circle cx="1251.182" cy="1601.954" r="8.5" stroke="#71BCF4" stroke-width="4" opacity=".84" transform="rotate(64 1251.182 1601.954)"/>
<circle cx="1075.095" cy="1159.47" r="8.5" stroke="#71BCF4" stroke-width="4" opacity=".7" transform="rotate(-177 1075.095 1159.47)"/>
<circle cx="992.911" cy="906.995" r="8.5" stroke="#71BCF4" stroke-width="4" opacity=".92" transform="rotate(95 992.911 906.995)"/>
<circle cx="1017.043" cy="537.119" r="8.5" stroke="#71BCF4" stroke-width="4" opacity=".84" transform="rotate(-43 1017.043 537.119)"/>
<circle cx="840.926" cy="2458.321" r="8.5" stroke="#71BCF4" stroke-width="4" opacity=".9" transform="rotate(158 840.926 2458.321)"/>
<circle cx="740.872" cy="2060.467" r="8.5" stroke="#71BCF4" stroke-width="4" opacity=".93" transform="rotate(149 740.872 2060.467)"/>
<circle cx="799.027" cy="167.208" r="8.5" stroke="#71BCF4" stroke-width="4" opacity=".75" transform="rotate(70 799.027 167.208)"/>
<circle cx="554.399" cy="2308.626" r="8.5" stroke="#71BCF4" stroke-width="4" opacity=".96" transform="rotate(-107 554.399 2308.626)"/>
<circle cx="616.46" cy="1968.742" r="8.5" stroke="#71BCF4" stroke-width="4" opacity=".98" transform="rotate(-165 616.46 1968.742)"/>
<circle cx="617.082" cy="1842.69" r="8.5" stroke="#71BCF4" stroke-width="4" opacity=".8" transform="rotate(-173 617.082 1842.69)"/>
<circle cx="386.967" cy="1696.195" r="8.5" stroke="#71BCF4" stroke-width="4" opacity=".86" transform="rotate(105 386.967 1696.195)"/>
<circle cx="347.773" cy="903.205" r="8.5" stroke="#71BCF4" stroke-width="4" opacity=".79" transform="rotate(97 347.773 903.205)"/>
<circle cx="462.176" cy="56.978" r="8.5" stroke="#71BCF4" stroke-width="4" opacity=".96" transform="rotate(-1 462.176 56.978)"/>
<circle cx="165.958" cy="2478.883" r="8.5" stroke="#71BCF4" stroke-width="4" opacity=".92" transform="rotate(-7 165.958 2478.883)"/>
<circle cx="154.35" cy="662.212" r="8.5" stroke="#71BCF4" stroke-width="4" opacity=".73" transform="rotate(8 154.35 662.212)"/>
</g>
</svg>

After

Width:  |  Height:  |  Size: 48 KiB

BIN
src/assets/images/lineart.png

Binary file not shown.

After

Width:  |  Height:  |  Size: 19 KiB

BIN
src/assets/images/test.png

Binary file not shown.

After

Width:  |  Height:  |  Size: 2.0 MiB

1
src/assets/index.js

@ -0,0 +1 @@ @@ -0,0 +1 @@
import "@/assets/styles/reset.css";

9
src/assets/styles/reset.css

@ -0,0 +1,9 @@ @@ -0,0 +1,9 @@
body {
margin: 0;
padding: 0;
}
a {
text-decoration: none;
color: #000000;
}

28
src/components/BlogHeader/index.vue

@ -1,10 +1,12 @@ @@ -1,10 +1,12 @@
<template>
<div class="BlogHeader">
<div class="HeaderLogo">YuJianBlog</div>
<div class="HeaderLogo">
<router-link to="/">YuJianBlog</router-link>
</div>
<div class="HeaderMenu">
<a href="#">HOME</a>
<a href="#">ABOUT</a>
<a href="#">ARCHIVE</a>
<router-link to="/">HOME</router-link>
<router-link to="/About">ABOUT</router-link>
<router-link to="/Archive">ARCHIVE</router-link>
</div>
</div>
</template>
@ -15,19 +17,31 @@ export default { @@ -15,19 +17,31 @@ export default {
};
</script>
<style scoped>
<style>
.BlogHeader {
display: grid;
justify-content: space-between;
align-items: center;
text-align: center;
grid-template-columns: 130px 300px;
grid-template-columns: auto 300px;
grid-template-rows: 60px;
border-bottom: 1px solid #757575;
background-color: #ffffff;
}
.HeaderLogo {
display: grid;
grid-template-columns: 130px auto;
grid-template-rows: 100%;
color: #000000;
}
.HeaderLogo a:hover {
color: #0000ff;
}
.HeaderMenu {
display: grid;
grid-template-columns: 1fr 1fr 1fr;
grid-template-rows: 100%;
}
.HeaderMenu a:hover {
color: #757575;
}
</style>

24
src/components/Footer/index.vue

@ -0,0 +1,24 @@ @@ -0,0 +1,24 @@
<template>
<div class="Footer">Designed by YuJian</div>
</template>
<script>
export default {
name: "Footer"
};
</script>
<style>
.Footer {
height: 30px;
display: flex;
justify-content: center;
align-items: center;
margin-top: 100px;
color: #ffffff;
background-color: #000000;
width: 100%;
position: absolute;
bottom: -100px;
}
</style>

51
src/components/Top/index.vue

@ -0,0 +1,51 @@ @@ -0,0 +1,51 @@
<template>
<div class="AnyTop">
<div class="Top"></div>
<div class="IndexFont">{{ TopInfo.title }}</div>
</div>
</template>
<script>
export default {
name: "IndexTop",
props: {
TopInfo: {
type: Object,
default: () => {}
}
}
// mounted() {
// console.log(this.$refs.Top.fontSize);
// if (this.TopInfo.ArticleCover) {
// this.$refs.Top.backgroundImage = this.TopInfo.ArticleCover;
// }
// }
};
</script>
<style>
.AnyTop {
/* background-color: aqua; */
position: relative;
z-index: -2;
height: 400px;
}
.Top {
background-image: url(../../assets/images/lineart.png);
background-repeat: no-repeat;
background-position: top;
background-size: 1188px 219px;
margin: -20px auto;
height: 440px;
max-width: 1280px;
position: relative;
z-index: -1;
}
.IndexFont {
margin-top: -260px;
padding-bottom: 100px;
display: flex;
justify-content: center;
font-size: 50px;
}
</style>

2
src/main.js

@ -3,6 +3,8 @@ import router from "./router"; @@ -3,6 +3,8 @@ import router from "./router";
import store from "./store";
import App from "./App.vue";
import "@/assets";
Vue.config.productionTip = false;
new Vue({

21
src/router/index.js

@ -10,11 +10,30 @@ const routes = [ @@ -10,11 +10,30 @@ const routes = [
path: "/",
name: "Home",
component: Home
},
{
path: "/About",
name: "About",
component: () => import("@/views/About")
},
{
path: "/Archive",
name: "Archive",
component: () => import("@/views/Archive")
},
{
path: "/Article",
name: "Article",
component: () => import("@/views/Article")
}
];
const router = new VueRouter({
routes
routes,
// eslint-disable-next-line no-unused-vars
scrollBehavior(to, from, savedPosition) {
return { x: 0, y: 0 };
}
});
export default router;

1
src/utils/request.js

@ -0,0 +1 @@ @@ -0,0 +1 @@
import axios from "axios";

30
src/views/About/index.vue

@ -0,0 +1,30 @@ @@ -0,0 +1,30 @@
<template>
<div>
<blog-header />
<index-top :TopInfo="TopInfo" />
<Article />
<Footer />
</div>
</template>
<script>
import BlogHeader from "@/components/BlogHeader";
import IndexTop from "@/components/Top";
import Footer from "@/components/Footer";
export default {
name: "About",
components: {
BlogHeader,
IndexTop,
Footer
},
data() {
return {
TopInfo: {
title: "About Me"
}
};
},
};
</script>

9
src/views/Archive/index.vue

@ -0,0 +1,9 @@ @@ -0,0 +1,9 @@
<template>
<div>Archive</div>
</template>
<script>
export default {
name: "Archive"
};
</script>

65
src/views/Article/index.vue

@ -0,0 +1,65 @@ @@ -0,0 +1,65 @@
<template>
<div>
<blog-header />
<index-top :TopInfo="TopInfo" />
<img class="ArticleMainCover" src="@/assets/images/test.png" />
<div class="ArticleMain">
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim
veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea
commodo consequat. Duis aute irure dolor in reprehenderit in voluptate
velit esse
</div>
<Footer />
</div>
</template>
<script>
import BlogHeader from "@/components/BlogHeader";
import IndexTop from "@/components/Top";
import Footer from "@/components/Footer";
export default {
name: "Article",
components: {
BlogHeader,
IndexTop,
Footer
},
data() {
return {
TopInfo: {
title: "ArticleTest",
ArticleCover: "@/assets/images/test.png"
}
};
},
methods: {
getArticleData: function() {
if (this.$route.query.id === "000") {
this.TopTitle = "ArticleTest";
}
}
},
beforeMount() {
this.getArticleData();
}
};
</script>
<style>
.ArticleMainCover {
display: flex;
object-fit: cover;
margin: 0 auto 20px;
width: 800px;
}
.ArticleMain {
display: flex;
margin: 0 auto;
background-color: #ffffff;
border: 1px solid #000000;
width: 800px;
padding: 15px 15px 15px 15px;
}
</style>

64
src/views/Home/components/Article.vue

@ -0,0 +1,64 @@ @@ -0,0 +1,64 @@
<template>
<div class="Article">
<router-link
:to="{ path: 'Article', query: { id: '000' } }"
class="ArticleItem"
>
<div class="ArticleCover">
<img class="ArticleCoverImg" src="@/assets/images/test.png" />
</div>
<div class="ArticleInfo">
<div class="ArticleTitle">ArticleTest</div>
<div class="ArticleCont">Anything for Article</div>
<div class="ArticleData">2020.6.11</div>
</div>
</router-link>
</div>
</template>
<script>
export default {
name: "Article"
};
</script>
<style>
.Article {
display: grid;
justify-content: center;
}
.ArticleItem {
display: grid;
grid-template-columns: 720px;
grid-template-rows: 330px 100px;
margin-top: 40px;
border: 1px solid #757575;
border-radius: 5px;
}
.ArticleCover {
margin: 9px auto;
/* border: 1px solid #000000; */
width: 97%;
}
.ArticleCoverImg {
width: 100%;
height: 100%;
object-fit: cover;
}
.ArticleInfo {
display: grid;
grid-template-columns: 100%;
margin: 0 auto 9px;
width: 97%;
}
.ArticleTitle {
font-size: 25px;
}
.ArticleCont {
font-size: 18px;
}
.ArticleData {
color: gray;
font-size: 15px;
}
</style>

36
src/views/Home/index.vue

@ -1,13 +1,47 @@ @@ -1,13 +1,47 @@
<template>
<div class="Index">
<blog-header />
<index-top :TopInfo="TopInfo" />
<Article />
<Footer />
</div>
</template>
<script>
import BlogHeader from "@/components/BlogHeader";
import IndexTop from "@/components/Top";
import Article from "./components/Article";
import Footer from "@/components/Footer";
export default {
name: "Index",
data() {
return {
TopInfo: {
title: "YuJian",
ArticleCover: "@/assets/images/test.png"
}
};
},
components: {
BlogHeader
BlogHeader,
IndexTop,
Article,
Footer
}
};
</script>
<style>
html {
height: 100%;
/* background-image: url(../../assets/images/bak.svg);
background-position: center; */
}
body {
min-height: 100%;
margin: 0;
padding: 0;
position: relative;
}
</style>

27
vue.config.js

@ -6,7 +6,32 @@ function resolve(dir){ @@ -6,7 +6,32 @@ function resolve(dir){
const projectName = require("./package.json").name;
module.exports = {
// postcss-px-to-viewport配置 https://github.com/evrone/postcss-px-to-viewport/blob/HEAD/README_CN.md
css: {
loaderOptions: {
postcss: {
plugins: [
require("postcss-px-to-viewport")({
unitToConvert: "px",
viewportWidth: 1536,
viewportHeight: 491,
unitPrecision: 3,
propList: ["*"],
viewportUnit: "vw",
fontViewportUnit: "vw",
selectorBlackList: [],
minPixelValue: 1,
// (Boolean) 媒体查询里的单位是否需要转换单位
mediaQuery: false,
replace: true,
exclude: /(\/|\\)(node_modules)(\/|\\)/
})
]
}
}
},
configureWebpack: {
devtool: "source-map",
name: projectName,
resolve: {
alias: {
@ -14,4 +39,4 @@ module.exports = { @@ -14,4 +39,4 @@ module.exports = {
}
}
}
}
};

Loading…
Cancel
Save