创建项目
@@ -0,0 +1,426 @@
|
||||
{
|
||||
"wordGeoCoordMap":{
|
||||
"阿富汗": [67.709953, 33.93911],
|
||||
"安哥拉": [17.873887, -11.202692],
|
||||
"阿尔巴尼亚": [20.168331, 41.153332],
|
||||
"阿拉伯联合酋长国": [53.847818, 23.424076],
|
||||
"阿根廷": [-63.61667199999999, -38.416097],
|
||||
"亚美尼亚": [45.038189, 40.069099],
|
||||
"法属南半球和南极领地": [69.348557, -49.280366],
|
||||
"澳大利亚": [133.775136, -25.274398],
|
||||
"奥地利": [14.550072, 47.516231],
|
||||
"阿塞拜疆": [47.576927, 40.143105],
|
||||
"布隆迪": [29.918886, -3.373056],
|
||||
"比利时": [4.469936, 50.503887],
|
||||
"贝宁": [2.315834, 9.30769],
|
||||
"布基纳法索": [-1.561593, 12.238333],
|
||||
"孟加拉人民共和国": [90.356331, 23.684994],
|
||||
"保加利亚": [25.48583, 42.733883],
|
||||
"巴哈马": [-77.39627999999999, 25.03428],
|
||||
"波斯尼亚和黑塞哥维那": [17.679076, 43.915886],
|
||||
"白俄罗斯": [27.953389, 53.709807],
|
||||
"伯利兹": [-88.49765, 17.189877],
|
||||
"百慕大": [-64.7505, 32.3078],
|
||||
"玻利维亚": [-63.58865299999999, -16.290154],
|
||||
"巴西": [-51.92528, -14.235004],
|
||||
"文莱": [114.727669, 4.535277],
|
||||
"不丹": [90.433601, 27.514162],
|
||||
"博茨瓦纳": [24.684866, -22.328474],
|
||||
"中非共和国": [20.939444, 6.611110999999999],
|
||||
"加拿大": [-106.346771, 56.130366],
|
||||
"瑞士": [8.227511999999999, 46.818188],
|
||||
"智利": [-71.542969, -35.675147],
|
||||
"中华人民共和国": [104.195397, 35.86166],
|
||||
"象牙海岸": [-5.547079999999999, 7.539988999999999],
|
||||
"喀麦隆": [12.354722, 7.369721999999999],
|
||||
"刚果民主共和国": [21.758664, -4.038333],
|
||||
"刚果共和国": [15.827659, -0.228021],
|
||||
"哥伦比亚": [-74.297333, 4.570868],
|
||||
"哥斯达黎加共和国": [-83.753428, 9.748916999999999],
|
||||
"古巴": [-77.781167, 21.521757],
|
||||
"北塞浦路斯": [33.429859, 35.126413],
|
||||
"塞浦路斯": [33.429859, 35.126413],
|
||||
"捷克共和国": [15.472962, 49.81749199999999],
|
||||
"德国": [10.451526, 51.165691],
|
||||
"吉布提": [42.590275, 11.825138],
|
||||
"丹麦": [9.501785, 56.26392],
|
||||
"多明尼加共和国": [-70.162651, 18.735693],
|
||||
"阿尔及利亚": [1.659626, 28.033886],
|
||||
"厄瓜多尔": [-78.18340599999999, -1.831239],
|
||||
"埃及": [30.802498, 26.820553],
|
||||
"厄立特里亚": [39.782334, 15.179384],
|
||||
"西班牙": [-3.74922, 40.46366700000001],
|
||||
"爱沙尼亚": [25.013607, 58.595272],
|
||||
"埃塞俄比亚": [40.489673, 9.145000000000001],
|
||||
"芬兰": [25.748151, 61.92410999999999],
|
||||
"斐": [178.065032, -17.713371],
|
||||
"福克兰群岛": [-59.523613, -51.796253],
|
||||
"法国": [2.213749, 46.227638],
|
||||
"加蓬共和国": [11.609444, -0.803689],
|
||||
"英国": [-3.435973, 55.378051],
|
||||
"格鲁吉亚": [-82.9000751, 32.1656221],
|
||||
"加纳": [-1.023194, 7.946527],
|
||||
"几内亚": [-9.696645, 9.945587],
|
||||
"冈比亚": [-15.310139, 13.443182],
|
||||
"几内亚比绍": [-15.180413, 11.803749],
|
||||
"赤道几内亚": [10.267895, 1.650801],
|
||||
"希腊": [21.824312, 39.074208],
|
||||
"格陵兰": [-42.604303, 71.706936],
|
||||
"危地马拉": [-90.23075899999999, 15.783471],
|
||||
"法属圭亚那": [-53.125782, 3.933889],
|
||||
"圭亚那": [-58.93018, 4.860416],
|
||||
"洪都拉斯": [-86.241905, 15.199999],
|
||||
"克罗地亚": [15.2, 45.1],
|
||||
"海地": [-72.285215, 18.971187],
|
||||
"匈牙利共和国": [19.503304, 47.162494],
|
||||
"印尼": [113.921327, -0.789275],
|
||||
"爱尔兰": [-8.24389, 53.41291],
|
||||
"伊朗": [53.688046, 32.427908],
|
||||
"伊拉克": [43.679291, 33.223191],
|
||||
"冰岛": [-19.020835, 64.963051],
|
||||
"以色列": [34.851612, 31.046051],
|
||||
"意大利": [12.56738, 41.87194],
|
||||
"牙买加": [-77.297508, 18.109581],
|
||||
"约旦": [36.238414, 30.585164],
|
||||
"日本": [138.252924, 36.204824],
|
||||
"哈萨克斯坦": [66.923684, 48.019573],
|
||||
"肯尼亚": [37.906193, -0.023559],
|
||||
"吉尔吉斯斯坦": [74.766098, 41.20438],
|
||||
"柬埔寨": [104.990963, 12.565679],
|
||||
"韩国": [127.766922, 35.907757],
|
||||
"科索沃": [20.902977, 42.6026359],
|
||||
"科威特": [47.481766, 29.31166],
|
||||
"老挝": [102.495496, 19.85627],
|
||||
"黎巴嫩": [35.862285, 33.854721],
|
||||
"利比里亚共和国": [-9.429499000000002, 6.428055],
|
||||
"利比亚": [17.228331, 26.3351],
|
||||
"斯里兰卡": [80.77179699999999, 7.873053999999999],
|
||||
"莱索托": [28.233608, -29.609988],
|
||||
"立陶宛": [23.881275, 55.169438],
|
||||
"巴林": [50.30, 26.10],
|
||||
"卢森堡": [6.129582999999999, 49.815273],
|
||||
"拉脱维亚共和国": [24.603189, 56.879635],
|
||||
"摩洛哥": [-7.092619999999999, 31.791702],
|
||||
"摩尔多瓦": [28.369885, 47.411631],
|
||||
"马达加斯加": [46.869107, -18.766947],
|
||||
"墨西哥": [-102.552784, 23.634501],
|
||||
"马其顿": [21.745275, 41.608635],
|
||||
"马里": [-3.996166, 17.570692],
|
||||
"缅甸": [95.956223, 21.913965],
|
||||
"黑山共和国": [19.37439, 42.708678],
|
||||
"蒙古": [103.846656, 46.862496],
|
||||
"莫桑比克": [35.529562, -18.665695],
|
||||
"毛里塔尼亚": [-10.940835, 21.00789],
|
||||
"马拉维": [34.301525, -13.254308],
|
||||
"马来西亚": [101.975766, 4.210484],
|
||||
"纳米比亚": [18.49041, -22.95764],
|
||||
"新喀里多尼亚": [165.618042, -20.904305],
|
||||
"尼日尔": [8.081666, 17.607789],
|
||||
"尼日利亚": [8.675277, 9.081999],
|
||||
"尼加拉瓜": [-85.207229, 12.865416],
|
||||
"荷兰": [5.291265999999999, 52.132633],
|
||||
"挪威": [8.468945999999999, 60.47202399999999],
|
||||
"尼泊尔": [84.12400799999999, 28.394857],
|
||||
"新西兰": [174.885971, -40.900557],
|
||||
"阿曼": [55.923255, 21.512583],
|
||||
"巴基斯坦": [69.34511599999999, 30.375321],
|
||||
"巴拿马共和国": [-80.782127, 8.537981],
|
||||
"秘鲁": [-75.015152, -9.189967],
|
||||
"菲律宾": [121.774017, 12.879721],
|
||||
"巴布亚新几内亚": [143.95555, -6.314992999999999],
|
||||
"波兰": [19.145136, 51.919438],
|
||||
"波多黎各": [-66.590149, 18.220833],
|
||||
"北朝鲜": [127.510093, 40.339852],
|
||||
"葡萄牙": [-8.224454, 39.39987199999999],
|
||||
"巴拉圭": [-58.443832, -23.442503],
|
||||
"卡塔尔": [51.183884, 25.354826],
|
||||
"罗马尼亚": [24.96676, 45.943161],
|
||||
"俄罗斯": [105.318756, 61.52401],
|
||||
"俄罗斯联邦": [105.318756, 61.52401],
|
||||
"卢旺达": [29.873888, -1.940278],
|
||||
"西撒哈拉": [-12.885834, 24.215527],
|
||||
"沙特阿拉伯": [45.079162, 23.885942],
|
||||
"苏丹": [30.217636, 12.862807],
|
||||
"南苏丹": [31.3069788, 6.876991899999999],
|
||||
"塞内加尔": [-14.452362, 14.497401],
|
||||
"所罗门群岛": [160.156194, -9.64571],
|
||||
"塞拉利昂": [-11.779889, 8.460555],
|
||||
"萨尔瓦多": [-88.89653, 13.794185],
|
||||
"索马里兰": [46.8252838, 9.411743399999999],
|
||||
"索马里": [46.199616, 5.152149],
|
||||
"塞尔维亚": [21.005859, 44.016521],
|
||||
"苏里南": [-56.027783, 3.919305],
|
||||
"斯洛伐克共和国": [19.699024, 48.669026],
|
||||
"斯洛文尼亚": [14.995463, 46.151241],
|
||||
"瑞典": [18.643501, 60.12816100000001],
|
||||
"斯威士兰": [31.465866, -26.522503],
|
||||
"叙利亚": [38.996815, 34.80207499999999],
|
||||
"乍得": [18.732207, 15.454166],
|
||||
"多哥": [0.824782, 8.619543],
|
||||
"泰国": [100.992541, 15.870032],
|
||||
"塔吉克斯坦共和国": [71.276093, 38.861034],
|
||||
"土库曼斯坦": [59.556278, 38.969719],
|
||||
"东帝汶": [125.727539, -8.874217],
|
||||
"特里尼达和多巴哥": [-61.222503, 10.691803],
|
||||
"突尼斯": [9.537499, 33.886917],
|
||||
"土耳其": [35.243322, 38.963745],
|
||||
"坦桑尼亚": [34.888822, -6.369028],
|
||||
"乌干达": [32.290275, 1.373333],
|
||||
"乌克兰": [31.16558, 48.379433],
|
||||
"乌拉圭": [-55.765835, -32.522779],
|
||||
"美国": [-95.712891, 37.09024],
|
||||
"乌兹别克斯坦": [64.585262, 41.377491],
|
||||
"委内瑞拉": [-66.58973, 6.42375],
|
||||
"越南": [108.277199, 14.058324],
|
||||
"瓦努阿图": [166.959158, -15.376706],
|
||||
"西岸": [35.3027226, 31.9465703],
|
||||
"也门": [48.516388, 15.552727],
|
||||
"南非": [22.937506, -30.559482],
|
||||
"赞比亚": [27.849332, -13.133897],
|
||||
"津巴布韦": [29.154857, -19.015438],
|
||||
"科摩罗": [43.872219, -11.875001],
|
||||
"印度尼西亚": [106.515414, -6.103040],
|
||||
"印度": [78.96288, 20.593684],
|
||||
"刚果": [15.12, -4.09],
|
||||
"萨摩亚独立国": [-171.46, 13.5],
|
||||
"朝鲜": [125.30, 39.09],
|
||||
"新加坡": [103.87546, 1.30243],
|
||||
"中非": [18.33, 4.21],
|
||||
"巴勒斯坦": [35.25, 31.79],
|
||||
"圣卢西亚": [-60.58, 14.02],
|
||||
"安提瓜和巴布达": [-61.48, 17.20],
|
||||
"巴巴多斯": [-59.30, 13.05],
|
||||
"开曼群岛": [-81.24, 19.20],
|
||||
"法罗群岛": [-6.56, 62.05],
|
||||
"圣文森特和格林纳丁斯": [-61.10, 13.10],
|
||||
"特立尼达和多巴哥": [-60.32, 11.18],
|
||||
"台澎金马单独关税区": [121.21, 25.02],
|
||||
"中国香港": [114.12, 22.26],
|
||||
"中国澳门": [113.5, 22.2],
|
||||
"格林纳达": [-61.4, 12.7],
|
||||
"塞舌尔共和国": [55.28, -4.4],
|
||||
"多米尼克": [61.23, 15.18],
|
||||
"斐济": [178.30, -18.06],
|
||||
"科特迪瓦": [-5.17, 6.49],
|
||||
"欧盟": [4.47, 50.50]
|
||||
},
|
||||
"nameMap":{
|
||||
"Afghanistan": "阿富汗",
|
||||
"Singapore": "新加坡",
|
||||
"Angola": "安哥拉",
|
||||
"Albania": "阿尔巴尼亚",
|
||||
"United Arab Emirates": "阿拉伯联合酋长国",
|
||||
"Argentina": "阿根廷",
|
||||
"Armenia": "亚美尼亚",
|
||||
"French Southern and Antarctic Lands": "法属南半球和南极领地",
|
||||
"Australia": "澳大利亚",
|
||||
"Austria": "奥地利",
|
||||
"Azerbaijan": "阿塞拜疆",
|
||||
"Seychelles": "塞舌尔共和国",
|
||||
"Burundi": "布隆迪",
|
||||
"Belgium": "比利时",
|
||||
"Benin": "贝宁",
|
||||
"Burkina Faso": "布基纳法索",
|
||||
"Côte d Ivoire": "科特迪瓦",
|
||||
"Bangladesh": "孟加拉人民共和国",
|
||||
"Bulgaria": "保加利亚",
|
||||
"The Bahamas": "巴哈马",
|
||||
"Bosnia and Herzegovina": "波斯尼亚和黑塞哥维那",
|
||||
"Belarus": "白俄罗斯",
|
||||
"Belize": "伯利兹",
|
||||
"Bermuda": "百慕大",
|
||||
"Bolivia": "玻利维亚",
|
||||
"Brazil": "巴西",
|
||||
"Brunei": "文莱",
|
||||
"Bhutan": "不丹",
|
||||
"Botswana": "博茨瓦纳",
|
||||
"Central African Republic": "中非共和国",
|
||||
"Canada": "加拿大",
|
||||
"Switzerland": "瑞士",
|
||||
"Chile": "智利",
|
||||
"China": "中华人民共和国",
|
||||
"Ivory Coast": "象牙海岸",
|
||||
"Cameroon": "喀麦隆",
|
||||
"Dem. Rep. Congo": "刚果民主共和国",
|
||||
"Republic of the Congo": "刚果共和国",
|
||||
"Colombia": "哥伦比亚",
|
||||
"Costa Rica": "哥斯达黎加共和国",
|
||||
"Cuba": "古巴",
|
||||
"Northern Cyprus": "北塞浦路斯",
|
||||
"Cyprus": "塞浦路斯",
|
||||
"Czech Republic": "捷克共和国",
|
||||
"Germany": "德国",
|
||||
"Djibouti": "吉布提",
|
||||
"Denmark": "丹麦",
|
||||
"Dominican Republic": "多明尼加共和国",
|
||||
"Algeria": "阿尔及利亚",
|
||||
"Ecuador": "厄瓜多尔",
|
||||
"Egypt": "埃及",
|
||||
"Eritrea": "厄立特里亚",
|
||||
"Spain": "西班牙",
|
||||
"Estonia": "爱沙尼亚",
|
||||
"Ethiopia": "埃塞俄比亚",
|
||||
"Bahrain": "巴林",
|
||||
"Finland": "芬兰",
|
||||
"Fiji": "斐济",
|
||||
"Falkland Islands": "福克兰群岛",
|
||||
"France": "法国",
|
||||
"Gabon": "加蓬共和国",
|
||||
"United Kingdom": "英国",
|
||||
"Georgia": "格鲁吉亚",
|
||||
"Ghana": "加纳",
|
||||
"Guinea": "几内亚",
|
||||
"Gambia": "冈比亚",
|
||||
"Guinea Bissau": "几内亚比绍",
|
||||
"Greece": "希腊",
|
||||
"Greenland": "格陵兰",
|
||||
"Guatemala": "危地马拉",
|
||||
"French Guiana": "法属圭亚那",
|
||||
"Guyana": "圭亚那",
|
||||
"Honduras": "洪都拉斯",
|
||||
"Croatia": "克罗地亚",
|
||||
"Haiti": "海地",
|
||||
"Hungary": "匈牙利共和国",
|
||||
"Indonesia": "印度尼西亚",
|
||||
"India": "印度",
|
||||
"Ireland": "爱尔兰",
|
||||
"Iran": "伊朗",
|
||||
"Iraq": "伊拉克",
|
||||
"Iceland": "冰岛",
|
||||
"Israel": "以色列",
|
||||
"Italy": "意大利",
|
||||
"Jamaica": "牙买加",
|
||||
"Jordan": "约旦",
|
||||
"Japan": "日本",
|
||||
"Kazakhstan": "哈萨克斯坦",
|
||||
"Kenya": "肯尼亚",
|
||||
"Kyrgyzstan": "吉尔吉斯斯坦",
|
||||
"Cambodia": "柬埔寨",
|
||||
"Kosovo": "科索沃",
|
||||
"Kuwait": "科威特",
|
||||
"Laos": "老挝",
|
||||
"Lebanon": "黎巴嫩",
|
||||
"Liberia": "利比里亚共和国",
|
||||
"Libya": "利比亚",
|
||||
"Sri Lanka": "斯里兰卡",
|
||||
"Lesotho": "莱索托",
|
||||
"Lithuania": "立陶宛",
|
||||
"Luxembourg": "卢森堡",
|
||||
"Latvia": "拉脱维亚共和国",
|
||||
"Morocco": "摩洛哥",
|
||||
"Moldova": "摩尔多瓦",
|
||||
"Madagascar": "马达加斯加",
|
||||
"Mexico": "墨西哥",
|
||||
"Macedonia": "马其顿",
|
||||
"Mali": "马里",
|
||||
"Myanmar": "缅甸",
|
||||
"Montenegro": "黑山共和国",
|
||||
"Mongolia": "蒙古",
|
||||
"Mozambique": "莫桑比克",
|
||||
"Mauritania": "毛里塔尼亚",
|
||||
"Malawi": "马拉维",
|
||||
"Malaysia": "马来西亚",
|
||||
"Namibia": "纳米比亚",
|
||||
"New Caledonia": "新喀里多尼亚",
|
||||
"Niger": "尼日尔",
|
||||
"Nigeria": "尼日利亚",
|
||||
"Nicaragua": "尼加拉瓜",
|
||||
"Netherlands": "荷兰",
|
||||
"Norway": "挪威",
|
||||
"Nepal": "尼泊尔",
|
||||
"New Zealand": "新西兰",
|
||||
"Oman": "阿曼",
|
||||
"Pakistan": "巴基斯坦",
|
||||
"Panama": "巴拿马共和国",
|
||||
"Peru": "秘鲁",
|
||||
"Philippines": "菲律宾",
|
||||
"Papua New Guinea": "巴布亚新几内亚",
|
||||
"Poland": "波兰",
|
||||
"Puerto Rico": "波多黎各",
|
||||
"North Korea": "北朝鲜",
|
||||
"Portugal": "葡萄牙",
|
||||
"Paraguay": "巴拉圭",
|
||||
"Qatar": "卡塔尔",
|
||||
"Romania": "罗马尼亚",
|
||||
"Russia": "俄罗斯",
|
||||
"Rwanda": "卢旺达",
|
||||
"Western Sahara": "西撒哈拉",
|
||||
"Saudi Arabia": "沙特阿拉伯",
|
||||
"Sudan": "苏丹",
|
||||
"S. Sudan": "南苏丹",
|
||||
"Senegal": "塞内加尔",
|
||||
"Solomon Islands": "所罗门群岛",
|
||||
"Sierra Leone": "塞拉利昂",
|
||||
"El Salvador": "萨尔瓦多",
|
||||
"Somaliland": "索马里兰",
|
||||
"Somalia": "索马里",
|
||||
"Republic of Serbia": "塞尔维亚",
|
||||
"Suriname": "苏里南",
|
||||
"Slovakia": "斯洛伐克共和国",
|
||||
"Slovenia": "斯洛文尼亚",
|
||||
"Sweden": "瑞典",
|
||||
"Swaziland": "斯威士兰",
|
||||
"Syria": "叙利亚",
|
||||
"Chad": "乍得",
|
||||
"Togo": "多哥",
|
||||
"Thailand": "泰国",
|
||||
"Tajikistan": "塔吉克斯坦共和国",
|
||||
"Turkmenistan": "土库曼斯坦",
|
||||
"East Timor": "东帝汶",
|
||||
"Trinidad and Tobago": "特立尼达和多巴哥",
|
||||
"Tunisia": "突尼斯",
|
||||
"Turkey": "土耳其",
|
||||
"Uganda": "乌干达",
|
||||
"Ukraine": "乌克兰",
|
||||
"Uruguay": "乌拉圭",
|
||||
"United States": "美国",
|
||||
"Uzbekistan": "乌兹别克斯坦",
|
||||
"Venezuela": "委内瑞拉",
|
||||
"Vietnam": "越南",
|
||||
"Vanuatu": "瓦努阿图",
|
||||
"West Bank": "西岸",
|
||||
"Yemen": "也门",
|
||||
"South Africa": "南非",
|
||||
"Zambia": "赞比亚",
|
||||
"Korea": "韩国",
|
||||
"Tanzania": "坦桑尼亚",
|
||||
"Zimbabwe": "津巴布韦",
|
||||
"Congo": "刚果",
|
||||
"Central African Rep.": "中非",
|
||||
"Serbia": "塞尔维亚",
|
||||
"Bosnia and Herz.": "波黑",
|
||||
"Czech Rep.": "捷克",
|
||||
"W. Sahara": "西撒哈拉",
|
||||
"Lao PDR": "老挝",
|
||||
"Dem. Rep. Korea": "朝鲜",
|
||||
"Falkland Is.": "福克兰群岛",
|
||||
"Timor-Leste": "东帝汶",
|
||||
"Solomon Is.": "所罗门群岛",
|
||||
"Palestine": "巴勒斯坦",
|
||||
"N. Cyprus": "北塞浦路斯",
|
||||
"Aland": "奥兰群岛",
|
||||
"Fr. S. Antarctic Lands": "法属南半球和南极陆地",
|
||||
"Mauritius": "毛里求斯",
|
||||
"Comoros": "科摩罗",
|
||||
"Eq. Guinea": "赤道几内亚",
|
||||
"Guinea-Bissau": "几内亚比绍",
|
||||
"Dominican Rep.": "多米尼加共和国",
|
||||
"Saint Lucia": "圣卢西亚",
|
||||
"Dominica": "多米尼克",
|
||||
"Antigua and Barb.": "安提瓜和巴布达",
|
||||
"U.S. Virgin Is.": "美国原始岛屿",
|
||||
"Montserrat": "蒙塞拉特",
|
||||
"Grenada": "格林纳达",
|
||||
"Barbados": "巴巴多斯",
|
||||
"Samoa": "萨摩亚独立国",
|
||||
"Bahamas": "巴哈马",
|
||||
"Cayman Is.": "开曼群岛",
|
||||
"Faeroe Is.": "法罗群岛",
|
||||
"IsIe of Man": "马恩岛",
|
||||
"Malta": "马耳他共和国",
|
||||
"Jersey": "泽西",
|
||||
"Cape Verde": "佛得角共和国",
|
||||
"Turks and Caicos Is.": "特克斯和凯科斯群岛",
|
||||
"St. Vin. and Gren.": "圣文森特和格林纳丁斯"
|
||||
}
|
||||
}
|
||||
|
After Width: | Height: | Size: 9.8 KiB |
|
After Width: | Height: | Size: 6.6 KiB |
|
After Width: | Height: | Size: 5.7 KiB |
|
After Width: | Height: | Size: 5.6 KiB |
|
After Width: | Height: | Size: 7.7 KiB |
|
After Width: | Height: | Size: 6.2 KiB |
|
After Width: | Height: | Size: 8.0 KiB |
|
After Width: | Height: | Size: 7.5 KiB |
|
After Width: | Height: | Size: 313 B |
|
After Width: | Height: | Size: 304 B |
|
After Width: | Height: | Size: 954 B |
|
After Width: | Height: | Size: 2.2 KiB |
|
After Width: | Height: | Size: 1.4 KiB |
|
After Width: | Height: | Size: 1.2 KiB |
|
After Width: | Height: | Size: 726 B |
|
After Width: | Height: | Size: 944 B |
|
After Width: | Height: | Size: 2.2 KiB |
|
After Width: | Height: | Size: 810 B |
|
After Width: | Height: | Size: 2.6 KiB |
|
After Width: | Height: | Size: 3.9 KiB |
|
After Width: | Height: | Size: 1.6 KiB |
|
After Width: | Height: | Size: 2.2 KiB |
|
After Width: | Height: | Size: 4.6 KiB |
|
After Width: | Height: | Size: 4.8 KiB |
|
After Width: | Height: | Size: 4.5 KiB |
|
After Width: | Height: | Size: 2.4 KiB |
|
After Width: | Height: | Size: 26 KiB |
|
After Width: | Height: | Size: 7.3 KiB |
|
After Width: | Height: | Size: 3.4 KiB |
|
After Width: | Height: | Size: 14 KiB |
|
After Width: | Height: | Size: 12 KiB |
|
After Width: | Height: | Size: 9.6 KiB |
|
After Width: | Height: | Size: 9.3 KiB |
|
After Width: | Height: | Size: 11 KiB |
|
After Width: | Height: | Size: 8.5 KiB |
|
After Width: | Height: | Size: 9.4 KiB |
|
After Width: | Height: | Size: 9.0 KiB |
|
After Width: | Height: | Size: 10 KiB |
|
After Width: | Height: | Size: 9.4 KiB |
|
After Width: | Height: | Size: 11 KiB |
|
After Width: | Height: | Size: 1.5 KiB |
|
After Width: | Height: | Size: 11 KiB |
|
After Width: | Height: | Size: 37 KiB |
|
After Width: | Height: | Size: 9.7 KiB |
|
After Width: | Height: | Size: 85 KiB |
|
After Width: | Height: | Size: 6.7 KiB |
|
After Width: | Height: | Size: 94 KiB |
|
After Width: | Height: | Size: 2.3 KiB |
|
After Width: | Height: | Size: 11 KiB |
|
After Width: | Height: | Size: 4.2 KiB |
|
After Width: | Height: | Size: 63 KiB |
|
After Width: | Height: | Size: 1.0 MiB |
|
After Width: | Height: | Size: 2.7 KiB |
|
After Width: | Height: | Size: 174 KiB |
|
After Width: | Height: | Size: 25 KiB |
|
After Width: | Height: | Size: 13 KiB |
|
After Width: | Height: | Size: 24 KiB |
|
After Width: | Height: | Size: 2.8 KiB |
|
After Width: | Height: | Size: 3.5 MiB |
|
After Width: | Height: | Size: 314 KiB |
|
After Width: | Height: | Size: 2.1 KiB |
|
After Width: | Height: | Size: 514 B |
|
After Width: | Height: | Size: 409 B |
|
After Width: | Height: | Size: 431 B |
|
After Width: | Height: | Size: 439 B |
|
After Width: | Height: | Size: 292 B |
|
After Width: | Height: | Size: 286 B |
|
After Width: | Height: | Size: 293 B |
|
After Width: | Height: | Size: 448 B |
|
After Width: | Height: | Size: 416 B |
|
After Width: | Height: | Size: 509 B |
|
After Width: | Height: | Size: 17 KiB |
|
After Width: | Height: | Size: 17 KiB |
|
After Width: | Height: | Size: 17 KiB |
|
After Width: | Height: | Size: 2.1 KiB |
|
After Width: | Height: | Size: 12 KiB |
|
After Width: | Height: | Size: 2.3 KiB |
@@ -0,0 +1,171 @@
|
||||
// 全局样式
|
||||
|
||||
@font-face {
|
||||
font-family: 'DMSans';
|
||||
font-style: normal;
|
||||
font-weight: 400;
|
||||
src: url(../fonts/DMSans.woff2) format('woff2');
|
||||
}
|
||||
|
||||
@font-face {
|
||||
font-family: 'Montserrat';
|
||||
font-style: normal;
|
||||
font-weight: 400;
|
||||
src: url(../fonts/Montserrat.woff2) format('woff2');
|
||||
}
|
||||
|
||||
.btn-icon {
|
||||
font-size: 10px;
|
||||
}
|
||||
|
||||
.el-btn-red {
|
||||
color: #fa6962 !important;
|
||||
|
||||
&:hover {
|
||||
opacity: 0.9;
|
||||
}
|
||||
|
||||
&:active {
|
||||
opacity: 0.7;
|
||||
}
|
||||
}
|
||||
|
||||
// 顶部进度条颜色
|
||||
#nprogress .bar {
|
||||
background-color: color-mix(in srgb, var(--main-color) 65%, white);
|
||||
}
|
||||
|
||||
// 处理移动端组件兼容性
|
||||
@media screen and (max-width: $device-phone) {
|
||||
* {
|
||||
cursor: default !important;
|
||||
}
|
||||
|
||||
.el-col2 {
|
||||
margin-top: 15px;
|
||||
}
|
||||
}
|
||||
|
||||
// 背景滤镜
|
||||
*,
|
||||
::before,
|
||||
::after {
|
||||
--tw-backdrop-blur: ;
|
||||
--tw-backdrop-brightness: ;
|
||||
--tw-backdrop-contrast: ;
|
||||
--tw-backdrop-grayscale: ;
|
||||
--tw-backdrop-hue-rotate: ;
|
||||
--tw-backdrop-invert: ;
|
||||
--tw-backdrop-opacity: ;
|
||||
--tw-backdrop-saturate: ;
|
||||
--tw-backdrop-sepia: ;
|
||||
}
|
||||
|
||||
// 色弱模式
|
||||
.color-weak {
|
||||
filter: invert(80%);
|
||||
-webkit-filter: invert(80%);
|
||||
}
|
||||
|
||||
#noop {
|
||||
display: none;
|
||||
}
|
||||
|
||||
// 语言切换选中样式
|
||||
.langDropDownStyle {
|
||||
// 选中项背景颜色
|
||||
.is-selected {
|
||||
background-color: rgba(var(--art-gray-200-rgb), 0.8) !important;
|
||||
}
|
||||
|
||||
// 语言切换按钮菜单样式优化
|
||||
.lang-btn-item {
|
||||
.el-dropdown-menu__item {
|
||||
padding-left: 13px !important;
|
||||
padding-right: 6px !important;
|
||||
margin-bottom: 3px !important;
|
||||
}
|
||||
|
||||
&:last-child {
|
||||
.el-dropdown-menu__item {
|
||||
margin-bottom: 0 !important;
|
||||
}
|
||||
}
|
||||
|
||||
.menu-txt {
|
||||
min-width: 60px;
|
||||
display: block;
|
||||
}
|
||||
|
||||
i {
|
||||
font-size: 10px;
|
||||
margin-left: 10px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// 盒子默认边框
|
||||
.page-content,
|
||||
.art-custom-card {
|
||||
border: 1px solid var(--art-card-border) !important;
|
||||
}
|
||||
|
||||
// 盒子边框
|
||||
[data-box-mode='border-mode'] {
|
||||
.page-content,
|
||||
.art-custom-card,
|
||||
.art-table-card {
|
||||
border: 1px solid var(--art-card-border) !important;
|
||||
}
|
||||
|
||||
.layout-sidebar {
|
||||
border-right: 1px solid var(--art-card-border) !important;
|
||||
}
|
||||
}
|
||||
|
||||
// 盒子阴影
|
||||
[data-box-mode='shadow-mode'] {
|
||||
.page-content,
|
||||
.art-custom-card,
|
||||
.art-table-card {
|
||||
box-shadow: 0px 0px 4px 0px rgba(0, 0, 0, 0.04) !important;
|
||||
border: 1px solid rgba(var(--art-gray-300-rgb), 0.3) !important;
|
||||
}
|
||||
|
||||
.layout-sidebar {
|
||||
border-right: 1px solid rgba(var(--art-gray-300-rgb), 0.4) !important;
|
||||
}
|
||||
}
|
||||
|
||||
// 元素全屏
|
||||
.el-full-screen {
|
||||
position: fixed;
|
||||
top: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
width: 100vw !important;
|
||||
height: 100vh !important;
|
||||
z-index: 500;
|
||||
margin-top: 0;
|
||||
padding: 15px;
|
||||
box-sizing: border-box;
|
||||
background-color: var(--art-main-bg-color);
|
||||
|
||||
.art-table-full-screen {
|
||||
height: 100% !important;
|
||||
}
|
||||
}
|
||||
|
||||
// 表格卡片
|
||||
.art-table-card {
|
||||
flex: 1;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
margin-top: 15px;
|
||||
border-radius: calc(var(--custom-radius) / 2 + 2px) !important;
|
||||
|
||||
.el-card__body {
|
||||
height: 100%;
|
||||
overflow: hidden;
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,11 @@
|
||||
// 主题切换过渡优化,去除不适感
|
||||
.theme-change {
|
||||
* {
|
||||
transition: 0s !important;
|
||||
}
|
||||
|
||||
.el-switch__core,
|
||||
.el-switch__action {
|
||||
transition: all 0.3s !important;
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,215 @@
|
||||
/*
|
||||
* 深色主题
|
||||
* 单页面移除深色主题 document.getElementsByTagName("html")[0].removeAttribute('class')
|
||||
*/
|
||||
|
||||
$font-color: rgba(#ffffff, 0.7);
|
||||
$background-color: #070707;
|
||||
|
||||
/* 覆盖element-plus默认深色背景色 */
|
||||
html.dark {
|
||||
// ✅ element-plus
|
||||
// --el-bg-color: $background-color;
|
||||
--el-text-color-regular: $font-color;
|
||||
|
||||
// ✅ 富文本编辑器
|
||||
// 工具栏背景颜色
|
||||
--w-e-toolbar-bg-color: var(--art-main-bg-color);
|
||||
// 输入区域背景颜色
|
||||
--w-e-textarea-bg-color: var(--art-main-bg-color);
|
||||
// 工具栏文字颜色
|
||||
--w-e-toolbar-color: var(--art-text-gray-600);
|
||||
// 选中菜单颜色
|
||||
--w-e-toolbar-active-bg-color: rgba(var(--art-gray-100-rgb), 0.8);
|
||||
// 弹窗边框颜色
|
||||
--w-e-toolbar-border-color: var(--art-border-dashed-color);
|
||||
// 分割线颜色
|
||||
--w-e-textarea-border-color: var(--art-border-dashed-color);
|
||||
// 链接输入框边框颜色
|
||||
--w-e-modal-button-border-color: var(--art-border-dashed-color);
|
||||
// 表格头颜色
|
||||
--w-e-textarea-slight-bg-color: var(--art-color);
|
||||
// 按钮背景颜色
|
||||
--w-e-modal-button-bg-color: var(--art-color);
|
||||
}
|
||||
|
||||
.dark {
|
||||
color: $font-color !important;
|
||||
background: $background-color !important;
|
||||
|
||||
/* 全局文字颜色 */
|
||||
body {
|
||||
color: $font-color;
|
||||
|
||||
h1,
|
||||
h2,
|
||||
h3,
|
||||
h4,
|
||||
h5,
|
||||
h6,
|
||||
.lang .btn,
|
||||
.layout-top-bar .user .name,
|
||||
.dark-text {
|
||||
color: $font-color !important;
|
||||
}
|
||||
}
|
||||
|
||||
// 图片降低亮度
|
||||
img {
|
||||
filter: brightness(0.92) saturate(1.25);
|
||||
}
|
||||
|
||||
.editor-wrapper {
|
||||
*:not(pre code *) {
|
||||
color: inherit !important;
|
||||
}
|
||||
}
|
||||
|
||||
.img-cutter {
|
||||
*:not([class^='el-']) {
|
||||
color: inherit !important;
|
||||
}
|
||||
}
|
||||
|
||||
// ✅ 左侧菜单样式
|
||||
.layout-sidebar,
|
||||
.dual-menu {
|
||||
.el-menu-dark {
|
||||
// 选中颜色
|
||||
.el-menu-item.is-active {
|
||||
background: transparent;
|
||||
}
|
||||
|
||||
.el-sub-menu__title {
|
||||
.el-icon {
|
||||
color: var(--art-gray-800) !important;
|
||||
}
|
||||
}
|
||||
|
||||
// 鼠标移入背景色
|
||||
.el-sub-menu__title:hover,
|
||||
.el-menu-item:not(.is-active):hover {
|
||||
background: rgba(var(--art-gray-200-rgb), 0.6) !important;
|
||||
}
|
||||
|
||||
[level-item='2'].is-active:not(.el-menu--collapse) {
|
||||
&.is-active {
|
||||
&:before {
|
||||
margin-left: -10px !important;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.el-menu:not(.el-menu--collapse) {
|
||||
// 选中颜色
|
||||
.el-menu-item.is-active {
|
||||
&:before {
|
||||
content: '';
|
||||
width: 5px;
|
||||
height: 5px;
|
||||
border-radius: 50%;
|
||||
position: absolute;
|
||||
top: 0;
|
||||
bottom: 0;
|
||||
margin: auto;
|
||||
background: var(--main-color) !important;
|
||||
transition: all 0.2s;
|
||||
margin-left: -18px;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.page-content .article-list .item .left .outer > div {
|
||||
border-right-color: var(--dark-border-color) !important;
|
||||
}
|
||||
|
||||
// ✅ 富文本编辑器
|
||||
// 分隔线
|
||||
.w-e-bar-divider {
|
||||
background-color: var(--art-gray-300) !important;
|
||||
}
|
||||
|
||||
// 下拉选择框
|
||||
.w-e-select-list {
|
||||
background-color: var(--art-main-bg-color) !important;
|
||||
border: 1px solid var(--art-border-dashed-color) !important;
|
||||
}
|
||||
|
||||
/* 弹出框 */
|
||||
.w-e-drop-panel {
|
||||
border: 1px solid var(--art-border-dashed-color) !important;
|
||||
}
|
||||
|
||||
/* 工具栏菜单 */
|
||||
.w-e-bar-item-group .w-e-bar-item-menus-container {
|
||||
background-color: var(--art-main-bg-color) !important;
|
||||
border: 1px solid var(--art-border-dashed-color) !important;
|
||||
}
|
||||
|
||||
/* 下拉选择框 hover 样式调整 */
|
||||
.w-e-select-list ul li:hover,
|
||||
/* 工具栏 hover 按钮背景颜色 */
|
||||
.w-e-bar-item button:hover {
|
||||
background-color: var(--art-color) !important;
|
||||
}
|
||||
|
||||
/* 代码块 */
|
||||
.w-e-text-container [data-slate-editor] pre > code {
|
||||
background-color: var(--art-gray-100) !important;
|
||||
border: 1px solid var(--art-border-dashed-color) !important;
|
||||
text-shadow: none !important;
|
||||
}
|
||||
|
||||
/* 引用 */
|
||||
.w-e-text-container [data-slate-editor] blockquote {
|
||||
border-left: 4px solid var(--art-gray-200) !important;
|
||||
background-color: var(--art-color);
|
||||
}
|
||||
|
||||
.editor-wrapper {
|
||||
.w-e-text-container [data-slate-editor] .table-container th:last-of-type {
|
||||
border-right: 1px solid var(--art-gray-200) !important;
|
||||
}
|
||||
|
||||
.w-e-modal {
|
||||
background-color: var(--art-color);
|
||||
}
|
||||
}
|
||||
|
||||
// 工作台标签文字颜色
|
||||
.worktab .scroll-view .tabs li {
|
||||
color: var(--art-text-gray-800) !important;
|
||||
}
|
||||
|
||||
// 顶部按钮文字颜色
|
||||
.layout-top-bar .btn-box .btn i,
|
||||
.fast-enter-trigger .btn i {
|
||||
color: var(--art-text-gray-700) !important;
|
||||
}
|
||||
}
|
||||
|
||||
// 移动端文字颜色
|
||||
@media screen and (max-width: $device-phone) {
|
||||
.dark {
|
||||
$font-color: rgba(#ffffff, 0.8);
|
||||
--el-text-color-regular: $font-color !important;
|
||||
color: $font-color !important;
|
||||
|
||||
body {
|
||||
color: $font-color !important;
|
||||
|
||||
h1,
|
||||
h2,
|
||||
h3,
|
||||
h4,
|
||||
h5,
|
||||
h6,
|
||||
.lang .btn,
|
||||
.layout-top-bar .user .name {
|
||||
color: $font-color !important;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,16 @@
|
||||
// 自定义Element 暗黑主题
|
||||
|
||||
@forward 'element-plus/theme-chalk/src/dark/var.scss' //
|
||||
with (
|
||||
$colors: (
|
||||
//
|
||||
'white': #ffffff,
|
||||
'black': #000000,
|
||||
'success': ('base': #13deb9),
|
||||
'warning': ('base': #ffae1f),
|
||||
'danger': ('base': #ff4d4f),
|
||||
'error': ('base': #fa896b)
|
||||
)
|
||||
);
|
||||
|
||||
@use 'element-plus/theme-chalk/src/dark/css-vars.scss' as *;
|
||||
@@ -0,0 +1,34 @@
|
||||
// https://github.com/element-plus/element-plus/blob/dev/packages/theme-chalk/src/common/var.scss
|
||||
// 自定义Element 亮色主题
|
||||
|
||||
@forward 'element-plus/theme-chalk/src/common/var.scss' //
|
||||
with (
|
||||
//
|
||||
$colors: (
|
||||
//
|
||||
'white': #ffffff,
|
||||
'black': #000000,
|
||||
'success': ('base': #13deb9),
|
||||
'warning': ('base': #ffae1f),
|
||||
'danger': ('base': #ff4d4f),
|
||||
'error': ('base': #fa896b)
|
||||
),
|
||||
$button: (
|
||||
//
|
||||
'hover-bg-color': var(--el-color-primary-light-9),
|
||||
'hover-border-color': var(--el-color-primary),
|
||||
'border-color': var(--el-color-primary),
|
||||
'text-color': var(--el-color-primary)
|
||||
),
|
||||
$messagebox: (
|
||||
//
|
||||
'border-radius': '12px'
|
||||
),
|
||||
$popover: (
|
||||
//
|
||||
'padding': '14px',
|
||||
'border-radius': '10px'
|
||||
)
|
||||
);
|
||||
|
||||
@use 'element-plus/theme-chalk/src/index.scss' as *;
|
||||
@@ -0,0 +1,411 @@
|
||||
// 优化 Element Plus 组件库默认样式
|
||||
|
||||
:root {
|
||||
// 系统主色
|
||||
--main-color: var(--el-color-primary);
|
||||
--el-color-white: white !important;
|
||||
--el-color-black: white !important;
|
||||
// 输入框边框颜色
|
||||
// --el-border-color: #E4E4E7 !important; // DCDFE6
|
||||
// 按钮粗度
|
||||
--el-font-weight-primary: 400 !important;
|
||||
|
||||
--el-component-custom-height: 36px !important;
|
||||
|
||||
--el-component-size: var(--el-component-custom-height) !important;
|
||||
|
||||
// 边框、按钮圆角...
|
||||
--el-border-radius-base: calc(var(--custom-radius) / 3 + 2px) !important;
|
||||
|
||||
--el-border-radius-small: 10px !important;
|
||||
--el-messagebox-border-radius: 10px !important;
|
||||
|
||||
.region .el-radio-button__original-radio:checked + .el-radio-button__inner {
|
||||
color: var(--main-color);
|
||||
}
|
||||
}
|
||||
|
||||
// 优化菜单折叠展开动画(提升动画流畅度)
|
||||
.el-menu.el-menu--inline {
|
||||
transition: max-height 0.26s cubic-bezier(0.4, 0, 0.2, 1) !important;
|
||||
}
|
||||
|
||||
// 优化菜单 item hover 动画(提升鼠标跟手感)
|
||||
.el-sub-menu__title,
|
||||
.el-menu-item {
|
||||
transition: background-color 0s !important;
|
||||
}
|
||||
|
||||
// -------------------------------- 修改 el-size=default 组件默认高度 start --------------------------------
|
||||
// 修改 el-button 高度
|
||||
.el-button--default {
|
||||
height: var(--el-component-custom-height) !important;
|
||||
}
|
||||
|
||||
// 修改 el-select 高度
|
||||
.el-select--default {
|
||||
.el-select__wrapper {
|
||||
min-height: var(--el-component-custom-height) !important;
|
||||
}
|
||||
}
|
||||
|
||||
// 修改 el-checkbox-button 高度
|
||||
.el-checkbox-button--default .el-checkbox-button__inner,
|
||||
// 修改 el-radio-button 高度
|
||||
.el-radio-button--default .el-radio-button__inner {
|
||||
padding: 10px 15px !important;
|
||||
}
|
||||
// -------------------------------- 修改 el-size=default 组件默认高度 end --------------------------------
|
||||
|
||||
.el-pagination.is-background .btn-next,
|
||||
.el-pagination.is-background .btn-prev,
|
||||
.el-pagination.is-background .el-pager li {
|
||||
border-radius: 6px;
|
||||
}
|
||||
|
||||
.el-popover {
|
||||
min-width: 80px;
|
||||
}
|
||||
|
||||
.el-dialog {
|
||||
border-radius: 100px !important;
|
||||
border-radius: calc(var(--custom-radius) / 1.2 + 2px) !important;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.el-dialog__header {
|
||||
.el-dialog__title {
|
||||
font-size: 16px;
|
||||
}
|
||||
}
|
||||
|
||||
.el-dialog__body {
|
||||
padding: 25px 0 !important;
|
||||
position: relative; // 为了兼容 el-pagination 样式,需要设置 relative,不然会影响 el-pagination 的样式,比如 el-pagination__jump--small 会被影响,导致 el-pagination__jump--small 按钮无法点击,详见 URL_ADDRESS.com/element-plus/element-plus/issues/5684#issuecomment-1176299275;
|
||||
}
|
||||
|
||||
.el-dialog.el-dialog-border {
|
||||
.el-dialog__body {
|
||||
// 上边框
|
||||
&::before,
|
||||
// 下边框
|
||||
&::after {
|
||||
content: '';
|
||||
position: absolute;
|
||||
left: -16px;
|
||||
width: calc(100% + 32px);
|
||||
height: 1px;
|
||||
background-color: rgba(var(--art-gray-300-rgb), 0.56);
|
||||
}
|
||||
|
||||
&::before {
|
||||
top: 0;
|
||||
}
|
||||
|
||||
&::after {
|
||||
bottom: 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// ✅ el-message 样式优化
|
||||
.el-message {
|
||||
background-color: var(--art-main-bg-color) !important;
|
||||
border: 0 !important;
|
||||
box-shadow:
|
||||
0 6px 16px 0 rgba(0, 0, 0, 0.08),
|
||||
0 3px 6px -4px rgba(0, 0, 0, 0.12),
|
||||
0 9px 28px 8px rgba(0, 0, 0, 0.05) !important;
|
||||
|
||||
p {
|
||||
color: #515a6e !important;
|
||||
font-size: 13px;
|
||||
}
|
||||
}
|
||||
|
||||
// 修改 el-dropdown 样式
|
||||
.el-dropdown-menu {
|
||||
padding: 6px !important;
|
||||
border-radius: 10px !important;
|
||||
border: none !important;
|
||||
|
||||
.el-dropdown-menu__item {
|
||||
padding: 6px 16px !important;
|
||||
border-radius: 6px !important;
|
||||
|
||||
&:hover:not(.is-disabled) {
|
||||
color: var(--art-gray-900) !important;
|
||||
background-color: var(--art-gray-200) !important;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// 隐藏 select、dropdown 的三角
|
||||
.el-select__popper,
|
||||
.el-dropdown__popper {
|
||||
margin-top: -6px !important;
|
||||
|
||||
.el-popper__arrow {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
|
||||
.el-dropdown-selfdefine:focus {
|
||||
outline: none !important;
|
||||
}
|
||||
|
||||
// 处理移动端组件兼容性
|
||||
@media screen and (max-width: $device-phone) {
|
||||
.el-message-box,
|
||||
.el-message,
|
||||
.el-dialog {
|
||||
width: calc(100% - 24px) !important;
|
||||
}
|
||||
|
||||
.el-date-picker.has-sidebar.has-time {
|
||||
width: calc(100% - 24px);
|
||||
left: 12px !important;
|
||||
}
|
||||
|
||||
.el-picker-panel *[slot='sidebar'],
|
||||
.el-picker-panel__sidebar {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.el-picker-panel *[slot='sidebar'] + .el-picker-panel__body,
|
||||
.el-picker-panel__sidebar + .el-picker-panel__body {
|
||||
margin-left: 0;
|
||||
}
|
||||
}
|
||||
|
||||
// 修改el-button样式
|
||||
.el-button {
|
||||
&.el-button--text {
|
||||
background-color: transparent !important;
|
||||
padding: 0 !important;
|
||||
|
||||
span {
|
||||
margin-left: 0 !important;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// 修改el-tag样式
|
||||
.el-tag {
|
||||
height: 26px !important;
|
||||
line-height: 26px !important;
|
||||
border: 0 !important;
|
||||
border-radius: 6px !important;
|
||||
font-weight: bold;
|
||||
transition: all 0s !important;
|
||||
}
|
||||
|
||||
.el-checkbox-group {
|
||||
&.el-table-filter__checkbox-group label.el-checkbox {
|
||||
height: 17px !important;
|
||||
|
||||
.el-checkbox__label {
|
||||
font-weight: 400 !important;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.el-checkbox {
|
||||
.el-checkbox__inner {
|
||||
width: 18px !important;
|
||||
height: 18px !important;
|
||||
border-radius: 4px !important;
|
||||
|
||||
&::before {
|
||||
content: '';
|
||||
height: 3px !important;
|
||||
top: 6px !important;
|
||||
background-color: #fff !important;
|
||||
transform: scale(0.6) !important;
|
||||
}
|
||||
|
||||
&::after {
|
||||
width: 4px;
|
||||
height: 8px;
|
||||
left: 0;
|
||||
right: 0;
|
||||
top: 0;
|
||||
bottom: 4px;
|
||||
margin: auto;
|
||||
border: 2px solid var(--el-checkbox-checked-icon-color);
|
||||
border-left: 0;
|
||||
border-top: 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.el-notification .el-notification__icon {
|
||||
font-size: 22px !important;
|
||||
}
|
||||
|
||||
// 修改 el-message-box 样式
|
||||
.el-message-box__headerbtn .el-message-box__close,
|
||||
.el-dialog__headerbtn .el-dialog__close {
|
||||
color: var(--art-gray-500) !important;
|
||||
top: 7px !important;
|
||||
right: 7px !important;
|
||||
padding: 7px !important;
|
||||
border-radius: 5px !important;
|
||||
transition: all 0.3s !important;
|
||||
|
||||
&:hover {
|
||||
background-color: var(--art-gray-200) !important;
|
||||
color: var(--art-gray-800) !important;
|
||||
}
|
||||
}
|
||||
|
||||
.el-message-box {
|
||||
padding: 25px 20px !important;
|
||||
}
|
||||
|
||||
.el-message-box__title {
|
||||
font-weight: 500 !important;
|
||||
}
|
||||
|
||||
.el-table__column-filter-trigger i {
|
||||
color: var(--main-color) !important;
|
||||
margin: -3px 0 0 2px;
|
||||
}
|
||||
|
||||
// 去除 el-dropdown 鼠标放上去出现的边框
|
||||
.el-tooltip__trigger:focus-visible {
|
||||
outline: unset;
|
||||
}
|
||||
|
||||
// ipad 表单右侧按钮优化
|
||||
@media screen and (max-width: $device-ipad-pro) {
|
||||
.el-table-fixed-column--right {
|
||||
padding-right: 0 !important;
|
||||
|
||||
.el-button {
|
||||
margin: 5px 10px 5px 0 !important;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.login-out-dialog {
|
||||
padding: 30px 20px !important;
|
||||
border-radius: 10px !important;
|
||||
}
|
||||
|
||||
// 修改 dialog 动画
|
||||
.dialog-fade-enter-active {
|
||||
.el-dialog:not(.is-draggable) {
|
||||
animation: dialog-open 0.3s cubic-bezier(0.32, 0.14, 0.15, 0.86);
|
||||
|
||||
// 修复 el-dialog 动画后宽度不自适应问题
|
||||
.el-select__selected-item {
|
||||
display: inline-block;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.dialog-fade-leave-active {
|
||||
animation: fade-out 0.2s linear;
|
||||
|
||||
.el-dialog:not(.is-draggable) {
|
||||
animation: dialog-close 0.5s;
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes dialog-open {
|
||||
0% {
|
||||
opacity: 0;
|
||||
transform: scale(0.2);
|
||||
}
|
||||
|
||||
100% {
|
||||
opacity: 1;
|
||||
transform: scale(1);
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes dialog-close {
|
||||
0% {
|
||||
opacity: 1;
|
||||
transform: scale(1);
|
||||
}
|
||||
|
||||
100% {
|
||||
opacity: 0;
|
||||
transform: scale(0.2);
|
||||
}
|
||||
}
|
||||
|
||||
// 遮罩层动画
|
||||
@keyframes fade-out {
|
||||
0% {
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
100% {
|
||||
opacity: 0;
|
||||
}
|
||||
}
|
||||
|
||||
// 修改 el-select 样式
|
||||
.el-select__popper:not(.el-tree-select__popper) {
|
||||
.el-select-dropdown__list {
|
||||
padding: 5px !important;
|
||||
|
||||
.el-select-dropdown__item {
|
||||
height: 34px !important;
|
||||
line-height: 34px !important;
|
||||
border-radius: 6px !important;
|
||||
|
||||
&.is-selected {
|
||||
color: var(--art-gray-900) !important;
|
||||
font-weight: 400 !important;
|
||||
background-color: var(--art-gray-200) !important;
|
||||
margin-bottom: 4px !important;
|
||||
}
|
||||
|
||||
&:hover {
|
||||
background-color: var(--art-gray-200) !important;
|
||||
}
|
||||
}
|
||||
|
||||
.el-select-dropdown__item:hover ~ .is-selected,
|
||||
.el-select-dropdown__item.is-selected:has(~ .el-select-dropdown__item:hover) {
|
||||
background-color: transparent !important;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// 修改 el-tree-select 样式
|
||||
.el-tree-select__popper {
|
||||
.el-select-dropdown__list {
|
||||
padding: 5px !important;
|
||||
|
||||
.el-tree-node {
|
||||
.el-tree-node__content {
|
||||
height: 36px !important;
|
||||
border-radius: 6px !important;
|
||||
|
||||
&:hover {
|
||||
background-color: var(--art-gray-200) !important;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// 实现水波纹在文字下面效果
|
||||
.el-button > span {
|
||||
position: relative;
|
||||
z-index: 10;
|
||||
}
|
||||
|
||||
// 修复 el-table 空数据块样式
|
||||
.el-table__empty-block {
|
||||
height: 100% !important;
|
||||
min-height: 200px !important;
|
||||
display: flex !important;
|
||||
align-items: center !important;
|
||||
justify-content: center !important;
|
||||
}
|
||||
@@ -0,0 +1,157 @@
|
||||
// sass 混合宏(函数)
|
||||
|
||||
/**
|
||||
* 溢出省略号
|
||||
* @param {Number} 行数
|
||||
*/
|
||||
@mixin ellipsis($rowCount: 1) {
|
||||
@if $rowCount <=1 {
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
white-space: nowrap;
|
||||
} @else {
|
||||
min-width: 0;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
display: -webkit-box;
|
||||
-webkit-line-clamp: $rowCount;
|
||||
-webkit-box-orient: vertical;
|
||||
}
|
||||
}
|
||||
|
||||
/**
|
||||
* 控制用户能否选中文本
|
||||
* @param {String} 类型
|
||||
*/
|
||||
@mixin userSelect($value: none) {
|
||||
user-select: $value;
|
||||
-moz-user-select: $value;
|
||||
-ms-user-select: $value;
|
||||
-webkit-user-select: $value;
|
||||
}
|
||||
|
||||
// 绝对定位居中
|
||||
@mixin absoluteCenter() {
|
||||
position: absolute;
|
||||
left: 0;
|
||||
right: 0;
|
||||
top: 0;
|
||||
bottom: 0;
|
||||
margin: auto;
|
||||
}
|
||||
|
||||
/**
|
||||
* css3动画
|
||||
*
|
||||
*/
|
||||
@mixin animation(
|
||||
$from: (
|
||||
width: 0px
|
||||
),
|
||||
$to: (
|
||||
width: 100px
|
||||
),
|
||||
$name: mymove,
|
||||
$animate: mymove 2s 1 linear infinite
|
||||
) {
|
||||
-webkit-animation: $animate;
|
||||
-o-animation: $animate;
|
||||
animation: $animate;
|
||||
|
||||
@keyframes #{$name} {
|
||||
from {
|
||||
@each $key, $value in $from {
|
||||
#{$key}: #{$value};
|
||||
}
|
||||
}
|
||||
|
||||
to {
|
||||
@each $key, $value in $to {
|
||||
#{$key}: #{$value};
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@-webkit-keyframes #{$name} {
|
||||
from {
|
||||
@each $key, $value in $from {
|
||||
$key: $value;
|
||||
}
|
||||
}
|
||||
|
||||
to {
|
||||
@each $key, $value in $to {
|
||||
$key: $value;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// 圆形盒子
|
||||
@mixin circle($size: 11px, $bg: #fff) {
|
||||
border-radius: 50%;
|
||||
width: $size;
|
||||
height: $size;
|
||||
line-height: $size;
|
||||
text-align: center;
|
||||
background: $bg;
|
||||
}
|
||||
|
||||
// placeholder
|
||||
@mixin placeholder($color: #bbb) {
|
||||
// Firefox
|
||||
&::-moz-placeholder {
|
||||
color: $color;
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
// Internet Explorer 10+
|
||||
&:-ms-input-placeholder {
|
||||
color: $color;
|
||||
}
|
||||
|
||||
// Safari and Chrome
|
||||
&::-webkit-input-placeholder {
|
||||
color: $color;
|
||||
}
|
||||
|
||||
&:placeholder-shown {
|
||||
text-overflow: ellipsis;
|
||||
}
|
||||
}
|
||||
|
||||
//背景透明,文字不透明。兼容IE8
|
||||
@mixin betterTransparentize($color, $alpha) {
|
||||
$c: rgba($color, $alpha);
|
||||
$ie_c: ie_hex_str($c);
|
||||
background: rgba($color, 1);
|
||||
background: $c;
|
||||
background: transparent \9;
|
||||
zoom: 1;
|
||||
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=#{$ie_c}, endColorstr=#{$ie_c});
|
||||
-ms-filter: 'progid:DXImageTransform.Microsoft.gradient(startColorstr=#{$ie_c}, endColorstr=#{$ie_c})';
|
||||
}
|
||||
|
||||
//添加浏览器前缀
|
||||
@mixin browserPrefix($propertyName, $value) {
|
||||
@each $prefix in -webkit-, -moz-, -ms-, -o-, '' {
|
||||
#{$prefix}#{$propertyName}: $value;
|
||||
}
|
||||
}
|
||||
|
||||
// 边框
|
||||
@mixin border($color: red) {
|
||||
border: 1px solid $color;
|
||||
}
|
||||
|
||||
// 背景滤镜
|
||||
@mixin backdropBlur() {
|
||||
--tw-backdrop-blur: blur(30px);
|
||||
-webkit-backdrop-filter: var(--tw-backdrop-blur) var(--tw-backdrop-brightness)
|
||||
var(--tw-backdrop-contrast) var(--tw-backdrop-grayscale) var(--tw-backdrop-hue-rotate)
|
||||
var(--tw-backdrop-invert) var(--tw-backdrop-opacity) var(--tw-backdrop-saturate)
|
||||
var(--tw-backdrop-sepia);
|
||||
backdrop-filter: var(--tw-backdrop-blur) var(--tw-backdrop-brightness) var(--tw-backdrop-contrast)
|
||||
var(--tw-backdrop-grayscale) var(--tw-backdrop-hue-rotate) var(--tw-backdrop-invert)
|
||||
var(--tw-backdrop-opacity) var(--tw-backdrop-saturate) var(--tw-backdrop-sepia);
|
||||
}
|
||||
@@ -0,0 +1,8 @@
|
||||
// 移动端样式处理
|
||||
|
||||
// 去除移动端点击背景色
|
||||
@media screen and (max-width: $device-ipad-pro) {
|
||||
* {
|
||||
-webkit-tap-highlight-color: transparent;
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,117 @@
|
||||
/*
|
||||
Atom One Dark by Daniel Gamage
|
||||
Original One Dark Syntax theme from https://github.com/atom/one-dark-syntax
|
||||
base: #282c34
|
||||
mono-1: #abb2bf
|
||||
mono-2: #818896
|
||||
mono-3: #5c6370
|
||||
hue-1: #56b6c2
|
||||
hue-2: #61aeee
|
||||
hue-3: #c678dd
|
||||
hue-4: #98c379
|
||||
hue-5: #e06c75
|
||||
hue-5-2: #be5046
|
||||
hue-6: #d19a66
|
||||
hue-6-2: #e6c07b
|
||||
*/
|
||||
|
||||
.hljs {
|
||||
display: block;
|
||||
overflow-x: auto;
|
||||
padding: 0.5em;
|
||||
// color: #abb2bf;
|
||||
// background: #282c34;
|
||||
|
||||
color: #a6accd;
|
||||
}
|
||||
|
||||
.hljs-string,
|
||||
.hljs-section,
|
||||
.hljs-selector-class,
|
||||
.hljs-template-variable,
|
||||
.hljs-deletion {
|
||||
color: #aed07e !important;
|
||||
}
|
||||
|
||||
.hljs-comment,
|
||||
.hljs-quote {
|
||||
color: #6f747d;
|
||||
}
|
||||
|
||||
.hljs-doctag,
|
||||
.hljs-keyword,
|
||||
.hljs-formula {
|
||||
color: #c792ea;
|
||||
}
|
||||
|
||||
.hljs-section,
|
||||
.hljs-name,
|
||||
.hljs-selector-tag,
|
||||
.hljs-deletion,
|
||||
.hljs-subst {
|
||||
color: #c86068;
|
||||
}
|
||||
|
||||
.hljs-literal {
|
||||
color: #56b6c2;
|
||||
}
|
||||
|
||||
.hljs-string,
|
||||
.hljs-regexp,
|
||||
.hljs-addition,
|
||||
.hljs-attribute,
|
||||
.hljs-meta-string {
|
||||
color: #abb2bf;
|
||||
}
|
||||
|
||||
.hljs-attribute {
|
||||
color: #c792ea;
|
||||
}
|
||||
|
||||
.hljs-function {
|
||||
color: #c792ea;
|
||||
}
|
||||
|
||||
.hljs-type {
|
||||
color: #f07178;
|
||||
}
|
||||
|
||||
.hljs-title {
|
||||
color: #82aaff !important;
|
||||
}
|
||||
|
||||
.hljs-built_in,
|
||||
.hljs-class {
|
||||
color: #82aaff;
|
||||
}
|
||||
|
||||
// 括号
|
||||
.hljs-params {
|
||||
color: #a6accd;
|
||||
}
|
||||
|
||||
.hljs-attr,
|
||||
.hljs-variable,
|
||||
.hljs-template-variable,
|
||||
.hljs-selector-class,
|
||||
.hljs-selector-attr,
|
||||
.hljs-selector-pseudo,
|
||||
.hljs-number {
|
||||
color: #de7e61;
|
||||
}
|
||||
|
||||
.hljs-symbol,
|
||||
.hljs-bullet,
|
||||
.hljs-link,
|
||||
.hljs-meta,
|
||||
.hljs-selector-id {
|
||||
color: #61aeee;
|
||||
}
|
||||
|
||||
.hljs-strong {
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
.hljs-link {
|
||||
text-decoration: underline;
|
||||
}
|
||||
@@ -0,0 +1,149 @@
|
||||
@charset "UTF-8";
|
||||
|
||||
body,
|
||||
dl,
|
||||
dt,
|
||||
dd,
|
||||
ul,
|
||||
ol,
|
||||
li,
|
||||
pre,
|
||||
form,
|
||||
fieldset,
|
||||
input,
|
||||
p,
|
||||
blockquote,
|
||||
th,
|
||||
td {
|
||||
font-weight: 400;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
h1,
|
||||
h2,
|
||||
h3,
|
||||
h4,
|
||||
h4,
|
||||
h5 {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
color: var(--art-text-gray-800);
|
||||
}
|
||||
|
||||
body {
|
||||
color: var(--art-text-gray-700);
|
||||
text-align: left;
|
||||
font-family: Inter, 'Helvetica Neue', Helvetica, 'PingFang SC',
|
||||
'Hiragino Sans GB', 'Microsoft YaHei', '微软雅黑', Arial, sans-serif;
|
||||
}
|
||||
|
||||
select {
|
||||
font-size: 12px;
|
||||
}
|
||||
|
||||
table {
|
||||
border-collapse: collapse;
|
||||
}
|
||||
|
||||
fieldset,
|
||||
img {
|
||||
border: 0none;
|
||||
}
|
||||
|
||||
fieldset {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
fieldset p {
|
||||
margin: 0;
|
||||
padding: 0008px;
|
||||
}
|
||||
|
||||
legend {
|
||||
display: none;
|
||||
}
|
||||
|
||||
address,
|
||||
caption,
|
||||
em,
|
||||
strong,
|
||||
th,
|
||||
i {
|
||||
font-style: normal;
|
||||
font-weight: 400;
|
||||
}
|
||||
|
||||
table caption {
|
||||
margin-left: -1px;
|
||||
}
|
||||
|
||||
hr {
|
||||
border-bottom: 1pxsolid #ffffff;
|
||||
border-top: 1pxsolid #e4e4e4;
|
||||
border-width: 1px0;
|
||||
clear: both;
|
||||
height: 2px;
|
||||
margin: 5px0;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
ol,
|
||||
ul {
|
||||
list-style-image: none;
|
||||
list-style-position: outside;
|
||||
list-style-type: none;
|
||||
}
|
||||
|
||||
caption,
|
||||
th {
|
||||
text-align: left;
|
||||
}
|
||||
|
||||
q:before,
|
||||
q:after,
|
||||
blockquote:before,
|
||||
blockquote:after {
|
||||
content: ””;
|
||||
}
|
||||
|
||||
/*滚动条*/
|
||||
/*滚动条整体部分,必须要设置*/
|
||||
::-webkit-scrollbar {
|
||||
width: 8px !important;
|
||||
height: 0 !important;
|
||||
}
|
||||
|
||||
/*滚动条的轨道*/
|
||||
::-webkit-scrollbar-track {
|
||||
background-color: var(--art-text-gray-100);
|
||||
}
|
||||
|
||||
/*滚动条的滑块按钮*/
|
||||
::-webkit-scrollbar-thumb {
|
||||
border-radius: 5px;
|
||||
background-color: #cccccc !important;
|
||||
transition: all 0.2s;
|
||||
-webkit-transition: all 0.2s;
|
||||
}
|
||||
|
||||
::-webkit-scrollbar-thumb:hover {
|
||||
background-color: #b0abab !important;
|
||||
}
|
||||
|
||||
/*滚动条的上下两端的按钮*/
|
||||
::-webkit-scrollbar-button {
|
||||
height: 0px;
|
||||
width: 0;
|
||||
}
|
||||
|
||||
.dark {
|
||||
::-webkit-scrollbar-track {
|
||||
background-color: var(--art-bg-color);
|
||||
}
|
||||
|
||||
::-webkit-scrollbar-thumb {
|
||||
background-color: rgba(var(--art-gray-300-rgb), 0.8) !important;
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,63 @@
|
||||
// 定义基础变量
|
||||
$bg-animation-color-light: #000;
|
||||
$bg-animation-color-dark: #fff;
|
||||
$bg-animation-duration: 0.5s;
|
||||
|
||||
html {
|
||||
--bg-animation-color: $bg-animation-color-light;
|
||||
|
||||
&.dark {
|
||||
--bg-animation-color: $bg-animation-color-dark;
|
||||
}
|
||||
|
||||
// View transition styles
|
||||
&::view-transition-old(*) {
|
||||
animation: none;
|
||||
}
|
||||
|
||||
&::view-transition-new(*) {
|
||||
animation: clip $bg-animation-duration ease-in;
|
||||
}
|
||||
|
||||
&::view-transition-old(root) {
|
||||
z-index: 1;
|
||||
}
|
||||
|
||||
&::view-transition-new(root) {
|
||||
z-index: 9999;
|
||||
}
|
||||
|
||||
&.dark {
|
||||
&::view-transition-old(*) {
|
||||
animation: clip $bg-animation-duration ease-in reverse;
|
||||
}
|
||||
|
||||
&::view-transition-new(*) {
|
||||
animation: none;
|
||||
}
|
||||
|
||||
&::view-transition-old(root) {
|
||||
z-index: 9999;
|
||||
}
|
||||
|
||||
&::view-transition-new(root) {
|
||||
z-index: 1;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// 定义动画
|
||||
@keyframes clip {
|
||||
from {
|
||||
clip-path: circle(0% at var(--x) var(--y));
|
||||
}
|
||||
|
||||
to {
|
||||
clip-path: circle(var(--r) at var(--x) var(--y));
|
||||
}
|
||||
}
|
||||
|
||||
// body 相关样式
|
||||
body {
|
||||
background-color: var(--bg-animation-color);
|
||||
}
|
||||
@@ -0,0 +1,97 @@
|
||||
@use 'sass:map';
|
||||
|
||||
// === 变量区域 ===
|
||||
$transition: (
|
||||
duration: 0.26s,
|
||||
// 动画持续时间
|
||||
distance: 20px,
|
||||
// 滑动动画的移动距离
|
||||
easing: cubic-bezier(0.4, 0, 0.2, 1),
|
||||
// 默认缓动函数
|
||||
fade-easing: ease // 淡入淡出专用的缓动函数
|
||||
);
|
||||
|
||||
// 抽取配置值函数,提高可复用性
|
||||
@function transition-config($key) {
|
||||
@return map.get($transition, $key);
|
||||
}
|
||||
|
||||
// 变量简写
|
||||
$duration: transition-config('duration');
|
||||
$distance: transition-config('distance');
|
||||
$easing: transition-config('easing');
|
||||
$fade-easing: transition-config('fade-easing');
|
||||
|
||||
// === 动画类 ===
|
||||
|
||||
// 淡入淡出动画
|
||||
.fade {
|
||||
&-enter-active,
|
||||
&-leave-active {
|
||||
transition: opacity $duration $fade-easing;
|
||||
will-change: opacity;
|
||||
}
|
||||
|
||||
&-enter-from,
|
||||
&-leave-to {
|
||||
opacity: 0;
|
||||
}
|
||||
|
||||
&-enter-to,
|
||||
&-leave-from {
|
||||
opacity: 1;
|
||||
}
|
||||
}
|
||||
|
||||
// 滑动动画通用样式
|
||||
@mixin slide-transition($direction) {
|
||||
$distance-x: 0;
|
||||
$distance-y: 0;
|
||||
|
||||
@if $direction == 'left' {
|
||||
$distance-x: -$distance;
|
||||
} @else if $direction == 'right' {
|
||||
$distance-x: $distance;
|
||||
} @else if $direction == 'top' {
|
||||
$distance-y: -$distance;
|
||||
} @else if $direction == 'bottom' {
|
||||
$distance-y: $distance;
|
||||
}
|
||||
|
||||
&-enter-active,
|
||||
&-leave-active {
|
||||
transition:
|
||||
opacity $duration $easing,
|
||||
transform $duration $easing;
|
||||
will-change: opacity, transform;
|
||||
}
|
||||
|
||||
&-enter-from {
|
||||
opacity: 0;
|
||||
transform: translate3d($distance-x, $distance-y, 0);
|
||||
}
|
||||
|
||||
&-enter-to {
|
||||
opacity: 1;
|
||||
transform: translate3d(0, 0, 0);
|
||||
}
|
||||
|
||||
&-leave-to {
|
||||
opacity: 0;
|
||||
transform: translate3d(-$distance-x, -$distance-y, 0);
|
||||
}
|
||||
}
|
||||
|
||||
// 滑动动画方向类
|
||||
.slide-left {
|
||||
@include slide-transition('left');
|
||||
}
|
||||
.slide-right {
|
||||
@include slide-transition('right');
|
||||
}
|
||||
.slide-top {
|
||||
@include slide-transition('top');
|
||||
}
|
||||
.slide-bottom {
|
||||
@include slide-transition('bottom');
|
||||
}
|
||||