Skip to content

F
front-ntflix
Commit 82fc1cb5 authored by Raul Silas's avatar Raul Silas
Browse files
Options

feat: home layout, plans and animes list, and footer layout

parent 143c4243
Hide whitespace changes
Inline Side-by-side
Showing with 3053 additions and 1375 deletions
.gitignore
View file @ 82fc1cb5
...@@ -11,4 +11,6 @@ yarn-error.log ...@@ -11,4 +11,6 @@ yarn-error.log
*.njsproj *.njsproj
*.sln *.sln
.editorconfig .editorconfig
.babelrc .babelrc
\ No newline at end of file .env
data.json
\ No newline at end of file
package-lock.json
View file @ 82fc1cb5
This source diff could not be displayed because it is too large. You can view the blob instead.
src/App.vue
View file @ 82fc1cb5
<template> <template>
<div class= "home"> <div class="home">
<div class="Menu-Principal">
<div class="Menu-Principal"> <ul>
<li><a href="#home">Home</a></li>
<ul> <li><a href="#news">Cadastro</a></li>
<li><a href="#home">Home</a></li> <li><a href="#contact">Planos</a></li>
<li><a href="#news">cadastro</a></li> <li><a href="#about">Login</a></li>
<li><a href="#contact">planos</a></li> </ul>
<li><a href="#about">login</a></li> </div>
</ul> <br /><br /><br /><br />
<div class="blocologo">
</div> <img
<br><br><br><br> class="img-responsive img-logo"
<div class="blocologo"> <img class="img-responsive img-logo" alt="Vue logo" src="./assets/NTFLIXLogo - Copia.jpg"></div> alt="Vue logo"
src="./assets/NTFLIXLogo.png"
<div conteiner ="filmes"> />
<fieldset> <h2 class="title">NTFlix - Lorem Ipsum</h2>
<div class="img"> </div>
<a target="_blank" href="https://animesonline.vip/power-rangers-dublado/">
<img src="./assets/09-Power-Rangers-1-Temporada.jpg" alt="Forest" width="1000" height="900"> <div class="filmes">
</a> <AnimeList />
<div class="desc"> </div>
power rangers<br> <div class="planos">
A jornada de cinco adolescentes que devem buscar algo extraordinário quando eles tomam consciência <Plans />
que a sua pequena cidade Angel Grove - e o mundo - estão à beira de sofrer um ataque alienígena. Escolhidos </div>
pelo destino, eles irão descobrir que são os únicos que poderão salvar
o planeta. Mas para isso, eles devem superar seus problemas pessoais e juntarem sua forças, antes que seja tarde demais. <Footer />
</div>
</div>
</div>
<div class="img">
<a target="_blank" href="https://animesonline.vip/os-cavaleiros-do-zodiaco-dublado/">
<img src="./assets/cavaleiros.jpg" alt="Forest" width="600" height="400">
</a>
<div class="desc">
<p>cavaleiros de zodiaco</p>
conta a história de um grupo de cinco jovens guerreiros
cuja função era proteger Saori Kido, reencarnação de Atena, a deusa grega da sabedoria. Para lutar,
eles utilizam a energia interior e do cosmos, e suas armaduras que são inspiradas em constelações e
na mitologia grega.
</div>
</div>
<div class="img">
<a target="_blank" href="https://www.anitube.site/25883/">
<img src="./assets/04-Entenda-Melhor-SAILOR-MOON-1.jpg" alt="Sailon Moon" width="300" height="200">
</a>
<div class="desc">
Sailor Moon <br>
Usagi Tsukino, uma estudante do ensino médio de 14 anos, descobre por meio de uma gata falante
chamada Luna que é uma guerreira mágica, com habilidades especiais. Ela então se transforma em
Sailor Moon e, junto com suas amigas também superpoderosas, está destinada a proteger a Terra das forças do mal
</div>
</div>
<div class="img">
<a target="_blank" href="https://animesonline.vip/caverna-do-dragao/">
<img src="./assets/cavena-do-dragao.jpg" alt="Forest" width="600" height="400">
</a>
<div class="desc">Caverna do Dragão
conta a história de seis jovens que, durante uma brincadeira numa montanha-russa,
são transportados num portal para um Reino. Lá, com armas e roupas mágicas, eles contam
com dicas do Mestre dos Magos para se livrar dos vilões e voltar para suas casas
</div>
</div>
<div class="img">
<a target="_blank" href="https://animesbr.biz/anime/dragon-ball/">
<img src="./assets/Dragon-Ball-Super-brasil.jpg" alt="Forest" width="600" height="400">
</a>
<div class="desc">
Dragon Ball Z
A série segue as aventuras do protagonista, Son Goku, desde sua infância até a idade adulta enquanto ele
treina artes marciais e explora o mundo em busca de sete esferas conhecidas como as Esferas do Dragão,
que convocam um dragão que concede um desejo quando reunidas.
</div>
</div>
<div class="img">
<a target="_blank" href="https://animesonline.cc/anime/samurai-x/">
<img src="./assets/samurai.jpg" alt="Forest" width="600" height="400">
</a>
<div class="desc">
Samurai X
A série, ambientada nos primeiros anos da Era Meiji no Japão, conta a história de Kenshin Himura
um pacífico espadachim que prometeu nunca mais matar. Entretanto, seu passado como retalhador a
serviço da Ishin Shishi fará o jovem Himura brandir novamente sua espada contra velhos e novos inimigos.
</div>
</div>
<div class="img">
<a target="_blank" href="https://goyabu.org/animes/transformers-cyberverse">
<img src="./assets/transformes.jpg" alt="Forest" width="600" height="400">
</a>
<div class="desc">transformers cyberverse
A recém-formada equipe de Autobots deve impedir que a Shockwave destrua toda a vida no planeta.
A equipe Autobot finalmente descobre a localização da Arca. A equipe Autobot deve lutar contra o
Shockwave e seus Decepticons para defender a Arca e despertar o Optimus Prime e os outros Autobots.
</div>
</div>
<div class="img">
<a target="_blank" href="https://animesonlinen.com/legendados/532990">
<img src="./assets/naruto.jpg" alt="Forest" width="1000" height="900">
</a>
<div class="desc">
Naruto<br>
Naruto é um jovem órfão habitante da Vila da Folha que sonha se tornar o quinto Hokage, o maior guerreiro
e governante da vila. Ao se graduar como ninja, descobre que tem um demônio raposa selado dentro de si.
</div>
</div>
<div class="img">
<a target="_blank" href="https://animesonlinegames.com/animes/as-meninas-super-poderosas/a">
<img src="./assets/as-meninas-superpoderosas-hbo-max.jpg" alt="Forest" width="1000" height="900">
</a>
<div class="desc">
meninas super poderosas
Desiludidas de que perderam a infância por estarem combatendo o crime,
as irmãs enfrentam vários dilemas em suas vidas pessoais e, quando o mundo precisa delas novamente, se
sentem divididas em voltarem ao papel de super-heroínas.
</div>
</div>
<div class="img">
<a target="_blank" href="https://animefire.net/animes/ultraman-dublado-todos-os-episodios">
<img src="./assets/ultraman.jpg" alt="Forest" width="500" height="1500">
</a>
<div class="desc">
ultraman <br>
Um alienígena vindo da Galáxia M-78 a bordo de uma cúpula vermelha, ao perseguir o monstro Bemular,
choca-se com a nave do oficial Hayata da S.I.A Hayata não suporta a gravidade dos ferimentos e morre.
Para reparar o erro, o alienígena funde sua energia vital à de Hayata, trazendo-o de volta a vida
e entregando-lhe a Cápsula Beta. e agora Hayata pode se
transformar em Ultraman para defender a Terra de qualquer ameaça.
</div>
</div>
<div class="img">
<a target="_blank" href="https://www.anitube.site/6428/">
<img src="./assets/yu-gi-oh.png" alt="Forest" width="1000" height="900">
</a>
<div class="desc">
yu-gi-oh<br>
O jovem estudante do ensino médio Yugi Muto derrota o campeão mundial, Seto Kaiba, em um duelo
de cartas com a misteriosa ajuda do quebra-cabeça Millenium. Em razão de sua vitória inesperada,
Yugi se torna famoso em todo o mundo e passa a participar de outros duelos para salvar os amigos e a
família.
</div>
</div>
<div class="img">
<a target="_blank" href="https://animesonlinegames.com/animes/pica-pau/a">
<img src="./assets/Pica-Pau-.jpg" alt="Forest" width="1000" height="900">
</a>
<div class="desc">
Pica Pal<br>
O pássaro falante Pica-Pau sempre tenta se dar bem em qualquer situação. Na companhia de seu amigo,
o cavalo medroso Pé de Pano, ele adora pregar peças em seus inimigos Zeca Urubu, Zé Jacaré, Meany
Ranheta, entre outros.
</div>
</div>
<div class="img">
<a target="_blank" href="https://animesonlinegames.com/animes/he-man/a">
<img src="./assets/He-man.jpg" alt="Forest" width="1000" height="900">
</a>
<div class="desc">
He-Man <br>
He-Man é o homem mais poderoso do universo. Ele enfrenta as forças do mal para salvar o planeta Eternia dos
planos de Esqueleto, e proteger os segredos do Castelo de Grayskull.
</div>
</div>
<div class="img">
<a target="_blank" href="https://animesonline.vip/w-i-t-c-h-dublado/">
<img src="./assets/witch.jpg" alt="Forest" width="1000" height="900">
</a>
<div class="desc">
Witch <br>
, o desenho animado conta a história de cinco meninas: Will, Irma, Taranee,
Cornélia e Hay Lin que ganharam poderes mágicos e se tornaram as "Guardians of
the Veil" (Guardiãs do Véu).
</div>
</div>
</fieldset>
</div>
<div class="Menu">
<h1>Cadastro </h1>
<!--Dados de Pessoais-->
<fieldset>
<legend>Dados Pessoais</legend>
<table cellspacing="10">
<tr>
<td>
<label for="nome">Nome: </label>
</td>
<td align="left">
<input type="text" name="nome">
</td>
<td>
<label for="sobrenome">Sobrenome: </label>
</td>
<td align="left">
<input type="text" name="sobrenome">
</td>
<td>
<label for="sobrenome">Sexo: </label>
</td>
<td>
<select name="sexo">
<option value="ac">Masculino</option>
<option value="al">Feminino</option>
<option value="am">Prefiro não informar</option>
</select>
</td>
</tr>
<tr>
<td>
<label>Nascimento: </label>
</td>
<td align="left">
<input type="text" name="dia" size="2" maxlength="2" value="dd">
<input type="text" name="mes" size="2" maxlength="2" value="mm">
<input type="text" name="ano" size="4" maxlength="4" value="aaaa">
</td>
</tr>
<tr>
<td>
<label for="rg">E-mail: </label>
</td>
<td align="left">
<input type="text" name="rg" size="13" maxlength="13">
</td>
</tr>
<tr>
<td>
<label>CPF:</label>
</td>
<td align="left">
<input type="text" name="cpf" size="9" maxlength="9"> - <input type="text" name="cpf2" size="2" maxlength="2">
</td>
</tr>
</table>
</fieldset>
<!--Dados de Endereço-->
<fieldset>
<legend>Dados de Endereço</legend>
<table cellspacing="10">
<tr>
<td>
<label for="rua">Rua:</label>
</td>
<td align="left">
<input type="text" name="rua">
</td>
<td>
<label for="numero">Numero:</label>
</td>
<td align="left">
<input type="text" name="numero" size="4">
</td>
</tr>
<tr>
<td>
<label for="bairro">Bairro: </label>
</td>
<td align="left">
<input type="text" name="bairro">
</td>
</tr>
<tr>
<td>
<label for="estado">Estado:</label>
</td>
<td align="left">
<select name="estado">
<option value="ac">Acre</option>
<option value="al">Alagoas</option>
<option value="am">Amazonas</option>
<option value="ap">Amapá</option>
<option value="ba">Bahia</option>
<option value="ce">Ceará</option>
<option value="df">Distrito Federal</option>
<option value="es">Espírito Santo</option>
<option value="go">Goiás</option>
<option value="ma">Maranhão</option>
<option value="mt">Mato Grosso</option>
<option value="ms">Mato Grosso do Sul</option>
<option value="mg">Minas Gerais</option>
<option value="pa">Pará</option>
<option value="pb">Paraíba</option>
<option value="pr">Paraná</option>
<option value="pe">Pernambuco</option>
<option value="pi">Piauí</option>
<option value="rj">Rio de Janeiro</option>
<option value="rn">Rio Grande do Norte</option>
<option value="ro">Rondônia</option>
<option value="rs">Rio Grande do Sul</option>
<option value="rr">Roraima</option>
<option value="sc">Santa Catarina</option>
<option value="se">Sergipe</option>
<option value="sp">São Paulo</option>
<option value="to">Tocantins</option>
</select>
</td>
</tr>
<tr>
<td>
<label for="cidade">Cidade: </label>
</td>
<td align="left">
<input type="text" name="cidade">
</td>
</tr>
<tr>
<td>
<label for="cep">CEP: </label>
</td>
<td align="left">
<input type="text" name="cep" size="5" maxlength="5"> - <input type="text" name="cep2" size="3" maxlength="3">
</td>
</tr>
</table>
</fieldset>
<!--Dados de Pagamento-->
<fieldset>
<div class="input-group">
Dados de Pagamento :
Cartão <input type="text" class="from-input" placeholder=""><br><br>
Boleto <input type="text" class="from-input" placeholder=" "><br><br>
PIX <input type="text" class="from-input" placeholder=""><br><br>
<button class="btn btn-primary input-group-btn">Confirma</button>
</div>
</fieldset>
<!--Dados de Login-->
<fieldset>
<legend>Dados de login</legend>
<table cellspacing="10">
<tr>
<td>
<label for="email">E-mail: </label>
</td>
<td align="left">
<input type="text" name="email">
</td>
</tr>
<tr>
<td>
<label for="imagem">Imagem de perfil:</label>
</td>
<td>
<input type="file" name="imagem" >
</td>
</tr>
<tr>
<td>
<label for="login">Login de usuário: </label>
</td>
<td align="left">
<input type="text" name="login">
</td>
</tr>
<tr>
<td>
<label for="pass">Senha: </label>
</td>
<td align="left">
<input type="password" name="pass">
</td>
</tr>
<tr>
<td>
<label for="passconfirm">Confirme a senha: </label>
</td>
<td align="left">
<input type="password" name="passconfirm">
</td>
</tr>
</table>
<input type="submit">
<input type="reset" value="Limpar">
</fieldset>
</div>
</div>
</template> </template>
<script src = "https://unpkg.com/vue-router/dist/vue-router.js"></script>
<script src = "https://cdn.jsdelivr.net/npm/vue-resource@1.3.4"></script>
<script src = "https://unpkg.com/vue-router/dist/vue-router.js"></script>
<script> <script>
import AnimeList from "./componentes/AnimeList.vue";
import Plans from "./componentes/Plans.vue";
import Footer from "./componentes/Footer.vue";
export default { export default {
name: 'app', name: "app",
data () { components: {
AnimeList,
Plans,
Footer,
},
data() {
return { return {
msg: 'Welcome to Your Vue.js App', msg: "Welcome to Your Vue.js App",
} };
}, },
} };
</script> </script>
<style>
<style>
div.img { * {
margin: 5px; margin: 0;
border: 1px solid #ccc; padding: 0;
float: left; box-sizing: border-box;
width: 180px;
}
div.img:hover {
border: 1px solid #777;
} }
div.img img { .home {
width: 100%; width: 100%;
height: auto;
} }
div.desc { a {
padding: 15px;
text-align: center;
}
a{
display: block; display: block;
padding: 8px; padding: 8px;
background-color: #199782; color: white;
} text-decoration: none;
#menu li {
border-right: 1px solid #bbb;height:1px; /* IE5.0 bug */
padding: 3px 1px;
margin:0;
border: 1px solid #f00;
background: #999;
text-decoration: none;
} }
li:last-child { a:hover {
border-right: none; color: #e33058;
transition: ease-in-out 0.5s;
} }
.blocologo{ .blocologo {
text-align: center; height: 70%;
text-align: center;
}
.title {
padding: 25px 0;
} }
.img-blocologo{
size: 15px;
max-width: 25px;
margin-top: 50px;
text-align: center;
}
.menu{
height:1px; /* IE5.0 bug */
font-size: smaller; ul {
size: 50px;
text-align: center;
background: rgb(7, 148, 96);
}
ul {
list-style-type: none; list-style-type: none;
margin: 0; margin: 0;
padding: 0; padding: 0;
overflow: hidden overflow: hidden;
}
li{
float: left;
} }
.input-groupdadospessoai{
text-align: left;
}
.input-groupdadospessoai{
text-align: height;
}
blocologo{
size: 50px;
text-align: center;
}
.filmes{
text-align: left;
max-width: 50px;
border-block-color: blue;
li {
display: inline-block;
}
.filmes {
display: flex;
justify-content: center;
background-color: #1f283b;
} }
.menu{
background: rgb(12, 186, 220);
.planos {
margin-bottom: 35px;
} }
/*Menu - inicial */ /*Menu - inicial */
.Menu-Principal{ .Menu-Principal {
width: 100%; width: 100%;
background: #199782; background: #111;
float: left; color: white;
display: block;
font: medium;
color: hsl(154, 28%, 95%);
text-align: center;
padding: 14px 16px; padding: 14px 16px;
text-decoration: none; text-decoration: none;
font-size: 17px; font-size: 17px;
border-bottom: 2px solid transparent;
position: relative;
top: 0;
left: 0;
transform: none;
} }
</style> </style>
src/componentes/AnimeList.vue 0 → 100644
View file @ 82fc1cb5
<template>
<div class="container">
<div v-if="pending" class="loader"></div>
<div v-else-if="error" class="error" role="alert">
Erro ao tentar carregar a lista de animes
</div>
<div class="card grow" v-else v-for="anime in animes" :key="anime.name">
<div class="card-header">
<img :src="anime.image" :alt="anime.name" />
</div>
<div class="card-body">
<span class="tag tag-teal">Tag</span>
<h4 class="card-title">{{ anime.name }}</h4>
<p>
{{ anime.description }}
</p>
</div>
</div>
</div>
</template>
<script>
export default {
name: "AnimeList",
data() {
return {
animes: null,
pending: true,
error: false,
data: null,
};
},
mounted() {
this.getAnimesList();
},
methods: {
async getAnimesList() {
this.pending = true;
await fetch("https://www.mockachino.com/a5c0d330-8fb8-4a/animes")
.then((res) => res.json())
.then((data) => (this.animes = data.animes))
.catch(() => (this.error = true));
this.pending = false;
},
},
};
</script>
<style>
@import url("https://fonts.googleapis.com/css2?family=Roboto&display=swap");
* {
box-sizing: border-box;
}
body {
display: flex;
justify-content: center;
align-items: center;
margin: 0;
background-color: #f7f8fc;
font-family: "Roboto", sans-serif;
color: #10182f;
}
.grow {
transition: all 0.2s ease-in-out;
}
.grow:hover {
transform: scale(1.05);
}
.container {
margin-top: 40px;
margin-bottom: 40px;
display: flex;
max-width: 1040px;
justify-content: space-evenly;
flex-wrap: wrap;
}
.card {
margin: 20px;
background-color: #fff;
border-radius: 10px;
box-shadow: 0 2px 20px rgba(0, 0, 0, 0.2);
overflow: hidden;
width: 250px;
}
.card span {
margin-left: 0px;
}
.card-header img {
width: 100%;
height: 200px;
object-fit: cover;
}
.card-body {
display: flex;
flex-direction: column;
justify-content: center;
align-items: flex-start;
padding: 20px;
min-height: 250px;
}
.card-body p {
font-size: 13px;
margin: 0 0 40px;
}
.card-title {
margin: 10px 0;
}
.tag {
background: #cccccc;
border-radius: 50px;
font-size: 12px;
color: #fff;
padding: 2px 10px;
text-transform: uppercase;
cursor: pointer;
}
.tag-teal {
background-color: #47bcd4;
}
.loader {
border: 16px solid #f3f3f3; /* Light grey */
border-top: 16px solid #3498db; /* Blue */
border-radius: 50%;
width: 120px;
height: 120px;
animation: spin 2s linear infinite;
}
@keyframes spin {
0% {
transform: rotate(0deg);
}
100% {
transform: rotate(360deg);
}
}
.error {
border: 1px solid;
margin: 10px 0px;
padding: 15px 10px 15px 50px;
background-repeat: no-repeat;
background-position: 10px center;
color: #d8000c;
background-color: #ffbaba;
background-image: url("https://i.imgur.com/GnyDvKN.png");
}
</style>
src/componentes/Footer.vue 0 → 100644
View file @ 82fc1cb5
<template>
<footer class="footer-content">
<h3>
<a href="https://www.ntconsult.com.br" target="_blank"
>NTConsult &copy; 2022</a
>
</h3>
<!-- <ul class="socials">
<li>
<a href="#"><i class="fa fa-facebook"></i></a>
</li>
<li>
<a href="#"><i class="fa fa-twitter"></i></a>
</li>
<li>
<a href="#"><i class="fa fa-google-plus"></i></a>
</li>
<li>
<a href="#"><i class="fa fa-youtube"></i></a>
</li>
<li>
<a href="#"><i class="fa fa-linkedin-square"></i></a>
</li>
</ul> -->
</footer>
</template>
<script>
export default {
name: "footer",
data() {
return {};
},
};
</script>
<style>
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
body {
background: #fcfcfc;
font-family: sans-serif;
}
footer {
bottom: 0;
left: 0;
right: 0;
background: #111;
height: auto;
width: auto;
padding-top: 20px;
color: #fff;
}
.footer-content {
display: flex;
align-items: center;
justify-content: center;
flex-direction: column;
text-align: center;
padding-top: 25px;
padding-bottom: 25px;
}
.socials {
list-style: none;
display: flex;
align-items: center;
justify-content: center;
margin: 1rem 0 3rem 0;
}
.socials li {
margin: 0 10px;
}
.socials a {
text-decoration: none;
color: #fff;
border: 1.1px solid white;
padding: 5px;
border-radius: 50%;
}
.socials a i {
font-size: 1.1rem;
width: 20px;
transition: color 0.4s ease;
}
.socials a:hover i {
color: aqua;
}
h3 a {
color: white;
text-decoration: none;
background-color: transparent;
}
</style>
src/componentes/Plans.vue 0 → 100644
View file @ 82fc1cb5
<template>
<div class="plans-container">
<h2>Planos</h2>
<div class="price-row">
<div v-if="pending" class="loader"></div>
<div v-else-if="error" class="error" role="alert">
Erro ao tentar carregar a lista de planos
</div>
<div class="price-col" v-else v-for="plan in plans" :key="plan.name">
<p>{{ plan.name }}</p>
<h3>R$ {{ plan.price }}<span>/ mês</span></h3>
<ul v-for="reason in plan.reasons" :key="reason.name">
<li>{{ reason }}</li>
</ul>
<button>Selecionar</button>
</div>
</div>
</div>
</template>
<script>
export default {
name: "Plans",
data() {
return {
plans: null,
pending: true,
error: false,
data: null,
};
},
mounted() {
this.getAnimesList();
},
methods: {
async getAnimesList() {
this.pending = true;
await fetch("https://www.mockachino.com/a5c0d330-8fb8-4a/plans")
.then((res) => res.json())
.then((data) => (this.plans = data.plans))
.catch(() => (this.error = true));
this.pending = false;
},
},
};
</script>
<style>
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
.plans-container {
width: 100%;
height: auto;
}
.plans-container h2 {
padding: 35px 0;
text-align: center;
}
.price-row {
width: 90%;
max-width: 1100px;
margin: auto;
display: grid;
grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
grid-gap: 25px;
}
.price-col {
background: #1f283b;
padding: 10% 15%;
border-radius: 10px;
color: #fff;
text-align: center;
}
.price-col p {
font-size: 22px;
}
.price-col h3 {
font-size: 44px;
margin: 20px 0 40px;
font-weight: 500;
}
.price-col h3 span {
font-size: 16px;
}
.price-col ul {
/* text-align: left; */
display: flex;
flex-direction: column;
margin: 20px 0;
color: #ddd;
list-style: none;
}
.price-col ul li {
margin: 15px 0;
}
.price-col ul li::before {
content: "\2022";
color: #e33058;
font-weight: bold;
margin-right: 8px;
}
.price-col button {
width: 100%;
padding: 14px 0;
background: transparent;
color: #fff;
font-size: 15px;
border: 1px solid #e33058;
border-radius: 6px;
margin-top: 30px;
cursor: pointer;
transition: background 0.5s;
}
.price-col button:hover {
background: #e33058;
}
.loader {
border: 16px solid #f3f3f3; /* Light grey */
border-top: 16px solid #3498db; /* Blue */
border-radius: 50%;
width: 120px;
height: 120px;
animation: spin 2s linear infinite;
display: flex;
}
.error {
border: 1px solid;
margin: 10px 0px;
padding: 15px 10px 15px 50px;
background-repeat: no-repeat;
background-position: 10px center;
color: #d8000c;
background-color: #ffbaba;
background-image: url("https://i.imgur.com/GnyDvKN.png");
}
</style>
src/main.js
View file @ 82fc1cb5
import Vue from 'vue' import Vue from "vue";
import App from './App.vue' import App from "./App.vue";
Vue.component("component-a", {
Vue.component('component-a', { /* */}) /* */
Vue.component('component-b', { /* ... */ }) });
Vue.component('component-c', { /* ... */ }) Vue.component("component-b", {
/* ... */
new Vue({ el: '#app' }) });
Vue.component("component-c", {
/* ... */
});
new Vue({ el: "#app" });
new Vue({ new Vue({
el: '#app', el: "#app",
render: h => h(App) render: (h) => h(App),
}) });
new Vue({ new Vue({
el: '#app', el: "#app",
components: { components: {
'component-home': home, "component-home": home,
'component-b': cadastro "component-b": cadastro,
} },
}) });
var menu = vue.components ('menu-content', { var menu = vue.components("menu-content", {
template: '#menuContent', template: "#menuContent",
});
})
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment