Modify sections
This commit is contained in:
samaradel
@@ -1,5 +1,10 @@
|
||||
<template>
|
||||
<section class="pb-10 px-4 bg-cover text-center">
|
||||
<section
|
||||
class="pb-10 px-4 bg-cover text-center"
|
||||
:class="{
|
||||
pink: id == 'home',
|
||||
}"
|
||||
>
|
||||
<!-- why -->
|
||||
<div class="w-full max-w-2xl mx-auto py-12" v-if="id == 'why'">
|
||||
<h2
|
||||
@@ -112,15 +117,23 @@
|
||||
|
||||
<!-- home -->
|
||||
|
||||
<div class="w-full max-w-7xl mx-auto mt-10 px-16" v-else-if="id == 'home'">
|
||||
<div class="w-full mx-auto mt-10 py-16" v-else-if="id == 'home'">
|
||||
<h2
|
||||
v-if="cta.title"
|
||||
class="text-3xl mb-2 uppercase leading-tight font-semibold font-heading"
|
||||
class="text-3xl uppercase leading-tight font-semibold font-heading"
|
||||
>
|
||||
{{ cta.title }}
|
||||
</h2>
|
||||
<div v-html="cta.content" class="mt-6 mb-8 text-gray-800"></div>
|
||||
<div class="mt-8 tracking-wide leading-loose" v-if="cta.video_button">
|
||||
|
||||
<h2
|
||||
v-if="cta.subtitle"
|
||||
class="text-3xl uppercase leading-tight font-semibold font-heading"
|
||||
>
|
||||
{{ cta.subtitle }}
|
||||
</h2>
|
||||
|
||||
<g-image :src="cta.image.src" />
|
||||
<!-- <div class="mt-8 tracking-wide leading-loose" v-if="cta.video_button">
|
||||
<a
|
||||
@click="toggleModal"
|
||||
class="
|
||||
@@ -140,173 +153,246 @@
|
||||
"
|
||||
>{{ cta.video_button }}</a
|
||||
>
|
||||
</div>
|
||||
<a
|
||||
class="
|
||||
inline-block
|
||||
bg-white
|
||||
text-sm
|
||||
learn-button
|
||||
hover:bg-gray-400
|
||||
bo
|
||||
px-12
|
||||
py-1
|
||||
mr-5
|
||||
mb-4
|
||||
border-2
|
||||
shadow
|
||||
border-black
|
||||
"
|
||||
target="_blank"
|
||||
v-if="cta.button && cta.link.includes('http')"
|
||||
:href="cta.link"
|
||||
>{{ cta.button }}</a
|
||||
>
|
||||
<a
|
||||
class="
|
||||
inline-block
|
||||
bg-white
|
||||
text-sm
|
||||
learn-button
|
||||
hover:bg-gray-400
|
||||
bo
|
||||
px-12
|
||||
py-1
|
||||
mr-5
|
||||
mb-4
|
||||
border-2
|
||||
shadow
|
||||
border-black
|
||||
"
|
||||
v-else
|
||||
:href="cta.link"
|
||||
>{{ cta.button }}</a
|
||||
>
|
||||
<a
|
||||
class="
|
||||
inline-block
|
||||
bg-white
|
||||
text-sm
|
||||
learn-button
|
||||
hover:bg-gray-400
|
||||
bo
|
||||
px-12
|
||||
py-1
|
||||
mr-5
|
||||
mb-4
|
||||
border-2
|
||||
shadow
|
||||
border-black
|
||||
"
|
||||
target="_blank"
|
||||
v-if="cta.button2 && cta.link2.includes('http')"
|
||||
:href="cta.link2"
|
||||
>{{ cta.button2 }}</a
|
||||
>
|
||||
<a
|
||||
class="
|
||||
inline-block
|
||||
bg-white
|
||||
text-sm
|
||||
learn-button
|
||||
hover:bg-gray-400
|
||||
bo
|
||||
px-12
|
||||
py-1
|
||||
mr-5
|
||||
mb-4
|
||||
border-2
|
||||
shadow
|
||||
border-black
|
||||
"
|
||||
v-else
|
||||
:href="cta.link2"
|
||||
>{{ cta.button2 }}</a
|
||||
>
|
||||
<a
|
||||
class="
|
||||
inline-block
|
||||
bg-white
|
||||
text-sm
|
||||
learn-button
|
||||
hover:bg-gray-400
|
||||
bo
|
||||
px-12
|
||||
py-1
|
||||
mr-5
|
||||
mb-4
|
||||
border-2
|
||||
shadow
|
||||
border-black
|
||||
"
|
||||
target="_blank"
|
||||
v-if="cta.button3 && cta.link3.includes('http')"
|
||||
:href="cta.link3"
|
||||
>{{ cta.button3 }}</a
|
||||
>
|
||||
<a
|
||||
class="
|
||||
inline-block
|
||||
bg-white
|
||||
text-sm
|
||||
learn-button
|
||||
hover:bg-gray-400
|
||||
bo
|
||||
px-12
|
||||
py-1
|
||||
mr-5
|
||||
mb-4
|
||||
border-2
|
||||
shadow
|
||||
border-black
|
||||
"
|
||||
v-else
|
||||
:href="cta.link3"
|
||||
>{{ cta.button3 }}</a
|
||||
>
|
||||
<a
|
||||
class="
|
||||
inline-block
|
||||
bg-white
|
||||
text-sm
|
||||
learn-button
|
||||
hover:bg-gray-400
|
||||
bo
|
||||
px-12
|
||||
py-1
|
||||
mr-5
|
||||
mb-4
|
||||
border-2
|
||||
shadow
|
||||
border-black
|
||||
"
|
||||
target="_blank"
|
||||
v-if="cta.button4 && cta.link4.includes('http')"
|
||||
:href="cta.link4"
|
||||
>{{ cta.button4 }}</a
|
||||
>
|
||||
<a
|
||||
class="
|
||||
inline-block
|
||||
bg-white
|
||||
text-sm
|
||||
learn-button
|
||||
hover:bg-gray-400
|
||||
bo
|
||||
px-12
|
||||
py-1
|
||||
mr-5
|
||||
mb-4
|
||||
border-2
|
||||
shadow
|
||||
border-black
|
||||
"
|
||||
v-else
|
||||
:href="cta.link4"
|
||||
>{{ cta.button4 }}</a
|
||||
>
|
||||
</div>
|
||||
</div> -->
|
||||
<div class="max-w-7xl mx-auto grid grid-cols-3 gap-4">
|
||||
<a
|
||||
class="
|
||||
inline-block
|
||||
bg-white
|
||||
text-sm
|
||||
learn-button
|
||||
hover:bg-gray-400
|
||||
bo
|
||||
px-12
|
||||
py-1
|
||||
mr-5
|
||||
border-2
|
||||
shadow
|
||||
border-black
|
||||
"
|
||||
target="_blank"
|
||||
v-if="cta.button && cta.link.includes('http')"
|
||||
:href="cta.link"
|
||||
>{{ cta.button }}</a
|
||||
>
|
||||
<a
|
||||
class="
|
||||
inline-block
|
||||
bg-white
|
||||
text-sm
|
||||
learn-button
|
||||
hover:bg-gray-400
|
||||
bo
|
||||
px-12
|
||||
py-1
|
||||
mr-5
|
||||
border-2
|
||||
shadow
|
||||
border-black
|
||||
"
|
||||
v-else
|
||||
:href="cta.link"
|
||||
>{{ cta.button }}</a
|
||||
>
|
||||
<a
|
||||
class="
|
||||
inline-block
|
||||
bg-white
|
||||
text-sm
|
||||
learn-button
|
||||
hover:bg-gray-400
|
||||
bo
|
||||
px-12
|
||||
py-1
|
||||
mr-5
|
||||
border-2
|
||||
shadow
|
||||
border-black
|
||||
"
|
||||
target="_blank"
|
||||
v-if="cta.button2 && cta.link2.includes('http')"
|
||||
:href="cta.link2"
|
||||
>{{ cta.button2 }}</a
|
||||
>
|
||||
<a
|
||||
class="
|
||||
inline-block
|
||||
bg-white
|
||||
text-sm
|
||||
learn-button
|
||||
hover:bg-gray-400
|
||||
bo
|
||||
px-12
|
||||
py-1
|
||||
mr-5
|
||||
border-2
|
||||
shadow
|
||||
border-black
|
||||
"
|
||||
v-else
|
||||
:href="cta.link2"
|
||||
>{{ cta.button2 }}</a
|
||||
>
|
||||
<a
|
||||
class="
|
||||
inline-block
|
||||
bg-white
|
||||
text-sm
|
||||
learn-button
|
||||
hover:bg-gray-400
|
||||
bo
|
||||
px-12
|
||||
py-1
|
||||
mr-5
|
||||
border-2
|
||||
shadow
|
||||
border-black
|
||||
"
|
||||
target="_blank"
|
||||
v-if="cta.button3 && cta.link3.includes('http')"
|
||||
:href="cta.link3"
|
||||
>{{ cta.button3 }}</a
|
||||
>
|
||||
<a
|
||||
class="
|
||||
inline-block
|
||||
bg-white
|
||||
text-sm
|
||||
learn-button
|
||||
hover:bg-gray-400
|
||||
bo
|
||||
px-12
|
||||
py-1
|
||||
mr-5
|
||||
border-2
|
||||
shadow
|
||||
border-black
|
||||
"
|
||||
v-else
|
||||
:href="cta.link3"
|
||||
>{{ cta.button3 }}</a
|
||||
>
|
||||
<a
|
||||
class="
|
||||
inline-block
|
||||
bg-white
|
||||
text-sm
|
||||
learn-button
|
||||
hover:bg-gray-400
|
||||
bo
|
||||
px-12
|
||||
py-1
|
||||
mr-5
|
||||
border-2
|
||||
shadow
|
||||
border-black
|
||||
"
|
||||
target="_blank"
|
||||
v-if="cta.button4 && cta.link4.includes('http')"
|
||||
:href="cta.link4"
|
||||
>{{ cta.button4 }}</a
|
||||
>
|
||||
<a
|
||||
class="
|
||||
inline-block
|
||||
bg-white
|
||||
text-sm
|
||||
learn-button
|
||||
hover:bg-gray-400
|
||||
bo
|
||||
px-12
|
||||
py-1
|
||||
mr-5
|
||||
border-2
|
||||
shadow
|
||||
border-black
|
||||
"
|
||||
v-else
|
||||
:href="cta.link4"
|
||||
>{{ cta.button4 }}</a
|
||||
>
|
||||
|
||||
<a
|
||||
class="
|
||||
inline-block
|
||||
bg-white
|
||||
text-sm
|
||||
learn-button
|
||||
hover:bg-gray-400
|
||||
bo
|
||||
px-12
|
||||
py-1
|
||||
mr-5
|
||||
border-2
|
||||
shadow
|
||||
border-black
|
||||
"
|
||||
target="_blank"
|
||||
v-if="cta.button5 && cta.link5.includes('http')"
|
||||
:href="cta.link5"
|
||||
>{{ cta.button5 }}</a
|
||||
>
|
||||
<a
|
||||
class="
|
||||
inline-block
|
||||
bg-white
|
||||
text-sm
|
||||
learn-button
|
||||
hover:bg-gray-400
|
||||
bo
|
||||
px-12
|
||||
py-1
|
||||
mr-5
|
||||
border-2
|
||||
shadow
|
||||
border-black
|
||||
"
|
||||
v-else
|
||||
:href="cta.link5"
|
||||
>{{ cta.button5 }}</a
|
||||
>
|
||||
|
||||
<a
|
||||
class="
|
||||
inline-block
|
||||
bg-white
|
||||
text-sm
|
||||
learn-button
|
||||
hover:bg-gray-400
|
||||
bo
|
||||
px-12
|
||||
py-1
|
||||
mr-5
|
||||
border-2
|
||||
shadow
|
||||
border-black
|
||||
"
|
||||
target="_blank"
|
||||
v-if="cta.button6 && cta.link6.includes('http')"
|
||||
:href="cta.link4"
|
||||
>{{ cta.button6 }}</a
|
||||
>
|
||||
<a
|
||||
class="
|
||||
inline-block
|
||||
bg-white
|
||||
text-sm
|
||||
learn-button
|
||||
hover:bg-gray-400
|
||||
bo
|
||||
px-12
|
||||
py-1
|
||||
mr-5
|
||||
border-2
|
||||
shadow
|
||||
border-black
|
||||
"
|
||||
v-else
|
||||
:href="cta.link6"
|
||||
>{{ cta.button6 }}</a
|
||||
>
|
||||
</div>
|
||||
</div>
|
||||
<!-- tft -->
|
||||
<div
|
||||
class="w-full lg:max-w-4xl mx-auto lg:mt-20 lg:px-16 lg:py-10 tft_section"
|
||||
@@ -563,3 +649,8 @@ export default {
|
||||
},
|
||||
};
|
||||
</script>
|
||||
<style scoped>
|
||||
.pink {
|
||||
background-color: #ea1ff7;
|
||||
}
|
||||
</style>
|
||||
@@ -156,6 +156,163 @@
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<section class="py-12 px-4 text-center" v-else-if="id == 'oldhome'">
|
||||
<h2 class="text-4xl leading-tight mb-6 font-bold font-heading uppercase">
|
||||
{{ main.title }}
|
||||
</h2>
|
||||
<div
|
||||
v-if="main.content"
|
||||
class="mb-6 text-gray-700"
|
||||
v-html="main.content"
|
||||
></div>
|
||||
<div class="flex flex-wrap items-center -mx-4 mb-6">
|
||||
<div
|
||||
v-for="(feature, index) in features"
|
||||
:key="index"
|
||||
class="lg:w-1/3 mt-5 lg:mt-0 feature px-4 text-center"
|
||||
>
|
||||
<div v-if="index == 1">
|
||||
<div class="w-1/2 lg:w-full lg:h-full mx-auto px-2 order-1">
|
||||
<g-image :src="feature.svg" :alt="feature.title" />
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div v-else>
|
||||
<span v-if="index !== 4" class="img-border"></span>
|
||||
<h5 class="capitalize">
|
||||
{{ feature.title }}
|
||||
</h5>
|
||||
<div v-html="feature.content" class="text-gray-700"></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="mx-auto mt-20" v-if="main.btn">
|
||||
<a
|
||||
v-if="main.link.includes('http')"
|
||||
class="
|
||||
inline-block
|
||||
bg-blue-900
|
||||
text-sm
|
||||
learn-button
|
||||
hover:bg-blue-800
|
||||
text-gray-100
|
||||
px-12
|
||||
py-2
|
||||
mr-5
|
||||
mb-4
|
||||
shadow
|
||||
rounded-full
|
||||
"
|
||||
:href="main.link"
|
||||
target="_blank"
|
||||
>{{ main.btn }}
|
||||
</a>
|
||||
|
||||
<a
|
||||
v-else
|
||||
class="
|
||||
inline-block
|
||||
bg-blue-900
|
||||
text-sm
|
||||
learn-button
|
||||
hover:bg-blue-800
|
||||
text-gray-100
|
||||
px-12
|
||||
py-2
|
||||
mr-5
|
||||
mb-4
|
||||
shadow
|
||||
rounded-full
|
||||
"
|
||||
:href="main.link"
|
||||
>{{ main.btn }}
|
||||
</a>
|
||||
|
||||
<a
|
||||
v-if="main.link2.includes('http')"
|
||||
class="
|
||||
inline-block
|
||||
bg-blue-900
|
||||
text-sm
|
||||
learn-button
|
||||
hover:bg-blue-800
|
||||
text-gray-100
|
||||
px-12
|
||||
py-2
|
||||
mr-5
|
||||
mb-4
|
||||
shadow
|
||||
rounded-full
|
||||
"
|
||||
:href="main.link2"
|
||||
target="_blank"
|
||||
>{{ main.btn2 }}
|
||||
</a>
|
||||
|
||||
<a
|
||||
v-else
|
||||
class="
|
||||
inline-block
|
||||
bg-blue-900
|
||||
text-sm
|
||||
learn-button
|
||||
hover:bg-blue-800
|
||||
text-gray-100
|
||||
px-12
|
||||
py-2
|
||||
mr-5
|
||||
mb-4
|
||||
shadow
|
||||
rounded-full
|
||||
"
|
||||
:href="main.link2"
|
||||
>{{ main.btn2 }}
|
||||
</a>
|
||||
|
||||
<a
|
||||
v-if="main.link3.includes('http')"
|
||||
class="
|
||||
inline-block
|
||||
bg-blue-900
|
||||
text-sm
|
||||
learn-button
|
||||
hover:bg-blue-800
|
||||
text-gray-100
|
||||
px-12
|
||||
py-2
|
||||
mr-5
|
||||
mb-4
|
||||
shadow
|
||||
rounded-full
|
||||
"
|
||||
:href="main.link3"
|
||||
target="_blank"
|
||||
>{{ main.btn3 }}
|
||||
</a>
|
||||
|
||||
<a
|
||||
v-else
|
||||
class="
|
||||
inline-block
|
||||
bg-blue-900
|
||||
text-sm
|
||||
learn-button
|
||||
hover:bg-blue-800
|
||||
text-gray-100
|
||||
px-12
|
||||
py-2
|
||||
mr-5
|
||||
mb-4
|
||||
shadow
|
||||
rounded-full
|
||||
"
|
||||
:href="main.link3"
|
||||
>{{ main.btn3 }}
|
||||
</a>
|
||||
<!-- <div v-html="main.content" class="text-sm text-gray-400 mt-5"></div> -->
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<section class="py-12 px-4" v-else>
|
||||
<h2 class="text-4xl text-center mb-12 font-normal font-heading">
|
||||
{{ main.title }}
|
||||
|
||||
@@ -50,12 +50,12 @@
|
||||
{{ blog.title }}
|
||||
</h3>
|
||||
<div
|
||||
v-html="blog.excerpt"
|
||||
class="mt-3 text-base leading-6 text-gray-500"
|
||||
v-html="blog.content"
|
||||
class="mt-3 text-base leading-6 text-center text-gray-800"
|
||||
></div>
|
||||
</a>
|
||||
</div>
|
||||
<div class="mt-6 flex items-center">
|
||||
<div class="mt-6 flex items-center" v-if="blog.authorImg">
|
||||
<div class="flex-shrink-0">
|
||||
<a :href="blog.autherUrl">
|
||||
<img
|
||||
@@ -65,7 +65,7 @@
|
||||
/>
|
||||
</a>
|
||||
</div>
|
||||
<div class="ml-3">
|
||||
<div class="ml-3" v-if="blog.author">
|
||||
<p class="text-sm leading-5 font-medium text-gray-900">
|
||||
<a :href="blog.autherUrl" class="hover:underline">
|
||||
{{ blog.author }}
|
||||
|
||||
@@ -204,6 +204,49 @@
|
||||
"
|
||||
>{{ brand.btnTxt }}</a
|
||||
>
|
||||
|
||||
<a
|
||||
v-if="brand.button2 && brand.link2.includes('http')"
|
||||
target="_blank"
|
||||
:href="brand.link2"
|
||||
class="
|
||||
inline-block
|
||||
bg-white
|
||||
text-sm
|
||||
learn-button
|
||||
hover:bg-gray-400
|
||||
bo
|
||||
px-12
|
||||
py-1
|
||||
mr-5
|
||||
mb-4
|
||||
border-2
|
||||
shadow
|
||||
border-black
|
||||
"
|
||||
>{{ brand.button2 }}</a
|
||||
>
|
||||
|
||||
<a
|
||||
v-else
|
||||
:href="brand.link2"
|
||||
class="
|
||||
inline-block
|
||||
bg-white
|
||||
text-sm
|
||||
learn-button
|
||||
hover:bg-gray-400
|
||||
bo
|
||||
px-12
|
||||
py-1
|
||||
mr-5
|
||||
mb-4
|
||||
border-2
|
||||
shadow
|
||||
border-black
|
||||
"
|
||||
>{{ brand.button2 }}</a
|
||||
>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@@ -1,6 +1,6 @@
|
||||
<template>
|
||||
<section
|
||||
class="px-2 h-auto object-fi"
|
||||
class="px-2 h-auto bg-center bg-contain"
|
||||
:style="{ 'background-image': 'url(' + img(section.image) + ')' }"
|
||||
>
|
||||
<div class="flex flex-wrap p-12 text-center -mx-auto t">
|
||||
@@ -26,28 +26,69 @@
|
||||
{{ section.subtitle }}
|
||||
</h2>
|
||||
|
||||
<div class="rounded-lg py-10 mt-10 lg:mt-0">
|
||||
<div class="max-w-screen-xl mx-auto px-4 sm:px-6 lg:px-8">
|
||||
<dl class="">
|
||||
<div
|
||||
v-for="(item, index) in stats"
|
||||
:key="index"
|
||||
class="flex flex-col p-6 text-center"
|
||||
>
|
||||
<div v-for="(value, key) in item" :key="key">
|
||||
<dd
|
||||
class="leading-none font-bold green-color"
|
||||
:class="{ green: index % 2 !== 0 }"
|
||||
aria-describedby="item-1"
|
||||
>
|
||||
{{ value }}
|
||||
</dd>
|
||||
<dt class="mt-2 leading-6 text-black uppercase" id="item-1">
|
||||
{{ key }}
|
||||
</dt>
|
||||
</div>
|
||||
<div class="my-10 grid grid-cols-3 gap-4">
|
||||
<div class="..."></div>
|
||||
<div class="...">
|
||||
<!-- capacity -->
|
||||
<div class="leading-none font-extrabold text-6xl">
|
||||
{{
|
||||
stats[0].capacity
|
||||
.toString()
|
||||
.replace(/\B(?=(\d{2})+(?!\d))/g, ",")
|
||||
}}
|
||||
PB
|
||||
<span class="block text-3xl uppercase">capacity</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="..."></div>
|
||||
<div class="...">
|
||||
<!-- Nodes -->
|
||||
<div
|
||||
class="
|
||||
rounded-full
|
||||
h-60
|
||||
w-60
|
||||
inline-flex
|
||||
items-center
|
||||
justify-center
|
||||
bg-green
|
||||
"
|
||||
>
|
||||
<div class="leading-none font-extrabold text-6xl">
|
||||
{{ stats[1].nodes }}
|
||||
<span class="block text-2xl uppercase">nodes</span>
|
||||
</div>
|
||||
</dl>
|
||||
</div>
|
||||
</div>
|
||||
<div class="..."></div>
|
||||
<div class="...">
|
||||
<div
|
||||
class="
|
||||
rounded-full
|
||||
h-60
|
||||
w-60
|
||||
inline-flex
|
||||
items-center
|
||||
justify-center
|
||||
bg-pink
|
||||
"
|
||||
>
|
||||
<div class="leading-none font-extrabold text-6xl">
|
||||
{{ stats[3].countries }}
|
||||
<span class="block text-2xl uppercase">countries</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="..."></div>
|
||||
<div class="...">
|
||||
<!-- capacity -->
|
||||
<div class="leading-none font-extrabold text-6xl">
|
||||
{{
|
||||
stats[2].cores.toString().replace(/\B(?=(\d{3})+(?!\d))/g, ",")
|
||||
}}
|
||||
<span class="block text-5xl uppercase">cores</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
@@ -74,26 +115,25 @@ export default {
|
||||
},
|
||||
async mounted() {
|
||||
try {
|
||||
const getFarms = await axios.get(
|
||||
"https://explorer.threefold.io/api/farms?network=all"
|
||||
);
|
||||
// const getFarms = await axios.get(
|
||||
// "https://explorer.threefold.io/api/farms?network=all"
|
||||
// );
|
||||
const results = await axios.get(
|
||||
"https://explorer.threefold.io/api/stats"
|
||||
);
|
||||
console.log(results.data);
|
||||
let farms = getFarms.data.length;
|
||||
// let farms = getFarms.data.length;
|
||||
let nodes = results.data.onlinenodes;
|
||||
let hru = (results.data.hru / 1000).toFixed(); // To TB
|
||||
let sru = results.data.sru.toFixed();
|
||||
let capacity = hru + sru;
|
||||
let hru = (results.data.hru / 10000).toFixed(); // To TB
|
||||
let sru = (results.data.sru / 10000).toFixed();
|
||||
let capacity = ((hru + sru) / 1000).toFixed();
|
||||
let cru = results.data.cru.toFixed();
|
||||
let countries = results.data.countries;
|
||||
this.stats.push(
|
||||
{ farms: farms },
|
||||
{ Nodes: nodes },
|
||||
{ "Storage TB": capacity },
|
||||
{ "Compute Cores": cru },
|
||||
{ Countries: countries }
|
||||
// { farms: farms },
|
||||
{ capacity: capacity },
|
||||
{ nodes: nodes },
|
||||
{ cores: cru },
|
||||
{ countries: countries }
|
||||
);
|
||||
} catch (error) {
|
||||
console.log(error);
|
||||
@@ -103,28 +143,18 @@ export default {
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.blue {
|
||||
background-color: #313f92;
|
||||
}
|
||||
|
||||
.light-blue {
|
||||
background-color: #48489f;
|
||||
}
|
||||
|
||||
dd {
|
||||
height: 100px;
|
||||
width: 100px;
|
||||
display: inline-block;
|
||||
margin: auto;
|
||||
border-radius: 50%;
|
||||
line-height: 100px;
|
||||
border: 3px solid #847fc2;
|
||||
background-color: #313f92;
|
||||
color: #dacef5;
|
||||
font-size: 1.5rem;
|
||||
}
|
||||
|
||||
.green {
|
||||
background-color: #92f5d9;
|
||||
color: #313f92;
|
||||
.bg-green {
|
||||
background-color: #70dfc9;
|
||||
}
|
||||
|
||||
.bg-pink {
|
||||
background-color: #ea1ff7;
|
||||
}
|
||||
</style>
|
||||
@@ -14,31 +14,49 @@
|
||||
|
||||
<div class="grid grid-cols-1 gap-4 sm:grid-cols-3">
|
||||
<a
|
||||
v-for="(product, idx) in products"
|
||||
v-for="(product, idx) in products"
|
||||
target="_blank"
|
||||
:key="idx"
|
||||
:href="product.url"
|
||||
class="m-auto rounded overflow-hidden transition duration-500"
|
||||
>
|
||||
<div class="part text-center pb-8 my-5"
|
||||
:class="{ active: idx !== 1 }"
|
||||
>
|
||||
<div class="part text-center pb-8 my-5" :class="{ active: idx !== 1 }">
|
||||
<g-image :src="img(product.image)" />
|
||||
<h3 class="font-bold text-2xl">{{ product.title }}</h3>
|
||||
<div v-html="product.content" class="pb-4 px-5 "></div>
|
||||
<div v-html="product.content" class="pb-4 px-5"></div>
|
||||
|
||||
<div v-if="product.button">
|
||||
<a
|
||||
v-if="product.url.includes('http')"
|
||||
target="_blank"
|
||||
:href="product.url"
|
||||
class="bg-white text-sm learn-button hover:bg-gray-400 px-12 py-2 mb-5 shadows border-black border-2"
|
||||
class="
|
||||
bg-white
|
||||
text-sm
|
||||
learn-button
|
||||
hover:bg-gray-400
|
||||
px-12
|
||||
py-2
|
||||
mb-5
|
||||
shadows
|
||||
border-black border-2
|
||||
"
|
||||
>{{ product.button }}</a
|
||||
>
|
||||
<a
|
||||
v-else
|
||||
:href="product.url"
|
||||
class="bg-white text-sm learn-button hover:bg-gray-400 px-12 py-2 mb-5 shadows border-black border-2"
|
||||
class="
|
||||
bg-white
|
||||
text-sm
|
||||
learn-button
|
||||
hover:bg-gray-400
|
||||
px-12
|
||||
py-2
|
||||
mb-5
|
||||
shadows
|
||||
border-black border-2
|
||||
"
|
||||
>{{ product.button }}</a
|
||||
>
|
||||
</div>
|
||||
@@ -73,14 +91,10 @@ export default {
|
||||
|
||||
.part {
|
||||
max-height: 570px;
|
||||
background-color: #ea1ff7;
|
||||
|
||||
|
||||
background-color: #70dfc9;
|
||||
}
|
||||
|
||||
.active {
|
||||
|
||||
background-color: #70dfc9;
|
||||
|
||||
background-color: #ea1ff7;
|
||||
}
|
||||
</style>
|
||||
|
||||
Reference in New Issue
Block a user