Merge branch 'master' of git.flexites.org:Students/ITRadio
This commit is contained in:
Mike0001-droid
commit
d626d09177
|
|
@ -11,7 +11,6 @@
|
|||
"@formkit/i18n": "^1.6.3",
|
||||
"@formkit/vue": "^1.6.3",
|
||||
"@quasar/extras": "^1.16.4",
|
||||
"@vueuse/components": "^10.10.0",
|
||||
"axios": "^1.2.1",
|
||||
"core-js": "^3.6.5",
|
||||
"esm": "^3.2.25",
|
||||
|
|
@ -22,6 +21,7 @@
|
|||
"scrolltrigger": "^1.0.1",
|
||||
"swiper": "^11.1.3",
|
||||
"vue": "^3.3.13",
|
||||
"vue-content-loader": "^2.0.1",
|
||||
"vue-final-modal": "^4.5.4",
|
||||
"vue-router": "^4.0.0",
|
||||
"vuex": "^4.0.1",
|
||||
|
|
@ -3990,74 +3990,6 @@
|
|||
"resolved": "https://registry.npmjs.org/@vue/shared/-/shared-3.4.27.tgz",
|
||||
"integrity": "sha512-DL3NmY2OFlqmYYrzp39yi3LDkKxa5vZVwxWdQ3rG0ekuWscHraeIbnI8t+aZK7qhYqEqWKTUdijadunb9pnrgA=="
|
||||
},
|
||||
"node_modules/@vueuse/components": {
|
||||
"version": "10.10.0",
|
||||
"resolved": "https://registry.npmjs.org/@vueuse/components/-/components-10.10.0.tgz",
|
||||
"integrity": "sha512-HiA10NQ9HJAGnju+8ZK4TyA8LIc0a6BnJmVWDa/k+TRhaYCVacSDU04k0BQ2otV+gghUDdwu98upf6TDRXpoeg==",
|
||||
"dependencies": {
|
||||
"@vueuse/core": "10.10.0",
|
||||
"@vueuse/shared": "10.10.0",
|
||||
"vue-demi": ">=0.14.7"
|
||||
}
|
||||
},
|
||||
"node_modules/@vueuse/components/node_modules/@vueuse/core": {
|
||||
"version": "10.10.0",
|
||||
"resolved": "https://registry.npmjs.org/@vueuse/core/-/core-10.10.0.tgz",
|
||||
"integrity": "sha512-vexJ/YXYs2S42B783rI95lMt3GzEwkxzC8Hb0Ndpd8rD+p+Lk/Za4bd797Ym7yq4jXqdSyj3JLChunF/vyYjUw==",
|
||||
"dependencies": {
|
||||
"@types/web-bluetooth": "^0.0.20",
|
||||
"@vueuse/metadata": "10.10.0",
|
||||
"@vueuse/shared": "10.10.0",
|
||||
"vue-demi": ">=0.14.7"
|
||||
},
|
||||
"funding": {
|
||||
"url": "https://github.com/sponsors/antfu"
|
||||
}
|
||||
},
|
||||
"node_modules/@vueuse/components/node_modules/@vueuse/metadata": {
|
||||
"version": "10.10.0",
|
||||
"resolved": "https://registry.npmjs.org/@vueuse/metadata/-/metadata-10.10.0.tgz",
|
||||
"integrity": "sha512-UNAo2sTCAW5ge6OErPEHb5z7NEAg3XcO9Cj7OK45aZXfLLH1QkexDcZD77HBi5zvEiLOm1An+p/4b5K3Worpug==",
|
||||
"funding": {
|
||||
"url": "https://github.com/sponsors/antfu"
|
||||
}
|
||||
},
|
||||
"node_modules/@vueuse/components/node_modules/@vueuse/shared": {
|
||||
"version": "10.10.0",
|
||||
"resolved": "https://registry.npmjs.org/@vueuse/shared/-/shared-10.10.0.tgz",
|
||||
"integrity": "sha512-2aW33Ac0Uk0U+9yo3Ypg9s5KcR42cuehRWl7vnUHadQyFvCktseyxxEPBi1Eiq4D2yBGACOnqLZpx1eMc7g5Og==",
|
||||
"dependencies": {
|
||||
"vue-demi": ">=0.14.7"
|
||||
},
|
||||
"funding": {
|
||||
"url": "https://github.com/sponsors/antfu"
|
||||
}
|
||||
},
|
||||
"node_modules/@vueuse/components/node_modules/vue-demi": {
|
||||
"version": "0.14.8",
|
||||
"resolved": "https://registry.npmjs.org/vue-demi/-/vue-demi-0.14.8.tgz",
|
||||
"integrity": "sha512-Uuqnk9YE9SsWeReYqK2alDI5YzciATE0r2SkA6iMAtuXvNTMNACJLJEXNXaEy94ECuBe4Sk6RzRU80kjdbIo1Q==",
|
||||
"hasInstallScript": true,
|
||||
"bin": {
|
||||
"vue-demi-fix": "bin/vue-demi-fix.js",
|
||||
"vue-demi-switch": "bin/vue-demi-switch.js"
|
||||
},
|
||||
"engines": {
|
||||
"node": ">=12"
|
||||
},
|
||||
"funding": {
|
||||
"url": "https://github.com/sponsors/antfu"
|
||||
},
|
||||
"peerDependencies": {
|
||||
"@vue/composition-api": "^1.0.0-rc.1",
|
||||
"vue": "^3.0.0-0 || ^2.6.0"
|
||||
},
|
||||
"peerDependenciesMeta": {
|
||||
"@vue/composition-api": {
|
||||
"optional": true
|
||||
}
|
||||
}
|
||||
},
|
||||
"node_modules/@vueuse/core": {
|
||||
"version": "10.9.0",
|
||||
"resolved": "https://registry.npmjs.org/@vueuse/core/-/core-10.9.0.tgz",
|
||||
|
|
@ -15061,6 +14993,14 @@
|
|||
}
|
||||
}
|
||||
},
|
||||
"node_modules/vue-content-loader": {
|
||||
"version": "2.0.1",
|
||||
"resolved": "https://registry.npmjs.org/vue-content-loader/-/vue-content-loader-2.0.1.tgz",
|
||||
"integrity": "sha512-pkof4+q2xmzNEdhqelxtJejeP/vQUJtLle4/v2ueG+HURqM9Q/GIGC8GJ2bVVWeLfTDET51jqimwQdmxJTlu0g==",
|
||||
"peerDependencies": {
|
||||
"vue": "^3"
|
||||
}
|
||||
},
|
||||
"node_modules/vue-eslint-parser": {
|
||||
"version": "9.3.2",
|
||||
"resolved": "https://registry.npmjs.org/vue-eslint-parser/-/vue-eslint-parser-9.3.2.tgz",
|
||||
|
|
@ -18623,48 +18563,6 @@
|
|||
"resolved": "https://registry.npmjs.org/@vue/shared/-/shared-3.4.27.tgz",
|
||||
"integrity": "sha512-DL3NmY2OFlqmYYrzp39yi3LDkKxa5vZVwxWdQ3rG0ekuWscHraeIbnI8t+aZK7qhYqEqWKTUdijadunb9pnrgA=="
|
||||
},
|
||||
"@vueuse/components": {
|
||||
"version": "10.10.0",
|
||||
"resolved": "https://registry.npmjs.org/@vueuse/components/-/components-10.10.0.tgz",
|
||||
"integrity": "sha512-HiA10NQ9HJAGnju+8ZK4TyA8LIc0a6BnJmVWDa/k+TRhaYCVacSDU04k0BQ2otV+gghUDdwu98upf6TDRXpoeg==",
|
||||
"requires": {
|
||||
"@vueuse/core": "10.10.0",
|
||||
"@vueuse/shared": "10.10.0",
|
||||
"vue-demi": ">=0.14.7"
|
||||
},
|
||||
"dependencies": {
|
||||
"@vueuse/core": {
|
||||
"version": "10.10.0",
|
||||
"resolved": "https://registry.npmjs.org/@vueuse/core/-/core-10.10.0.tgz",
|
||||
"integrity": "sha512-vexJ/YXYs2S42B783rI95lMt3GzEwkxzC8Hb0Ndpd8rD+p+Lk/Za4bd797Ym7yq4jXqdSyj3JLChunF/vyYjUw==",
|
||||
"requires": {
|
||||
"@types/web-bluetooth": "^0.0.20",
|
||||
"@vueuse/metadata": "10.10.0",
|
||||
"@vueuse/shared": "10.10.0",
|
||||
"vue-demi": ">=0.14.7"
|
||||
}
|
||||
},
|
||||
"@vueuse/metadata": {
|
||||
"version": "10.10.0",
|
||||
"resolved": "https://registry.npmjs.org/@vueuse/metadata/-/metadata-10.10.0.tgz",
|
||||
"integrity": "sha512-UNAo2sTCAW5ge6OErPEHb5z7NEAg3XcO9Cj7OK45aZXfLLH1QkexDcZD77HBi5zvEiLOm1An+p/4b5K3Worpug=="
|
||||
},
|
||||
"@vueuse/shared": {
|
||||
"version": "10.10.0",
|
||||
"resolved": "https://registry.npmjs.org/@vueuse/shared/-/shared-10.10.0.tgz",
|
||||
"integrity": "sha512-2aW33Ac0Uk0U+9yo3Ypg9s5KcR42cuehRWl7vnUHadQyFvCktseyxxEPBi1Eiq4D2yBGACOnqLZpx1eMc7g5Og==",
|
||||
"requires": {
|
||||
"vue-demi": ">=0.14.7"
|
||||
}
|
||||
},
|
||||
"vue-demi": {
|
||||
"version": "0.14.8",
|
||||
"resolved": "https://registry.npmjs.org/vue-demi/-/vue-demi-0.14.8.tgz",
|
||||
"integrity": "sha512-Uuqnk9YE9SsWeReYqK2alDI5YzciATE0r2SkA6iMAtuXvNTMNACJLJEXNXaEy94ECuBe4Sk6RzRU80kjdbIo1Q==",
|
||||
"requires": {}
|
||||
}
|
||||
}
|
||||
},
|
||||
"@vueuse/core": {
|
||||
"version": "10.9.0",
|
||||
"resolved": "https://registry.npmjs.org/@vueuse/core/-/core-10.9.0.tgz",
|
||||
|
|
@ -26407,6 +26305,12 @@
|
|||
"@vue/shared": "3.4.27"
|
||||
}
|
||||
},
|
||||
"vue-content-loader": {
|
||||
"version": "2.0.1",
|
||||
"resolved": "https://registry.npmjs.org/vue-content-loader/-/vue-content-loader-2.0.1.tgz",
|
||||
"integrity": "sha512-pkof4+q2xmzNEdhqelxtJejeP/vQUJtLle4/v2ueG+HURqM9Q/GIGC8GJ2bVVWeLfTDET51jqimwQdmxJTlu0g==",
|
||||
"requires": {}
|
||||
},
|
||||
"vue-eslint-parser": {
|
||||
"version": "9.3.2",
|
||||
"resolved": "https://registry.npmjs.org/vue-eslint-parser/-/vue-eslint-parser-9.3.2.tgz",
|
||||
|
|
|
|||
|
|
@ -29,6 +29,7 @@
|
|||
"scrolltrigger": "^1.0.1",
|
||||
"swiper": "^11.1.3",
|
||||
"vue": "^3.3.13",
|
||||
"vue-content-loader": "^2.0.1",
|
||||
"vue-final-modal": "^4.5.4",
|
||||
"vue-router": "^4.0.0",
|
||||
"vuex": "^4.0.1",
|
||||
|
|
|
|||
|
|
@ -62,7 +62,7 @@ a {
|
|||
}
|
||||
|
||||
html{
|
||||
scrollbar-color: var(--color-black) var(--color-white-opacity);
|
||||
scrollbar-color: var(--color-black) var(--bg-opacity);
|
||||
scrollbar-gutter: stable;
|
||||
scrollbar-width: thin;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -63,7 +63,16 @@
|
|||
background-clip: text;
|
||||
background-image: var(--linear-gradient);
|
||||
text-transform: uppercase;
|
||||
|
||||
@mixin responsive-l {
|
||||
font-size:40px;
|
||||
line-height: 1.1;
|
||||
}
|
||||
@mixin responsive-m {
|
||||
font-size:32px;
|
||||
}
|
||||
/*@mixin responsive-s {
|
||||
font-size: 36px;
|
||||
}*/
|
||||
&.m--white {
|
||||
color: var(--color-white);
|
||||
margin: 1.5rem 0;
|
||||
|
|
@ -237,6 +246,7 @@
|
|||
width: 40px;
|
||||
}
|
||||
}
|
||||
|
||||
&.m--underline {
|
||||
text-decoration: underline;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,43 +1,81 @@
|
|||
.footer {
|
||||
padding-bottom: var(--space-between-block);
|
||||
width: 100%;
|
||||
|
||||
&__top {
|
||||
padding-bottom: 80px;
|
||||
margin-bottom: 80px;
|
||||
border-bottom: 1px solid var(--color-white-opacity);
|
||||
}
|
||||
|
||||
&__question {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
gap: 10px;
|
||||
@mixin responsive-xs {
|
||||
align-items: flex-start;
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
&-button {
|
||||
margin-left: auto;
|
||||
}
|
||||
}
|
||||
|
||||
&__bottom {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
flex-wrap: wrap;
|
||||
}
|
||||
|
||||
&__menu {
|
||||
display: grid;
|
||||
grid-template-columns: var(--space-between-sections) var(--space-between-sections);
|
||||
grid-template-rows: min-content min-content;
|
||||
grid-template-rows: fit-content fit-content;
|
||||
grid-column-gap: var(--space-between-sections);
|
||||
grid-row-gap: var(--space-between-block);
|
||||
&-item{
|
||||
|
||||
@mixin responsive-m {
|
||||
width: 100%;
|
||||
grid-row-gap: 10px;
|
||||
grid-template-rows: min-content;
|
||||
grid-template-columns: min-content min-content min-content;
|
||||
margin-bottom: var(--space-between-block);
|
||||
}
|
||||
@mixin responsive-s {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
}
|
||||
&-item {
|
||||
@mixin responsive-s {
|
||||
width: 100%;
|
||||
}
|
||||
}
|
||||
|
||||
&-link {
|
||||
font-size: 1.2rem;
|
||||
}
|
||||
}
|
||||
|
||||
&__social {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
gap: var(--space-between-block);
|
||||
@mixin responsive-m {
|
||||
margin-bottom: var(--space-between-block);
|
||||
grid-row-gap: 10px;
|
||||
}
|
||||
}
|
||||
|
||||
&__connection {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: flex-end;
|
||||
justify-content: space-between;
|
||||
gap: 1rem;
|
||||
@mixin responsive-m {
|
||||
width: 100%;
|
||||
align-items: flex-start;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -5,19 +5,39 @@
|
|||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: start;
|
||||
flex-wrap: wrap;
|
||||
margin-bottom: var(--space-between-block);
|
||||
row-gap: var(--space-between-block);
|
||||
&-title{
|
||||
margin-bottom: 0;
|
||||
}
|
||||
&-btn{
|
||||
margin-left: auto;
|
||||
@mixin responsive-xxs {
|
||||
width: 100%;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
&__content {
|
||||
display: flex;
|
||||
gap: 80px;
|
||||
@mixin responsive-m {
|
||||
flex-direction: column;
|
||||
}
|
||||
}
|
||||
|
||||
&__cover {
|
||||
width: 50%;
|
||||
width: 100%;
|
||||
max-height: 640px;
|
||||
background: url("./assets/img/bg/blog.svg") no-repeat center;
|
||||
position: relative;
|
||||
z-index: 2;
|
||||
background-size: cover;
|
||||
@mixin responsive-m {
|
||||
height: calc(var(--base-content-size) / 2);
|
||||
max-height: none;
|
||||
}
|
||||
}
|
||||
|
||||
&__list {
|
||||
|
|
|
|||
|
|
@ -135,6 +135,10 @@
|
|||
color: transparent;
|
||||
background-clip: text;
|
||||
background-image: var(--linear-gradient);
|
||||
@mixin responsive-s {
|
||||
flex-direction: column;
|
||||
gap: 10px;
|
||||
}
|
||||
&.m--circle {
|
||||
align-items: end;
|
||||
|
||||
|
|
@ -144,6 +148,12 @@
|
|||
width: 130px;
|
||||
height: 130px;
|
||||
background: url("./assets/img/icon/circleGradient.svg") no-repeat center;
|
||||
@mixin responsive-s {
|
||||
margin-right: auto;
|
||||
width: 80px;
|
||||
height: 80px;
|
||||
background-size: contain;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
|
@ -154,6 +164,9 @@
|
|||
@mixin responsive-m {
|
||||
width: 75%;
|
||||
}
|
||||
@mixin responsive-s {
|
||||
width: 100%;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
@ -163,6 +176,7 @@
|
|||
@mixin responsive-m {
|
||||
display: flex;
|
||||
align-items: flex-start;
|
||||
flex-wrap: wrap;
|
||||
gap: calc(var(--space-between-block) / 2);
|
||||
max-width: none;
|
||||
}
|
||||
|
|
@ -171,11 +185,16 @@
|
|||
flex-direction: column;
|
||||
align-items: flex-start;
|
||||
font-size: 16px;
|
||||
margin-bottom: 2.5rem;
|
||||
position: relative;
|
||||
z-index: 2;
|
||||
&:not(&:last-child){
|
||||
margin-bottom: var(--space-between-block);
|
||||
}
|
||||
@mixin responsive-m {
|
||||
width: calc(100% / 3);
|
||||
width: calc((100% - var(--space-between-block)) / 3);
|
||||
}
|
||||
@mixin responsive-s {
|
||||
width: 100%;
|
||||
}
|
||||
&:before {
|
||||
content: '';
|
||||
|
|
@ -234,10 +253,15 @@
|
|||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: flex-end;
|
||||
flex-wrap: wrap;
|
||||
row-gap: var(--space-between-block);
|
||||
}
|
||||
|
||||
&--description {
|
||||
max-width: 45%;
|
||||
@mixin responsive-xs {
|
||||
max-width: 100%;
|
||||
}
|
||||
}
|
||||
|
||||
&--btns {
|
||||
|
|
|
|||
|
|
@ -5,16 +5,31 @@
|
|||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: start;
|
||||
flex-wrap: wrap;
|
||||
&-title{
|
||||
margin-bottom: 0;
|
||||
}
|
||||
}
|
||||
|
||||
&__description{
|
||||
max-width: 60%;
|
||||
margin-bottom: 2.5rem;
|
||||
@mixin responsive-xxs {
|
||||
max-width: none;
|
||||
}
|
||||
&.m--50{
|
||||
margin-bottom: 0;
|
||||
max-width: 50%;
|
||||
width: 100%;
|
||||
}
|
||||
}
|
||||
&__link{
|
||||
@mixin responsive-xxs {
|
||||
order: 1;
|
||||
margin: var(--space-between-block) 0;
|
||||
width: 100%;
|
||||
}
|
||||
}
|
||||
&__list{
|
||||
position: relative;
|
||||
padding-bottom: 10px;
|
||||
|
|
@ -52,6 +67,8 @@
|
|||
transition: all .3s ease;
|
||||
margin-right: auto;
|
||||
color: var(--color-white);
|
||||
text-wrap: nowrap;
|
||||
padding-right: 10px;
|
||||
}
|
||||
&__btn{
|
||||
transition: all .35s ease, visibility .0s ease;
|
||||
|
|
|
|||
|
|
@ -4,13 +4,29 @@
|
|||
margin-bottom: var(--space-between-sections);
|
||||
position: relative;
|
||||
z-index: 2;
|
||||
@mixin responsive-xl {
|
||||
padding: 0 0 0 20px;
|
||||
}
|
||||
|
||||
&__header {
|
||||
display: flex;
|
||||
max-width: var(--container);
|
||||
margin-right: auto;
|
||||
padding: 0 50px 0;
|
||||
margin-bottom: var(--space-between-block);
|
||||
@mixin responsive-xl {
|
||||
padding: 0 40px 0 0;
|
||||
column-gap: var(--space-between-block);
|
||||
}
|
||||
@mixin responsive-s {
|
||||
flex-wrap: wrap;
|
||||
}
|
||||
}
|
||||
|
||||
&__title {
|
||||
margin-bottom: 0;
|
||||
margin-right: auto;
|
||||
text-wrap: nowrap;
|
||||
}
|
||||
|
||||
&__slider {
|
||||
|
|
@ -30,8 +46,26 @@
|
|||
&__tools {
|
||||
margin-top: 65px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
flex-wrap: wrap;
|
||||
justify-content: space-between;
|
||||
max-width: var(--container);
|
||||
margin-right: auto;
|
||||
row-gap: 1.5rem;
|
||||
padding: 0 50px 0;
|
||||
@mixin responsive-xl {
|
||||
padding: 0 80px 0 35px;
|
||||
}
|
||||
@mixin responsive-l {
|
||||
padding: 0 40px 0 0;
|
||||
}
|
||||
.m--link{
|
||||
@mixin responsive-s {
|
||||
width: 100%;
|
||||
display: flex;
|
||||
justify-content: flex-end;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
&__progress {
|
||||
|
|
@ -42,7 +76,9 @@
|
|||
background: var(--color-white-opacity);
|
||||
border-radius: 20px;
|
||||
overflow: hidden;
|
||||
|
||||
@mixin responsive-s {
|
||||
max-width: none;
|
||||
}
|
||||
span {
|
||||
background: var(--color-white);
|
||||
position: absolute;
|
||||
|
|
@ -75,5 +111,12 @@
|
|||
|
||||
&__description {
|
||||
max-width: 820px;
|
||||
@mixin responsive-xl {
|
||||
max-width: calc(100% - var(--space-between-block));
|
||||
}
|
||||
@mixin responsive-s {
|
||||
max-width: none;
|
||||
width: 100%;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -9,7 +9,7 @@ $color-primary: #5E5BFC;
|
|||
--color-black: #232323;
|
||||
--color-white: #FFFFFF;
|
||||
--color-white-darker: #E7E7E7;
|
||||
--color-white-opacity: #404145;
|
||||
--color-white-opacity: #BBB9CA;
|
||||
--bg-wrapper-modal: #000000E5;
|
||||
--color-primary: $color-primary;
|
||||
--color-black-cc: #000000CC;
|
||||
|
|
@ -34,6 +34,7 @@ $color-primary: #5E5BFC;
|
|||
}
|
||||
@media (max-width: $document-width-m) {
|
||||
--container: $document-width-s;
|
||||
--space-between-sections: calc(var(--base-fz) * 2.7);
|
||||
}
|
||||
@media (max-width: $document-width-s) {
|
||||
--container: $document-width-xs;
|
||||
|
|
|
|||
|
|
@ -4,7 +4,7 @@
|
|||
<h2 class="h2 m--white">Напишите нам</h2>
|
||||
<div class="footer__question">
|
||||
<div class="text">Остались вопросы? Мы с радостью вам ответим!</div>
|
||||
<button class="button m--white m--arrow">Написать</button>
|
||||
<button class="button m--white m--arrow footer__question-button">Написать</button>
|
||||
</div>
|
||||
</div>
|
||||
<div class="footer__bottom">
|
||||
|
|
|
|||
|
|
@ -100,8 +100,8 @@ export default {
|
|||
{
|
||||
$formkit: 'text',
|
||||
name: 'email',
|
||||
label: 'придумайте логин',
|
||||
placeholder: 'Придумайте логин',
|
||||
label: 'Ваша почта',
|
||||
placeholder: 'Ваша почта',
|
||||
validation: 'required',
|
||||
outerClass: 'field--required'
|
||||
},
|
||||
|
|
@ -118,8 +118,8 @@ export default {
|
|||
{
|
||||
$formkit: 'text',
|
||||
name: 'email',
|
||||
label: 'логин',
|
||||
placeholder: 'Логин',
|
||||
label: 'Почта',
|
||||
placeholder: 'Почта',
|
||||
validation: 'required',
|
||||
outerClass: 'field--required'
|
||||
},
|
||||
|
|
|
|||
|
|
@ -1,8 +1,8 @@
|
|||
<template>
|
||||
<div class="blog">
|
||||
<div class="blog__header">
|
||||
<h2 class="h2">Наш блог</h2>
|
||||
<button class="button m--arrow">Смотреть все</button>
|
||||
<h2 class="h2 blog__header-title">Наш блог</h2>
|
||||
<button class="button m--arrow blog__header-btn">Смотреть все</button>
|
||||
</div>
|
||||
<div class="blog__content">
|
||||
<div class="blog__cover"></div>
|
||||
|
|
|
|||
|
|
@ -0,0 +1,26 @@
|
|||
<template>
|
||||
<ContentLoader
|
||||
viewBox="0 0 1920 40"
|
||||
:speed="2"
|
||||
primaryColor="#bbb9ca"
|
||||
secondaryColor="#ecebeb"
|
||||
>
|
||||
<rect x="68" y="18" rx="2" ry="2" width="25" height="5" />
|
||||
<rect x="444" y="11" rx="2" ry="2" width="75" height="10" />
|
||||
<rect x="68" y="11" rx="2" ry="2" width="25" height="5" />
|
||||
<rect x="45" y="29" rx="2" ry="2" width="538" height="6" />
|
||||
<rect x="9" y="10" rx="2" ry="2" width="25" height="25" />
|
||||
<rect x="22" y="21" rx="0" ry="0" width="6" height="2" />
|
||||
<circle cx="54" cy="17" r="8" />
|
||||
<rect x="523" y="11" rx="2" ry="2" width="58" height="10" />
|
||||
<rect x="101" y="11" rx="2" ry="2" width="13" height="13" />
|
||||
</ContentLoader>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { ContentLoader } from "vue-content-loader"
|
||||
export default {
|
||||
name: 'playLoader',
|
||||
components: [ContentLoader]
|
||||
}
|
||||
</script>
|
||||
|
|
@ -1,5 +1,7 @@
|
|||
<template>
|
||||
<div class="player">
|
||||
<playLoader v-if="false"/>
|
||||
<template v-else>
|
||||
<div class="player__cover">
|
||||
<img :src="currentPlay.art" alt="player"/>
|
||||
</div>
|
||||
|
|
@ -17,10 +19,10 @@
|
|||
</div>
|
||||
<div class="player__tools">
|
||||
<FormKit
|
||||
v-model="isLive"
|
||||
v-model="isUserMusic"
|
||||
type="toggle"
|
||||
label="Включить мою музыку"
|
||||
@change="changeLive"
|
||||
:disabled="!user"
|
||||
/>
|
||||
<div class="player__volume">
|
||||
<span @click="setVolume"/>
|
||||
|
|
@ -29,29 +31,42 @@
|
|||
</div>
|
||||
</div>
|
||||
<div class="player__bottom">
|
||||
<div class="player__time m--ether">
|
||||
<div class="player__time" :class="!isUserMusic&&'m--ether'">
|
||||
<template v-if="isUserMusic">
|
||||
{{ getTime(playerInfo.currentTime) }}/{{ getTime(playerInfo.duration) }}
|
||||
</template>
|
||||
<template v-else>
|
||||
Эфир
|
||||
</template>
|
||||
</div>
|
||||
<div class="player__progress">
|
||||
<input :disabled="player.live" type="range" v-model="player.progress">
|
||||
<input :disabled="!isUserMusic" type="range" v-model="playerInfo.progress">
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import {audio as Player, app} from "@/services";
|
||||
import PlayLoader from "components/player-loader.vue";
|
||||
|
||||
export default {
|
||||
name: 'player',
|
||||
components: {PlayLoader},
|
||||
data() {
|
||||
return {
|
||||
audioUrl: 'http://82.97.242.49:18000/radio.mp3',
|
||||
isFavorites: false,
|
||||
isPlayRadio: true,
|
||||
connection: null,
|
||||
isLive: !this.$store.state.currentPlay.live,
|
||||
isUserMusic: !this.$store.state.currentPlay.live,
|
||||
playerInfo: {
|
||||
progress: 0,
|
||||
currentTime: 0,
|
||||
duration: 0
|
||||
}
|
||||
}
|
||||
},
|
||||
computed: {
|
||||
|
|
@ -63,24 +78,52 @@ export default {
|
|||
},
|
||||
player() {
|
||||
return this.$store.state.player
|
||||
},
|
||||
userSongList() {
|
||||
return this.$store.state.userFavorite?.songs || []
|
||||
}
|
||||
},
|
||||
watch: {
|
||||
'currentPlay': {
|
||||
immediate: false,
|
||||
handler(to, from) {
|
||||
if (this.isUserMusic !== !this.currentPlay.live) {
|
||||
this.isUserMusic = !this.currentPlay.live;
|
||||
}
|
||||
if (to.id !== from.id && this.user.id) {
|
||||
this.checkSongIsFavorite();
|
||||
}
|
||||
if (!this.currentPlay.live && to.id !== from.id) {
|
||||
this.getAudio(this.userSongList[0].azura_id);
|
||||
}
|
||||
},
|
||||
},
|
||||
'isUserMusic': {
|
||||
immediate: false,
|
||||
handler() {
|
||||
if (this.isLive!==!this.currentPlay.live){
|
||||
this.isLive = !this.currentPlay.live;
|
||||
if (this.isUserMusic === this.currentPlay.live) {
|
||||
this.changeLive();
|
||||
}
|
||||
},
|
||||
},
|
||||
},
|
||||
created() {
|
||||
this.connectionPlayer();
|
||||
if (this.user.id) {
|
||||
this.checkSongIsFavorite();
|
||||
}
|
||||
},
|
||||
mounted() {
|
||||
if (!this.player.target) {
|
||||
this.$store.dispatch('initPlayer');
|
||||
|
||||
this.playerInfo.progress = this.currentPlay.live ? 100 : 0;
|
||||
|
||||
if (!this.currentPlay.live) {
|
||||
this.$store.dispatch('setCurrentPlay', {...this.userSongList[0], live: false});
|
||||
this.getAudio(this.userSongList[0].azura_id);
|
||||
if (this.player.target){
|
||||
this.player.target.addEventListener('timeupdate',this.updateProgress)
|
||||
}
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
|
|
@ -92,35 +135,71 @@ export default {
|
|||
this.connection.init();
|
||||
this.connection.onHandler(this.getPlaying);
|
||||
},
|
||||
checkSongIsFavorite() {
|
||||
app.getCheckFavoriteSong(this.currentPlay.azura_id || this.currentPlay.id).then(res => {
|
||||
this.isFavorites = true;
|
||||
}).catch(err => {
|
||||
this.isFavorites = false;
|
||||
console.error(err)
|
||||
})
|
||||
},
|
||||
getPlaying(e) {
|
||||
const jsonData = JSON.parse(e.data)
|
||||
if (jsonData?.pub?.data) {
|
||||
const data = jsonData?.pub?.data;
|
||||
if (this.currentPlay.live) {
|
||||
if (data.np.station.listen_url !== this.player.target.src) {
|
||||
console.log('data.np.station.listen_url', data.np.station.listen_url)
|
||||
this.$store.dispatch('changePlayer', data.np.station.listen_url);
|
||||
}
|
||||
this.$store.dispatch('setCurrentPlay', {...data.np.now_playing.song, live: true});
|
||||
this.$store.dispatch('setCurrentPlay', {
|
||||
...this.currentPlay,
|
||||
...data.np.now_playing.song,
|
||||
live: true
|
||||
});
|
||||
}
|
||||
}
|
||||
},
|
||||
updateProgress() {
|
||||
console.log(this.$refs.player.currentTime)
|
||||
console.log(this.$refs.player.duration)
|
||||
updateProgress(e) {
|
||||
this.playerInfo = {
|
||||
progress: this.player.target.currentTime / this.player.target.duration * 100,
|
||||
currentTime: this.player.target.currentTime,
|
||||
duration: this.player.target.duration
|
||||
}
|
||||
},
|
||||
handlerPlay() {
|
||||
console.log(this.player.target.src)
|
||||
this.$store.dispatch('handlerPlayer', {play: true});
|
||||
},
|
||||
handlerPause() {
|
||||
this.$store.dispatch('handlerPlayer', {pause: true});
|
||||
},
|
||||
getSongList() {
|
||||
app.getFavoriteList().then(res => {
|
||||
this.$store.dispatch('setUserFavorite', {songs: res})
|
||||
}).catch(err => {
|
||||
console.error(err)
|
||||
})
|
||||
},
|
||||
handlerFavorites() {
|
||||
if (this.user?.id) {
|
||||
this.isFavorites = !this.isFavorites;
|
||||
const params = {...this.currentPlay, azura_id: this.currentPlay.id};
|
||||
if (!this.isFavorites) {
|
||||
app.createFavoriteForUser(params).then(() => {
|
||||
|
||||
this.isFavorites = !this.isFavorites;
|
||||
this.getSongList();
|
||||
}).catch(err => {
|
||||
console.error(err)
|
||||
})
|
||||
} else {
|
||||
console.log(params)
|
||||
// app.removeFavoriteForUser(params).then(()=>{
|
||||
// this.isFavorites = !this.isFavorites;
|
||||
// this.getSongList();
|
||||
// }).catch(err=>{
|
||||
// console.error(err)
|
||||
// })
|
||||
}
|
||||
} else {
|
||||
this.$emit('shopAuthentication', true)
|
||||
}
|
||||
|
|
@ -132,15 +211,36 @@ export default {
|
|||
changeVolume() {
|
||||
this.$store.dispatch('handlerPlayer', {volume: 100});
|
||||
},
|
||||
changeLive(e) {
|
||||
console.log(e)
|
||||
getAudio(id) {
|
||||
app.getAudio(id).then(res => {
|
||||
const blob = new Blob([res], {type: 'application/audio'});
|
||||
const audioUrl = URL.createObjectURL(blob);
|
||||
this.$store.dispatch('changePlayer', audioUrl);
|
||||
}).catch(err => {
|
||||
console.debug(err)
|
||||
})
|
||||
},
|
||||
changeLive() {
|
||||
if (this.currentPlay.live) {
|
||||
this.$store.dispatch('setCurrentPlay', {live: false});
|
||||
console.log('избранное')
|
||||
this.getAudio(this.userSongList[0].azura_id);
|
||||
this.playerInfo.progress = 0;
|
||||
this.player.target.addEventListener('timeupdate', this.updateProgress)
|
||||
this.$store.dispatch('setCurrentPlay', {...this.userSongList[0], live: false});
|
||||
} else {
|
||||
this.$store.dispatch('setCurrentPlay', {live: true});
|
||||
this.playerInfo.progress = 100;
|
||||
this.$store.dispatch('setCurrentPlay', {...this.currentPlay, live: true});
|
||||
console.log('поток')
|
||||
}
|
||||
},
|
||||
getTime(value) {
|
||||
let minutes = Math.floor(value / 60);
|
||||
let seconds = Math.round(value % 60);
|
||||
|
||||
let paddedMinutes = minutes < 10 ? "0" + minutes : minutes;
|
||||
let paddedSeconds = seconds < 10 ? "0" + seconds : seconds;
|
||||
|
||||
return `${paddedMinutes}:${paddedSeconds}`;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,42 +1,34 @@
|
|||
<template>
|
||||
<div class="rubric-block">
|
||||
<div class="rubric-block__header">
|
||||
<h2 class="h2">
|
||||
<h2 class="h2 rubric-block__header-title">
|
||||
Рубрики
|
||||
</h2>
|
||||
<button class="button m--arrow" v-if="$route.name !== 'rubric'" @click="next('rubric')">Смотреть все</button>
|
||||
</div>
|
||||
<button class="button m--arrow rubric-block__link" v-if="$route.name !== 'rubric'" @click="next('rubric')">Смотреть все</button>
|
||||
<div class="p rubric-block__description">
|
||||
IT-радио - это уникальная платформа для обмена опытом, знаниями и обсуждения актуальных вопросов, связанных с разработкой программного обеспечения, искусственного интеллекта, интернета вещей и других направлений IT-индустрии
|
||||
</div>
|
||||
<div class="rubric-block__list">
|
||||
<div class="rubric-block__item">
|
||||
<div class="title rubric-block__title">Новости</div>
|
||||
<div class="p rubric-block__description m--50">Новости из мира цифровых и около цифровых технологий, рассказанные понятным языком.</div>
|
||||
<button class="button m--arrow rubric-block__btn" @click="showModalRubric('news')">Узнать больше</button>
|
||||
</div>
|
||||
<div class="rubric-block__item">
|
||||
<div class="title rubric-block__title">Подкасты</div>
|
||||
<div class="p rubric-block__description m--50">Диалоги, записанные нашей командой с интересными гостями из мира IT.</div>
|
||||
<button class="button m--arrow rubric-block__btn" @click="showModalRubric('podcast')">Узнать больше</button>
|
||||
<template v-if="showLoader">
|
||||
<div class="loader">
|
||||
<div class="spinner"/>
|
||||
Загрузка данных
|
||||
</div>
|
||||
<div class="rubric-block__item">
|
||||
<div class="title rubric-block__title">Поговори с ИИ</div>
|
||||
<div class="p rubric-block__description m--50">Общаемся с искусственным интеллектом и нейросетями. Пытаемся понять на что он способен и что может.</div>
|
||||
<button class="button m--arrow rubric-block__btn" @click="showModalRubric('AI')">Узнать больше</button>
|
||||
</div>
|
||||
<div class="rubric-block__item">
|
||||
<div class="title rubric-block__title">Ликбез</div>
|
||||
<div class="p rubric-block__description m--50">Ликвидация безграмотности в сфере IT. Объяснить понятия так, чтобы понял и ребёнок и подросток и старшее поколение. Рубрика, направленная на повышение уровня осведомленности в IT.</div>
|
||||
<button class="button m--arrow rubric-block__btn" @click="showModalRubric('educational')">Узнать больше</button>
|
||||
</template>
|
||||
<div v-else class="rubric-block__list">
|
||||
<div class="rubric-block__item" v-for="rubrik in rubriks" :key="`rubrik_${rubrik.id}`">
|
||||
<div class="title rubric-block__title">{{rubrik.name}}</div>
|
||||
<div class="p rubric-block__description m--50">{{rubrik.title}}</div>
|
||||
<button class="button m--arrow rubric-block__btn" @click="showModalRubric(rubrik.id)">Узнать больше</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<RubricModal :showModal="isShowModalRubric" @hideModal="hiddenModalRubric" :ModalTemplate="ModalTemplate"/>
|
||||
<RubricModal :showModal="isShowModalRubric" @hideModal="hiddenModalRubric" :selectRubric="ModalTemplate"/>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import RubricModal from "@/components/rubric-modal.vue";
|
||||
import {app} from "@/services";
|
||||
|
||||
export default {
|
||||
name: 'rubric-block',
|
||||
|
|
@ -44,10 +36,25 @@ export default {
|
|||
data(){
|
||||
return{
|
||||
isShowModalRubric: false,
|
||||
ModalTemplate:null
|
||||
ModalTemplate:null,
|
||||
rubriks: [],
|
||||
showLoader: false,
|
||||
}
|
||||
},
|
||||
created() {
|
||||
this.getRubriks();
|
||||
},
|
||||
methods:{
|
||||
getRubriks() {
|
||||
this.showLoader = true;
|
||||
app.getRubriks().then((data) => {
|
||||
this.showLoader = false;
|
||||
this.rubriks = data;
|
||||
}).catch(err => {
|
||||
this.showLoader = false;
|
||||
console.log(err)
|
||||
})
|
||||
},
|
||||
showModalRubric(key){
|
||||
this.ModalTemplate = key
|
||||
this.isShowModalRubric = true;
|
||||
|
|
|
|||
|
|
@ -8,12 +8,16 @@
|
|||
:clickToClose="false"
|
||||
@click-outside="$emit('hideModal')"
|
||||
>
|
||||
<template v-if="showLoader">
|
||||
<div class="loader">
|
||||
<div class="spinner"/>
|
||||
Загрузка данных
|
||||
</div>
|
||||
</template>
|
||||
<template v-else>
|
||||
<div class="rubric-modal__header">
|
||||
<div class="title m--white rubric-modal__title">
|
||||
<template v-if="ModalTemplate==='news'">Новости</template>
|
||||
<template v-else-if="ModalTemplate==='podcast'">Подкасты</template>
|
||||
<template v-else-if="ModalTemplate==='AI'">Поговори с ИИ</template>
|
||||
<template v-else-if="ModalTemplate==='educational'">Ликбез</template>
|
||||
{{rubrik.name}}
|
||||
</div>
|
||||
<button
|
||||
class="button modal__close rubric-modal__close"
|
||||
|
|
@ -22,28 +26,21 @@
|
|||
</button>
|
||||
</div>
|
||||
<div class="rubric-modal__cover">
|
||||
<img src="@/assets/img/icon/remove-rubrics.png" alt=""/>
|
||||
<img :src="`${selfUrl}${rubrik.img}`" alt=""/>
|
||||
</div>
|
||||
<div class="rubric-modal__description">
|
||||
<template v-if="ModalTemplate==='news'">
|
||||
В этой рубрике будут выходить ежедневные и еженедельные новостные выпуски, освещающие ключевые события в мире IT, включая новые разработки, релизы продуктов, изменения в законодательстве, касающиеся технологий, и другие важные события.<br/><br/> Так же будем выдавать аналитические материалы - глубокие и не очень глубокие обзоры, в которых рассматриваются тенденции развития IT-индустрии, анализируются стратегические направления развития крупных компаний и перспективы новых технологий
|
||||
</template>
|
||||
<template v-else-if="ModalTemplate==='podcast'">
|
||||
В подкастах мы будем задавать вопросы айтишникам, специалистам из около айтишной среды, цифровым музыкантам, чиновникам от IT, бизнесменам, геймерам и киберспортсменам, криптовалютчикам и сами будем отвечать на вопросы простых людей, которые хотят разобраться в нашей сфере, которая пронизывает все сферы современной жизни. А если сами не сможем ответить, то будем искать тех, кто сможет ответить.
|
||||
</template>
|
||||
<template v-else-if="ModalTemplate==='AI'">
|
||||
Редакция IT-Радио собирается за круглым столом и задаёт ИИ вопросы, которые приходят к нам на почту на разные темы.<br/><br/> Цель - понять насколько далеко ИИ уходит в своём развитии от человека, дать ответы на вопросы. Попытаемся разобрать ответы искусственного интеллекта, дать свои комментарии, дополнить. Попытаемся понять его логику и логику его разработчиков, которую закладывали в работу нейросети.
|
||||
</template>
|
||||
<template v-else-if="ModalTemplate==='educational'">
|
||||
Будем рассказывать что такое IT-сфера. Какие у неё составляющие. Кого можно назвать айтишником, а кого нет и почему. Почему кому-то сложно понять IT и при чём тут точные науки.
|
||||
</template>
|
||||
{{rubrik.description}}
|
||||
</div>
|
||||
<button class="button m--fit-content m--white m--arrow">Написать</button>
|
||||
<button class="button m--fit-content m--white m--arrow" v-if="user.id">Написать</button>
|
||||
</template>
|
||||
</vue-final-modal>
|
||||
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import {app} from "@/services";
|
||||
import {selfUrl} from '@/settings';
|
||||
|
||||
export default {
|
||||
name: 'RubricModal',
|
||||
props: {
|
||||
|
|
@ -53,17 +50,48 @@ export default {
|
|||
return false;
|
||||
}
|
||||
},
|
||||
ModalTemplate:{
|
||||
selectRubric: {
|
||||
type: String,
|
||||
default() {
|
||||
return '';
|
||||
}
|
||||
},
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
selfUrl,
|
||||
rubrik: {},
|
||||
showLoader: false
|
||||
}
|
||||
},
|
||||
computed: {
|
||||
show() {
|
||||
return this.showModal;
|
||||
},
|
||||
user() {
|
||||
return this.$store.state.user;
|
||||
},
|
||||
},
|
||||
watch: {
|
||||
'selectRubric': {
|
||||
handler() {
|
||||
if (this.selectRubric){
|
||||
this.getRubrik();
|
||||
}
|
||||
}
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
getRubrik() {
|
||||
this.showLoader = true;
|
||||
app.getRubrik(this.selectRubric).then((data) => {
|
||||
this.showLoader = false;
|
||||
this.rubrik = data[0];
|
||||
}).catch(err => {
|
||||
this.showLoader = false;
|
||||
console.log(err)
|
||||
})
|
||||
},
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
|
|
|||
|
|
@ -1,5 +1,5 @@
|
|||
<template>
|
||||
<div class="song-item" :class="[currentPlay.id===song.id&&'m--select']" @click="handlerSelectSong">
|
||||
<div class="song-item" :class="[selectSong&&'m--select']" @click="handlerSelectSong">
|
||||
<div class="song-item__selected" :class="[!isPlay&&'m--stop']">
|
||||
<svg width="33" height="28" viewBox="0 0 33 28" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<path class="" d="M0 15C0 13.6193 1.11929 12.5 2.5 12.5C3.88071 12.5 5 13.6193 5 15V27.5H0V15Z" fill="#7138F4"/>
|
||||
|
|
@ -10,9 +10,9 @@
|
|||
</svg>
|
||||
</div>
|
||||
<div>
|
||||
<button v-if="isPlay" @click="handlerPause" class="button song-item__btn m--pause">
|
||||
<button v-if="isPlay" @click.stop="handlerPause" class="button song-item__btn m--pause">
|
||||
</button>
|
||||
<button v-else @click="handlerPlay" class="button song-item__btn m--play">
|
||||
<button v-else @click.stop="handlerPlay" class="button song-item__btn m--play">
|
||||
</button>
|
||||
</div>
|
||||
<div class="song-item__info">
|
||||
|
|
@ -31,9 +31,9 @@ export default {
|
|||
name: 'song-item',
|
||||
props:{
|
||||
selectSong:{
|
||||
type: Number,
|
||||
type: Boolean,
|
||||
default(){
|
||||
return null
|
||||
return false
|
||||
}
|
||||
},
|
||||
song:{
|
||||
|
|
@ -47,7 +47,7 @@ export default {
|
|||
default(){
|
||||
return false
|
||||
}
|
||||
}
|
||||
},
|
||||
},
|
||||
watch: {
|
||||
'playSong': {
|
||||
|
|
@ -62,20 +62,15 @@ export default {
|
|||
isPlay: this.playSong
|
||||
}
|
||||
},
|
||||
computed:{
|
||||
currentPlay(){
|
||||
return this.$store.state.currentPlay
|
||||
}
|
||||
},
|
||||
methods:{
|
||||
handlerPlay() {
|
||||
this.isPlay = true;
|
||||
this.$emit('playSong', {...this.song, live: false, isPlay: true,})
|
||||
},
|
||||
handlerPause() {
|
||||
this.isPlay = false;
|
||||
this.$emit('pauseSong', {...this.song, live: false, isPlay: false,})
|
||||
},
|
||||
handlerSelectSong(){
|
||||
this.$store.dispatch('setCurrentPlay', {...this.song, live: false});
|
||||
this.$emit('selectSong', {...this.song, live: false})
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -4,6 +4,11 @@
|
|||
v-for="song in songList"
|
||||
:key="song"
|
||||
:song="song"
|
||||
:playSong="!currentPlay.live && song.id === currentPlay.id? currentPlay.isPlay: false"
|
||||
:selectSong="!currentPlay.live && song.id === currentPlay.id"
|
||||
@selectSong="handlerSelectSong"
|
||||
@playSong="handlerPlaySong"
|
||||
@pauseSong="handlerPauseSong"
|
||||
/>
|
||||
</div>
|
||||
</template>
|
||||
|
|
@ -23,6 +28,22 @@ export default {
|
|||
data() {
|
||||
return {}
|
||||
},
|
||||
methods: {}
|
||||
computed: {
|
||||
currentPlay() {
|
||||
return this.$store.state.currentPlay
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
handlerSelectSong(params) {
|
||||
this.$store.dispatch('setCurrentPlay', {...this.currentPlay, ...params});
|
||||
},
|
||||
handlerPlaySong(params) {
|
||||
this.$store.dispatch('setCurrentPlay', params);
|
||||
|
||||
},
|
||||
handlerPauseSong(params) {
|
||||
this.$store.dispatch('setCurrentPlay', params);
|
||||
},
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
|
|
|||
|
|
@ -11,7 +11,8 @@
|
|||
</div>
|
||||
<template v-if="showLoader">
|
||||
<div class="loader">
|
||||
<div class="spinner" /> Загрузка данных
|
||||
<div class="spinner"/>
|
||||
Загрузка данных
|
||||
</div>
|
||||
</template>
|
||||
<Swiper
|
||||
|
|
@ -23,6 +24,23 @@
|
|||
el: '.team__progress',
|
||||
clickable: true,
|
||||
type: 'progressbar',
|
||||
}"
|
||||
:breakpoints="{
|
||||
0: {
|
||||
slidesPerView: 1,
|
||||
},
|
||||
450: {
|
||||
slidesPerView: 1.5,
|
||||
},
|
||||
768: {
|
||||
slidesPerView: 2.5,
|
||||
},
|
||||
1020:{
|
||||
slidesPerView: 3,
|
||||
},
|
||||
1280: {
|
||||
slidesPerView: 4,
|
||||
},
|
||||
}"
|
||||
class="team__slider"
|
||||
>
|
||||
|
|
|
|||
|
|
@ -44,7 +44,8 @@ export default route(function (/* { store, ssrContext } */) {
|
|||
if (store.state.user && store.state.user.id) {
|
||||
next();
|
||||
} else {
|
||||
next({ name: 'auth' });
|
||||
next({ name: 'home' });
|
||||
this.$store.dispatch('setShowAuthModal', true);
|
||||
}
|
||||
} else {
|
||||
next();
|
||||
|
|
|
|||
|
|
@ -34,6 +34,22 @@ export default class extends REST {
|
|||
throw new RESTError(error, 'Ошибка при получении команды');
|
||||
});
|
||||
}
|
||||
|
||||
static getCheckFavoriteSong(id){
|
||||
return this._get(`radio/song/check_is_favorite/${id}`, {}, {}).then((data) => {
|
||||
return data;
|
||||
}).catch((error) => {
|
||||
throw new RESTError(error, 'Ошибка при проверке песни');
|
||||
});
|
||||
}
|
||||
|
||||
static getAudio(id){
|
||||
return this._get(`radio/song/get_audio/${id}`, {}, {}, false, true).then((data) => {
|
||||
return data;
|
||||
}).catch((error) => {
|
||||
throw new RESTError(error, 'Ошибка при получениии песни');
|
||||
});
|
||||
}
|
||||
static createFavoriteForUser(params){
|
||||
return this._post(`radio/song/add_favorite`, {}, params).then((data) => {
|
||||
return data;
|
||||
|
|
@ -42,6 +58,14 @@ export default class extends REST {
|
|||
});
|
||||
}
|
||||
|
||||
static removeFavoriteForUser(params){
|
||||
return this._post(`radio/song/delete_song`, {}, params).then((data) => {
|
||||
return data;
|
||||
}).catch((error) => {
|
||||
throw new RESTError(error, 'Ошибка при получении плейлистов');
|
||||
});
|
||||
}
|
||||
|
||||
static getFavoriteList(params){
|
||||
return this._get(`radio/song`, {}, params).then((data) => {
|
||||
return data;
|
||||
|
|
@ -49,7 +73,20 @@ export default class extends REST {
|
|||
throw new RESTError(error, 'Ошибка при получении плейлистов');
|
||||
});
|
||||
}
|
||||
|
||||
static getRubriks() {
|
||||
return this._get(`radio/rubriks`, {}, {}).then((data) => {
|
||||
return data;
|
||||
}).catch((error) => {
|
||||
throw new RESTError(error, 'Ошибка при получении рубрик');
|
||||
});
|
||||
}
|
||||
static getRubrik(id) {
|
||||
return this._get(`radio/rubriks/${id}`, {}, {}).then((data) => {
|
||||
return data;
|
||||
}).catch((error) => {
|
||||
throw new RESTError(error, 'Ошибка при получении рубрик');
|
||||
});
|
||||
}
|
||||
|
||||
|
||||
|
||||
|
|
@ -69,12 +106,4 @@ export default class extends REST {
|
|||
throw new RESTError(error, 'Ошибка при получении плейлистов');
|
||||
});
|
||||
}
|
||||
|
||||
static getRubriks(station, params) {
|
||||
return this._get(`radio.mp3`, params, {}).then((data) => {
|
||||
return data;
|
||||
}).catch((error) => {
|
||||
throw new RESTError(error, 'Ошибка при получении плейлистов');
|
||||
});
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -35,8 +35,8 @@ class REST {
|
|||
static get settings() {
|
||||
throw new Error('settings must be overridden');
|
||||
}
|
||||
static _get(url, params={}, extraParams, use_cache=false) {
|
||||
return this._request('get', url, params, {}, {}, extraParams, use_cache);
|
||||
static _get(url, params={}, extraParams, use_cache=false, isBlob=false) {
|
||||
return this._request('get', url, params, {}, {}, extraParams, use_cache, isBlob);
|
||||
}
|
||||
static _post(url, params, data) {
|
||||
return this._request('post', url, params, data);
|
||||
|
|
@ -50,7 +50,7 @@ class REST {
|
|||
static _delete(url, params, data) {
|
||||
return this._request('delete', url, params, data);
|
||||
}
|
||||
static _request(method, url, params={}, data={}, extraData={}, extraParams={}, use_cache=false) {
|
||||
static _request(method, url, params={}, data={}, extraData={}, extraParams={}, use_cache=false, isBlob=false) {
|
||||
let cache_key = null;
|
||||
return ajax.request({
|
||||
method,
|
||||
|
|
@ -59,7 +59,8 @@ class REST {
|
|||
data,
|
||||
extraData,
|
||||
extraParams,
|
||||
headers: this._getAuthHeaders()
|
||||
headers: this._getAuthHeaders(),
|
||||
responseType: this._getResponseType(isBlob),
|
||||
}).then((response) => {
|
||||
if (cache_key) {
|
||||
cache.set(cache_key, response.data);
|
||||
|
|
@ -67,6 +68,11 @@ class REST {
|
|||
return response.data;
|
||||
});
|
||||
}
|
||||
static _getResponseType(value){
|
||||
if (value) {
|
||||
return 'arraybuffer'
|
||||
}
|
||||
}
|
||||
static _getAuthHeaders() {
|
||||
if (store.state.token) {
|
||||
return { 'Authorization': `Bearer ${store.state.token}` };
|
||||
|
|
|
|||
|
|
@ -18,11 +18,18 @@ export default createStore({
|
|||
station: {
|
||||
id: 1
|
||||
},
|
||||
currentPlay: {},
|
||||
currentPlay: {
|
||||
isPlay: false
|
||||
},
|
||||
player: {
|
||||
target: null,
|
||||
volume: 50,
|
||||
live: true,
|
||||
},
|
||||
userFavorite: {
|
||||
podcast: [],
|
||||
playlist: [],
|
||||
songs: []
|
||||
}
|
||||
}
|
||||
},
|
||||
|
|
@ -56,7 +63,20 @@ export default createStore({
|
|||
console.log('initPlayer', state.player.target)
|
||||
},
|
||||
changePlayer(state, params) {
|
||||
const awaitPlay = () => {
|
||||
if (state.player.target.readyState >= 4) {
|
||||
state.player.target.play();
|
||||
state.player.target.removeEventListener('canplaythrough', awaitPlay);
|
||||
} else {
|
||||
awaitPlay();
|
||||
}
|
||||
}
|
||||
|
||||
state.player.target.src = params;
|
||||
state.player.src = params;
|
||||
if (state.currentPlay.isPlay){
|
||||
state.player.target.addEventListener('canplaythrough', awaitPlay)
|
||||
}
|
||||
},
|
||||
handlerPlayer(state, params) {
|
||||
if (params.pause) {
|
||||
|
|
@ -65,12 +85,16 @@ export default createStore({
|
|||
}
|
||||
if (params.play) {
|
||||
state.currentPlay.isPlay = true;
|
||||
console.log(state.player.target.readyState)
|
||||
state.player.target.play();
|
||||
}
|
||||
if (params.volume) {
|
||||
state.player.target.volume = params.volume;
|
||||
}
|
||||
},
|
||||
setUserFavorite(state, params) {
|
||||
state.userFavorite = {...state.userFavorite, ...params}
|
||||
}
|
||||
},
|
||||
actions: {
|
||||
setToken(context, tokens) {
|
||||
|
|
@ -100,7 +124,9 @@ export default createStore({
|
|||
},
|
||||
changePlayer(context, params) {
|
||||
context.commit('changePlayer', params);
|
||||
}
|
||||
|
||||
},
|
||||
setUserFavorite(context, params) {
|
||||
context.commit('setUserFavorite', params);
|
||||
},
|
||||
}
|
||||
});
|
||||
|
|
|
|||
|
|
@ -8,7 +8,8 @@
|
|||
Находимся в <span>Челябинске</span>, но вещаем на весь <span>Мир</span><br/>
|
||||
</p>
|
||||
<h1 class="home__title" ref="targetTitle">
|
||||
IT-Радио — <span id="targetTitleSpan">радиостанция про сферу</span> технологий <br/> и развитие <span id="targetTitleSpan">в IT</span>
|
||||
IT-Радио — <span id="targetTitleSpan">радиостанция про сферу</span> технологий <br/> и развитие
|
||||
<span id="targetTitleSpan">в IT</span>
|
||||
<!-- IT Радио —-->
|
||||
<!-- <span id="targetTitleSpan">радиостанция</span>-->
|
||||
<!-- <br/>-->
|
||||
|
|
@ -27,9 +28,7 @@
|
|||
<div class="text home__info--item">
|
||||
IT-RADIO. 2023
|
||||
<span>
|
||||
Сегодня IT-сфера развивается настолько быстро, что следить за всеми новинками и изменениями в ней становится все сложнее.
|
||||
<br/>
|
||||
<br/> Но есть способ всегда быть в курсе последних новостей и событий — это IT-радио.
|
||||
Сегодня IT-сфера развивается настолько быстро, что следить за всеми новинками и изменениями в ней становится все сложнее.<br/><br/> Но есть способ всегда быть в курсе последних новостей и событий — это IT-радио.
|
||||
</span>
|
||||
</div>
|
||||
<h2 class="h2 m--border">
|
||||
|
|
@ -37,9 +36,7 @@
|
|||
</h2>
|
||||
<div class="text home__info--item m--circle">
|
||||
<span>
|
||||
IT-радио — это уникальный проект, который объединяет в себе самых ярких представителей IT-индустрии, а также экспертов из различных областей, чтобы поделиться своими знаниями и опытом с широкой аудиторией.
|
||||
<br/>
|
||||
<br/>
|
||||
IT-радио — это уникальный проект, который объединяет в себе самых ярких представителей IT-индустрии, а также экспертов из различных областей, чтобы поделиться своими знаниями и опытом с широкой аудиторией.<br/><br/>
|
||||
Каждое шоу на IT-радио включает в себя актуальные темы, новости, обзоры, интервью с экспертами и многое другое.
|
||||
</span>
|
||||
</div>
|
||||
|
|
@ -70,7 +67,8 @@
|
|||
<div class="home__social--description">
|
||||
<h2 class="h2 m--white">Соц сети</h2>
|
||||
<div class="text">
|
||||
Следите за обновлениями и новыми постами на IT Radio, чтобы быть в курсе последних новостей и
|
||||
Следите за обновлениями и новыми постами на IT Radio, чтобы быть в курсе последних новостей
|
||||
и
|
||||
событий в мире IT, а также следить за анонсами и обновлениями!
|
||||
</div>
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -6,7 +6,7 @@
|
|||
{ name: 'Личный кабинет', route: { name: 'profile' } },
|
||||
]"
|
||||
/>
|
||||
<h1 class="h2 profile__title">Имя фамилия</h1>
|
||||
<h1 class="h2 profile__title">{{ user.email }}</h1>
|
||||
<button class="button m--text-link">Редактировать профиль</button>
|
||||
<div class="profile__tabs tabs m--btns">
|
||||
<button
|
||||
|
|
@ -22,10 +22,11 @@
|
|||
<template v-if="currentTabsItem==='music'">
|
||||
<template v-if="showLoader">
|
||||
<div class="loader">
|
||||
<div class="spinner" /> Загрузка данных
|
||||
<div class="spinner"/>
|
||||
Загрузка данных
|
||||
</div>
|
||||
</template>
|
||||
<SongList v-else :songList="songList"/>
|
||||
<SongList v-else :songList="userFavorite.songs"/>
|
||||
</template>
|
||||
</div>
|
||||
</template>
|
||||
|
|
@ -59,6 +60,14 @@ export default {
|
|||
showLoader: true,
|
||||
}
|
||||
},
|
||||
computed: {
|
||||
user() {
|
||||
return this.$store.state.user;
|
||||
},
|
||||
userFavorite(){
|
||||
return this.$store.state.userFavorite
|
||||
}
|
||||
},
|
||||
watch: {
|
||||
'$route.hash': {
|
||||
immediate: true,
|
||||
|
|
@ -79,7 +88,7 @@ export default {
|
|||
this.showLoader = true;
|
||||
app.getFavoriteList().then(res => {
|
||||
this.showLoader = false;
|
||||
this.songList = res;
|
||||
this.$store.dispatch('setUserFavorite', {songs: res})
|
||||
}).catch(err => {
|
||||
this.showLoader = false;
|
||||
console.error(err)
|
||||
|
|
|
|||
Loading…
Reference in New Issue