mirror of
https://github.com/kuaifan/dootask.git
synced 2025-12-12 11:19:56 +00:00
新增客户端提示升级
This commit is contained in:
kuaifan
parent
26d9e63e83
commit
376bcc4a0b
@ -221,89 +221,6 @@ class SystemController extends AbstractController
|
||||
return Base::getIpInfo(Request::input("ip"));
|
||||
}
|
||||
|
||||
/**
|
||||
* @api {get} api/system/get/appinfo 09. 获取应用下载信息
|
||||
*
|
||||
* @apiVersion 1.0.0
|
||||
* @apiGroup system
|
||||
* @apiName get__appinfo
|
||||
*
|
||||
* @apiSuccess {Number} ret 返回状态码（1正确、0错误）
|
||||
* @apiSuccess {String} msg 返回信息（错误描述）
|
||||
* @apiSuccess {Object} data 返回数据
|
||||
*/
|
||||
public function get__appinfo() {
|
||||
$array = [
|
||||
'name' => '',
|
||||
'version' => '',
|
||||
'list' => [],
|
||||
];
|
||||
//
|
||||
$files = [
|
||||
base_path("package.json"),
|
||||
base_path("electron/package.json")
|
||||
];
|
||||
$dist = base_path("electron/dist");
|
||||
foreach ($files as $file) {
|
||||
if (file_exists($file)) {
|
||||
$packageArray = json_decode(file_get_contents($file), true);
|
||||
$array['name'] = $packageArray['name'] ?? 'No app';
|
||||
$array['version'] = $packageArray['version'] ?? '';
|
||||
//
|
||||
$list = [
|
||||
[
|
||||
'icon' => 'logo-apple',
|
||||
'name' => 'macOS Intel',
|
||||
'file' => "{$array['name']}-{$array['version']}.dmg"
|
||||
],
|
||||
[
|
||||
'icon' => 'logo-apple',
|
||||
'name' => 'macOS M1',
|
||||
'file' => "{$array['name']}-{$array['version']}-arm64.dmg"
|
||||
],
|
||||
[
|
||||
'icon' => 'logo-windows',
|
||||
'name' => 'Windows x64',
|
||||
'file' => "{$array['name']} Setup {$array['version']}.exe"
|
||||
]
|
||||
];
|
||||
foreach ($list as $item) {
|
||||
if (file_exists("{$dist}/{$item['file']}")) {
|
||||
$item['url'] = Base::fillUrl('api/system/get/appdown?file=' . urlencode($item['file']));
|
||||
$item['size'] = filesize("{$dist}/{$item['file']}");
|
||||
$array['list'][] = $item;
|
||||
}
|
||||
}
|
||||
}
|
||||
if (count($array['list']) > 0) {
|
||||
break;
|
||||
}
|
||||
}
|
||||
//
|
||||
if (count($array['list']) == 0) {
|
||||
return Base::retError('No file');
|
||||
}
|
||||
return Base::retSuccess('success', $array);
|
||||
}
|
||||
|
||||
/**
|
||||
* @api {get} api/system/get/appdown 10. 下载应用
|
||||
*
|
||||
* @apiVersion 1.0.0
|
||||
* @apiGroup system
|
||||
* @apiName get__appdown
|
||||
*
|
||||
* @apiParam {String} file 文件名称
|
||||
*/
|
||||
public function get__appdown() {
|
||||
$file = Request::input("file");
|
||||
$path = base_path("electron/dist/" . $file);
|
||||
if (!file_exists($path)) {
|
||||
return Base::ajaxError("No file");
|
||||
}
|
||||
return Response::download($path);
|
||||
}
|
||||
|
||||
/**
|
||||
* @api {post} api/system/imgupload 11. 上传图片
|
||||
*
|
||||
|
||||
195
resources/assets/js/components/AppDown.vue
Normal file
195
resources/assets/js/components/AppDown.vue
Normal file
@ -0,0 +1,195 @@
|
||||
<template>
|
||||
<div v-if="repoStatus" class="common-app-down">
|
||||
<div v-if="isElectron" class="common-app-down-link" @click="openExternal(repoData.html_url)">
|
||||
<Icon type="md-download"/> {{$L(repoTitle)}}
|
||||
</div>
|
||||
<a v-else class="common-app-down-link" :href="repoData.html_url" target="_blank">
|
||||
<Icon type="md-download"/> {{$L(repoTitle)}}
|
||||
</a>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import Vue from 'vue'
|
||||
import MarkdownPreview from "./MDEditor/components/preview";
|
||||
Vue.component('MarkdownPreview', MarkdownPreview)
|
||||
|
||||
import axios from "axios";
|
||||
|
||||
export default {
|
||||
name: 'AppDown',
|
||||
data() {
|
||||
return {
|
||||
repoName: 'kuaifan/dootask',
|
||||
repoData: {},
|
||||
repoStatus: 0, // 0 没有，1有客户端，2客户端有新版本
|
||||
}
|
||||
},
|
||||
mounted() {
|
||||
this.getReleases();
|
||||
},
|
||||
computed: {
|
||||
repoTitle() {
|
||||
return this.repoStatus == 2 ? '更新客户端' : '客户端下载';
|
||||
}
|
||||
},
|
||||
watch: {
|
||||
repoData: {
|
||||
handler(data) {
|
||||
if (!data.tag_name) {
|
||||
this.repoStatus = 0;
|
||||
return;
|
||||
}
|
||||
if (!this.isElectron) {
|
||||
// 网页只提示有客户端下载
|
||||
this.repoStatus = 1;
|
||||
return;
|
||||
}
|
||||
// 客户端提示更新
|
||||
let currentVersion = window.systemInformation.version;
|
||||
let latestVersion = $A.leftDelete(data.tag_name.toLowerCase(), "v")
|
||||
if (this.compareVersion(latestVersion, currentVersion) === 1) {
|
||||
// 有新版本
|
||||
this.$Notice.close("app-down");
|
||||
this.$nextTick(() => {
|
||||
this.$Notice.info({
|
||||
name: "app-down",
|
||||
title: this.$L("更新提示"),
|
||||
duration: 0,
|
||||
onClose: () => {
|
||||
// 关闭提示后显示更新按钮
|
||||
this.repoStatus = 2;
|
||||
},
|
||||
render: h => {
|
||||
return h('span', [
|
||||
h('span', [
|
||||
h('span', this.$L('发现新版本') + ": "),
|
||||
h('Tag', {
|
||||
props: {
|
||||
color: 'volcano'
|
||||
}
|
||||
}, data.tag_name)
|
||||
]),
|
||||
h('MarkdownPreview', {
|
||||
class: 'common-app-down-body',
|
||||
props: {
|
||||
initialValue: data.body
|
||||
}
|
||||
}),
|
||||
h('div', {
|
||||
class: 'common-app-down-link',
|
||||
on: {
|
||||
click: () => {
|
||||
this.openExternal(data.html_url);
|
||||
}
|
||||
},
|
||||
}, [
|
||||
h('Icon', {
|
||||
props: {
|
||||
type: 'md-download'
|
||||
},
|
||||
style: {
|
||||
marginRight: '5px'
|
||||
}
|
||||
}),
|
||||
h('span', this.$L('立即升级'))
|
||||
]),
|
||||
])
|
||||
}
|
||||
});
|
||||
})
|
||||
}
|
||||
},
|
||||
deep: true
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
getReleases() {
|
||||
let appdown = this.$store.state.method.getStorageJson("cacheAppdown");
|
||||
if (appdown.time && appdown.time + 3600 > Math.round(new Date().getTime() / 1000)) {
|
||||
this.chackReleases(appdown.data)
|
||||
return;
|
||||
}
|
||||
;(() => {
|
||||
axios
|
||||
.get("https://api.github.com/repos/" + this.repoName + "/releases/latest")
|
||||
.then(({status, data}) => {
|
||||
if (status === 200) {
|
||||
this.$store.state.method.setStorage("cacheAppdown", {
|
||||
time: Math.round(new Date().getTime() / 1000),
|
||||
data: data
|
||||
});
|
||||
this.chackReleases(data)
|
||||
}
|
||||
});
|
||||
})();
|
||||
},
|
||||
|
||||
chackReleases(data) {
|
||||
let hostname = window.location.hostname;
|
||||
if (hostname == '127.0.0.1') {
|
||||
hostname = "www.dootask.com"
|
||||
}
|
||||
let assets = data.assets || [];
|
||||
let asset = assets.find(({browser_download_url}) => {
|
||||
return $A.strExists(browser_download_url, hostname)
|
||||
});
|
||||
if (asset) {
|
||||
this.repoData = data;
|
||||
}
|
||||
},
|
||||
|
||||
compareVersion(version1, version2) {
|
||||
let pA = 0, pB = 0;
|
||||
// 寻找当前区间的版本号
|
||||
const findDigit = (str, start) => {
|
||||
let i = start;
|
||||
while (str[i] !== '.' && i < str.length) {
|
||||
i++;
|
||||
}
|
||||
return i;
|
||||
}
|
||||
|
||||
while (pA < version1.length && pB < version2.length) {
|
||||
const nextA = findDigit(version1, pA);
|
||||
const nextB = findDigit(version2, pB);
|
||||
const numA = +version1.substr(pA, nextA - pA);
|
||||
const numB = +version2.substr(pB, nextB - pB);
|
||||
if (numA !== numB) {
|
||||
return numA > numB ? 1 : -1;
|
||||
}
|
||||
pA = nextA + 1;
|
||||
pB = nextB + 1;
|
||||
}
|
||||
// 若arrayA仍有小版本号
|
||||
while (pA < version1.length) {
|
||||
const nextA = findDigit(version1, pA);
|
||||
const numA = +version1.substr(pA, nextA - pA);
|
||||
if (numA > 0) {
|
||||
return 1;
|
||||
}
|
||||
pA = nextA + 1;
|
||||
}
|
||||
// 若arrayB仍有小版本号
|
||||
while (pB < version2.length) {
|
||||
const nextB = findDigit(version2, pB);
|
||||
const numB = +version2.substr(pB, nextB - pB);
|
||||
if (numB > 0) {
|
||||
return -1;
|
||||
}
|
||||
pB = nextB + 1;
|
||||
}
|
||||
// 版本号完全相同
|
||||
return 0;
|
||||
},
|
||||
|
||||
openExternal(url) {
|
||||
try {
|
||||
this.$electron.shell.openExternal(url);
|
||||
} catch (e) {
|
||||
window.location.href = url;
|
||||
}
|
||||
}
|
||||
}
|
||||
};
|
||||
</script>
|
||||
@ -1,59 +0,0 @@
|
||||
<template>
|
||||
<div class="page-download">
|
||||
<PageTitle :title="$L('下载')"/>
|
||||
<div v-if="loadIng > 0" class="download-load">
|
||||
<Loading/>
|
||||
</div>
|
||||
<div class="download-body">
|
||||
<canvas class="orb-canvas-1"></canvas>
|
||||
<canvas class="orb-canvas-2"></canvas>
|
||||
<div v-if="name" class="download-name">{{name}}</div>
|
||||
<div v-if="version" class="download-version">v{{version}}</div>
|
||||
<ul v-if="list.length > 0" class="download-list">
|
||||
<li v-for="(item, key) in list" :key="key">
|
||||
<div class="app-icon">
|
||||
<Icon :type="item.icon"/>
|
||||
</div>
|
||||
<div class="app-name">{{item.name}}</div>
|
||||
<div class="app-size">{{$A.bytesToSize(item.size)}}</div>
|
||||
<div class="app-button">
|
||||
<a :href="item.url" target="_blank">{{$L('立即下载')}}</a>
|
||||
</div>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
loadIng: 0,
|
||||
|
||||
name: "Loading",
|
||||
version: "",
|
||||
list: []
|
||||
}
|
||||
},
|
||||
mounted() {
|
||||
this.getAppInfo()
|
||||
},
|
||||
methods: {
|
||||
getAppInfo() {
|
||||
this.loadIng++;
|
||||
this.$store.dispatch("call", {
|
||||
url: 'system/get/appinfo',
|
||||
}).then(({data}) => {
|
||||
this.loadIng--;
|
||||
this.name = data.name;
|
||||
this.version = data.version;
|
||||
this.list = data.list;
|
||||
}).catch(({msg}) => {
|
||||
this.loadIng--;
|
||||
$A.modalError(msg);
|
||||
});
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
@ -43,14 +43,14 @@
|
||||
<div class="login-forgot">{{$L('忘记密码了？')}}<a href="javascript:void(0)" @click="forgotPassword">{{$L('重置密码')}}</a></div>
|
||||
</div>
|
||||
</div>
|
||||
<div v-if="downList.length > 0" class="download-app">
|
||||
<Button icon="md-download" type="primary" to="./download" target="_blank">{{$L('客户端下载')}}</Button>
|
||||
</div>
|
||||
<AppDown/>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import AppDown from "../components/AppDown";
|
||||
export default {
|
||||
components: {AppDown},
|
||||
data() {
|
||||
return {
|
||||
loadIng: 0,
|
||||
@ -65,15 +65,10 @@ export default {
|
||||
code: '',
|
||||
|
||||
demoAccount: {},
|
||||
|
||||
downList: [],
|
||||
}
|
||||
},
|
||||
mounted() {
|
||||
this.getDemoAccount();
|
||||
if (!this.isElectron) {
|
||||
this.getAppInfo();
|
||||
}
|
||||
},
|
||||
computed: {
|
||||
currentLanguage() {
|
||||
@ -95,16 +90,6 @@ export default {
|
||||
});
|
||||
},
|
||||
|
||||
getAppInfo() {
|
||||
this.$store.dispatch("call", {
|
||||
url: 'system/get/appinfo',
|
||||
}).then(({data}) => {
|
||||
this.downList = data.list;
|
||||
}).catch(() => {
|
||||
this.downList = [];
|
||||
});
|
||||
},
|
||||
|
||||
forgotPassword() {
|
||||
$A.modalWarning("请联系管理员！");
|
||||
},
|
||||
|
||||
@ -91,16 +91,16 @@
|
||||
</ul>
|
||||
</template>
|
||||
</div>
|
||||
<div v-if="downList.length > 0" class="download-app">
|
||||
<Button icon="md-download" type="primary" @click="goDownApp">{{$L('客户端下载')}}</Button>
|
||||
</div>
|
||||
<AppDown/>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import {mapState} from "vuex";
|
||||
import AppDown from "../../components/AppDown";
|
||||
|
||||
export default {
|
||||
components: {AppDown},
|
||||
data() {
|
||||
return {
|
||||
nowTime: $A.Time(),
|
||||
@ -120,9 +120,6 @@ export default {
|
||||
this.nowInterval = setInterval(() => {
|
||||
this.nowTime = $A.Time();
|
||||
}, 1000)
|
||||
if (!this.isElectron) {
|
||||
this.getAppInfo();
|
||||
}
|
||||
},
|
||||
|
||||
destroyed() {
|
||||
@ -214,20 +211,6 @@ export default {
|
||||
},
|
||||
|
||||
methods: {
|
||||
getAppInfo() {
|
||||
this.$store.dispatch("call", {
|
||||
url: 'system/get/appinfo',
|
||||
}).then(({data}) => {
|
||||
this.downList = data.list;
|
||||
}).catch(() => {
|
||||
this.downList = [];
|
||||
});
|
||||
},
|
||||
|
||||
goDownApp() {
|
||||
this.goForward({path: '/manage/download'});
|
||||
},
|
||||
|
||||
getTask() {
|
||||
let data = {complete: "no"};
|
||||
switch (this.dashboard) {
|
||||
|
||||
10
resources/assets/js/routes.js
vendored
10
resources/assets/js/routes.js
vendored
@ -68,18 +68,8 @@ export default [
|
||||
path: 'file',
|
||||
component: () => import('./pages/manage/file.vue'),
|
||||
},
|
||||
{
|
||||
name: 'manage-download',
|
||||
path: 'download',
|
||||
component: () => import('./pages/download.vue'),
|
||||
},
|
||||
]
|
||||
},
|
||||
{
|
||||
name: 'download',
|
||||
path: '/download',
|
||||
component: () => import('./pages/download.vue'),
|
||||
},
|
||||
{
|
||||
name: 'login',
|
||||
path: '/login',
|
||||
|
||||
1
resources/assets/sass/components/_.scss
vendored
1
resources/assets/sass/components/_.scss
vendored
@ -1,3 +1,4 @@
|
||||
@import "app-down";
|
||||
@import "auto-tip";
|
||||
@import "circle";
|
||||
@import "drawer-overlay";
|
||||
|
||||
48
resources/assets/sass/components/app-down.scss
vendored
Normal file
48
resources/assets/sass/components/app-down.scss
vendored
Normal file
@ -0,0 +1,48 @@
|
||||
.common-app-down {
|
||||
position: absolute;
|
||||
bottom: 26px;
|
||||
right: 26px;
|
||||
z-index: 1;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.common-app-down-link {
|
||||
display: inline-block;
|
||||
cursor: pointer;
|
||||
line-height: 32px;
|
||||
height: 32px;
|
||||
padding: 0 15px;
|
||||
font-size: 14px;
|
||||
border-radius: 4px;
|
||||
color: #fff;
|
||||
background-color: #8bcf70;
|
||||
border-color: #8bcf70;
|
||||
&:hover {
|
||||
color: #fff;
|
||||
opacity: 0.9;
|
||||
}
|
||||
}
|
||||
|
||||
.common-app-down-body {
|
||||
max-height: 168px;
|
||||
overflow: auto;
|
||||
margin: 18px 0;
|
||||
.markdown-preview {
|
||||
margin: -20px -12px;
|
||||
h2 {
|
||||
font-size: 18px !important;
|
||||
padding-top: 2px !important;
|
||||
}
|
||||
ul {
|
||||
li {
|
||||
padding: 2px 0 2px 2px !important;
|
||||
&:after {
|
||||
top: 10px !important;
|
||||
width: 6px !important;
|
||||
height: 6px !important;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
1
resources/assets/sass/pages/_.scss
vendored
1
resources/assets/sass/pages/_.scss
vendored
@ -1,7 +1,6 @@
|
||||
@import "common";
|
||||
@import "page-calendar";
|
||||
@import "page-dashboard";
|
||||
@import "page-download";
|
||||
@import "page-file";
|
||||
@import "page-login";
|
||||
@import "page-manage";
|
||||
|
||||
@ -150,12 +150,6 @@
|
||||
}
|
||||
}
|
||||
}
|
||||
.download-app {
|
||||
position: absolute;
|
||||
bottom: 26px;
|
||||
right: 26px;
|
||||
z-index: 1;
|
||||
}
|
||||
.nopage {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
@ -210,8 +204,5 @@
|
||||
}
|
||||
}
|
||||
}
|
||||
.download-app {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
214
resources/assets/sass/pages/page-download.scss
vendored
214
resources/assets/sass/pages/page-download.scss
vendored
@ -1,214 +0,0 @@
|
||||
.page-download {
|
||||
overflow: auto;
|
||||
top: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
.download-load {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
z-index: 1;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
}
|
||||
.download-body {
|
||||
position: relative;
|
||||
margin-top: 50px;
|
||||
.orb-canvas-1 {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 50%;
|
||||
width: 500px;
|
||||
height: 500px;
|
||||
z-index: -1;
|
||||
background: linear-gradient(rgba(186, 117, 255, 0.49) 26.56%, rgb(57, 19, 184) 100%);
|
||||
opacity: .1;
|
||||
transform: translate(-50%, 0) rotate(-90deg);
|
||||
margin-top: 20px;
|
||||
margin-left: -50px;
|
||||
border-radius: 24% 76% 35% 65% / 27% 36% 64% 73%;
|
||||
}
|
||||
.orb-canvas-2 {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 50%;
|
||||
width: 500px;
|
||||
height: 500px;
|
||||
background: linear-gradient(rgba(47, 184, 255, 0.42) 31.77%, rgb(158, 236, 217) 100%);
|
||||
z-index: -1;
|
||||
animation: 25s ease 0s infinite alternate none running izRuqW;
|
||||
opacity: .1;
|
||||
transform: translate(-50%, 0) rotate(-90deg);
|
||||
margin-top: 120px;
|
||||
margin-left: 50px;
|
||||
border-radius: 51% 49% 58% 42% / 34% 78% 22% 66%;
|
||||
}
|
||||
.download-name {
|
||||
color: #2A2A2A;
|
||||
text-align: center;
|
||||
font-size: 24px;
|
||||
padding-top: 64px;
|
||||
line-height: 1;
|
||||
}
|
||||
.download-version {
|
||||
color: #8a919c;
|
||||
text-align: center;
|
||||
font-size: 14px;
|
||||
padding-top: 20px;
|
||||
line-height: 1;
|
||||
}
|
||||
.download-list {
|
||||
margin-top: 100px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
> li {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
list-style: none;
|
||||
background: rgba(255,255,255,.7);
|
||||
border-radius: 20px;
|
||||
overflow: hidden;
|
||||
margin: 0 12px;
|
||||
padding: 30px 46px;
|
||||
position: relative;
|
||||
z-index: 5;
|
||||
box-shadow: 0 30px 70px 0 rgba(223, 227, 234, 0.5);
|
||||
.app-icon,
|
||||
.app-name,
|
||||
.app-size {
|
||||
transition: all 0.3s ease-in-out;
|
||||
}
|
||||
.app-icon {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
height: 60px;
|
||||
> i {
|
||||
font-size: 60px;
|
||||
&.ivu-icon-logo-windows {
|
||||
font-size: 52px;
|
||||
}
|
||||
}
|
||||
}
|
||||
.app-name {
|
||||
margin-top: 15px;
|
||||
font-size: 18px;
|
||||
}
|
||||
.app-size {
|
||||
margin-top: 15px;
|
||||
opacity: 0.6;
|
||||
}
|
||||
.app-button {
|
||||
margin-top: 22px;
|
||||
> a {
|
||||
display: inline-block;
|
||||
position: relative;
|
||||
z-index: 1;
|
||||
line-height: 32px;
|
||||
border-radius: 6px;
|
||||
text-align: center;
|
||||
padding: 0 18px;
|
||||
text-transform: capitalize;
|
||||
transition: all 0.3s ease-in-out;
|
||||
color: #8bcf70;
|
||||
border: 1px solid #8bcf70;
|
||||
&:before {
|
||||
content: '';
|
||||
position: absolute;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
top: 0;
|
||||
left: 0;
|
||||
border-radius: 36px;
|
||||
transition: all 0.3s ease-in-out;
|
||||
transform: scale(0,1);
|
||||
z-index: -1;
|
||||
}
|
||||
&:hover {
|
||||
&:before {
|
||||
border-radius: 4px;
|
||||
background: #ffffff;
|
||||
transform: scale(1);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
&:before {
|
||||
content: '';
|
||||
position: absolute;
|
||||
z-index: -1;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
top:0;
|
||||
left:0;
|
||||
background: linear-gradient( 130deg, rgb(131,239,146) 0%, rgb(0,211,139) 100%);
|
||||
opacity: 0;
|
||||
transition: all 0.3s ease-in-out;
|
||||
}
|
||||
&:after {
|
||||
content: '';
|
||||
position: absolute;
|
||||
width: 160px;
|
||||
height: 160px;
|
||||
border-radius: 50%;
|
||||
background: rgba(255,255,255,0.13);
|
||||
z-index: -1;
|
||||
top:-80px;
|
||||
right: -80px;
|
||||
opacity: 0;
|
||||
transform: scale(0.2);
|
||||
transition: all 0.3s ease-in-out;
|
||||
}
|
||||
&:hover {
|
||||
.app-icon,
|
||||
.app-name,
|
||||
.app-size {
|
||||
color: #ffffff
|
||||
}
|
||||
.app-button {
|
||||
> a {
|
||||
color: #ffffff;
|
||||
border-color: #ffffff;
|
||||
&:hover {
|
||||
color: #0de49d;
|
||||
}
|
||||
}
|
||||
}
|
||||
&:before {
|
||||
opacity: 1;
|
||||
}
|
||||
&:after {
|
||||
opacity: 1;
|
||||
transform: scale(1);
|
||||
transition-duration: 1s;
|
||||
}
|
||||
}
|
||||
}
|
||||
@media (max-width: 720px) {
|
||||
flex-direction: column;
|
||||
> li {
|
||||
padding: 52px 64px;
|
||||
margin-bottom: 32px;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
&.manage-box-view {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
.download-body {
|
||||
transform: translateY(-16%);
|
||||
.download-name {
|
||||
padding-top: 16%;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
14
resources/assets/sass/pages/page-login.scss
vendored
14
resources/assets/sass/pages/page-login.scss
vendored
@ -125,18 +125,4 @@
|
||||
}
|
||||
}
|
||||
}
|
||||
.download-app {
|
||||
position: absolute;
|
||||
bottom: 26px;
|
||||
right: 26px;
|
||||
z-index: 1;
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width: 768px) {
|
||||
.page-login {
|
||||
.download-app {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user