feat: Iconos que no corresponden al campo

apprunn · Sep 4, 2024 · 7c89ee9 · 7c89ee9
1 parent e8699f2
commit 7c89ee9
Show file tree

Hide file tree

Showing 3 changed files with 81 additions and 79 deletions.
diff --git a/src/components/shared/company/container-company-data.vue b/src/components/shared/company/container-company-data.vue
@@ -1,16 +1,19 @@
 <template>
-  <div
-  	:class="[
-		'container-company-data',
-		'padding-container',
-		{ 'loading loading-company': indeterminate },
-	]"
-	:style="`background: ${indeterminate ? 'transparent' : globalColors.primary}`"
->
+	<div
+		:class="[
+			'container-company-data',
+			'padding-container',
+			{ 'loading loading-company': indeterminate },
+		]"
+		:style="
+			`background: ${indeterminate ? 'transparent' : globalColors.primary}`
+		"
+	>
 		<media-company-data
 			v-if="!indeterminate"
 			image="https://apprunn-acl.s3.amazonaws.com/icons/phone-icon.svg"
 			image-height="20"
+			item="call"
 			border-right="#ffffff"
 			family="medium"
 			:description="getCommerceData.phone"
@@ -19,6 +22,7 @@
 			v-if="!indeterminate"
 			image="https://apprunn-acl.s3.amazonaws.com/icons/location-icon.svg"
 			image-height="20"
+			item="location_on"
 			border-right="#ffffff"
 			family="medium"
 			:description="getCommerceData.address"
@@ -27,6 +31,7 @@
 			v-if="!indeterminate"
 			image="https://apprunn-acl.s3.amazonaws.com/icons/open-email-icon.svg"
 			image-height="20"
+			item="email"
 			family="medium"
 			:description="getCommerceData.email"
 		></media-company-data>
@@ -43,43 +48,38 @@ export default {
 		mediaCompanyData,
 	},
 	computed: {
-		...mapGetters([
-			'getCommerceData',
-			'indeterminate',
-		]),
+		...mapGetters(['getCommerceData', 'indeterminate']),
 	},
 };
 </script>
 
-
 <style lang="scss" scoped>
-	.padding-container {
-		border-radius: 5px;
-		padding: 9px 0;
+.padding-container {
+	border-radius: 5px;
+	padding: 9px 0;
 
-		@media (max-width: 860px) {
-			padding: 5px 0;
-		}
+	@media (max-width: 860px) {
+		padding: 5px 0;
 	}
+}
 
-	.container-company-data {
+.container-company-data {
+	align-items: center;
+	display: flex;
+	flex-direction: row;
+	flex-wrap: wrap;
+	// padding: 10px 15px;
+	height: 86px;
+	justify-content: space-around;
+	width: 901px;
 
-		align-items: center;
-		display: flex;
-		flex-direction: row;
-		flex-wrap: wrap;
-		// padding: 10px 15px;
-		height: 86px;
-		justify-content: space-around;
-		width: 901px;
-		
-		@media screen and (max-width: 860px) {
-			min-height: 52px;
-			width: 95%;
-		}
+	@media screen and (max-width: 860px) {
+		min-height: 52px;
+		width: 95%;
 	}
+}
 
-	.loading-company {
-		filter:brightness(0.9);
-	}
+.loading-company {
+	filter: brightness(0.9);
+}
 </style>
diff --git a/src/components/shared/company/media-company-data.vue b/src/components/shared/company/media-company-data.vue
@@ -1,7 +1,16 @@
 <template>
-	<div class="container-media-company"
-	:style="`border-right: ${borderRight ? `1px solid ${borderRight}` : null}; font-family: ${family ? `font(${family})` : null }`">
-		<img :src="image" :height="imageHeight" alt="" class="image-company">
+	<div
+		class="container-media-company"
+		:style="
+			`border-right: ${
+				borderRight ? `1px solid ${borderRight}` : null
+			}; font-family: ${family ? `font(${family})` : null}`
+		"
+	>
+		<!-- <img :src="image" :height="imageHeight" alt="" class="image-company" /> -->
+		<v-icon color="#ffffff">
+			{{ item }}
+		</v-icon>
 		<a href="#" v-if="categories">
 			<p class="text-company-data">
 				{{ description }}
@@ -17,6 +26,10 @@
 export default {
 	name: 'media-company-data',
 	props: {
+		item: {
+			type: String,
+			required: true,
+		},
 		image: String,
 		imageHeight: [String, Number],
 		description: [String, Number],
@@ -44,16 +57,16 @@ export default {
 	color: color(white);
 	margin: 0 0 0 9px;
 	// max-width: 290px;
-    overflow: hidden;
-    // text-overflow: ellipsis;
-    white-space: nowrap;
+	overflow: hidden;
+	// text-overflow: ellipsis;
+	white-space: nowrap;
 
 	@media (max-width: 860px) {
 		font-size: 12px;
 		// margin-left: 6px;
 		// max-width: 80px;
-    	// overflow: hidden;
-    	// text-overflow: initial;
+		// overflow: hidden;
+		// text-overflow: initial;
 	}
 }
 

diff --git a/src/components/shared/form/form-bulletin.vue b/src/components/shared/form/form-bulletin.vue
@@ -2,31 +2,22 @@
 	<div class="form-bulletin">
 		<div class="form-bulletin-description-company">
 			<div class="content-date-company">
-				<PhoneIcon/>
-				<p
-					:class="[
-						'item-date-company',
-						{ 'loading': indeterminate },
-					]"
-				>{{getCommerceData.phone}}</p>
+				<PhoneIcon />
+				<p :class="['item-date-company', { loading: indeterminate }]">
+					{{ getCommerceData.phone }}
+				</p>
 			</div>
 			<div class="content-date-company">
-				<EmailIcon/>
-				<p
-					:class="[
-						'item-date-direction email',
-						{ 'loading': indeterminate },
-					]"
-				>Correo: {{getCommerceData.email}}</p>
+				<EmailIcon />
+				<p :class="['item-date-direction email', { loading: indeterminate }]">
+					Correo: {{ getCommerceData.email }}
+				</p>
 			</div>
 			<div class="content-date-company">
-				<LocationIcon/>
-				<p
-					:class="[
-						'item-date-direction',
-						{ 'loading': indeterminate },
-					]"
-				>{{getCommerceData.address}}</p>
+				<LocationIcon />
+				<p :class="['item-date-direction', { loading: indeterminate }]">
+					{{ getCommerceData.address }}
+				</p>
 			</div>
 		</div>
 	</div>
@@ -46,10 +37,7 @@ export default {
 		PhoneIcon,
 	},
 	computed: {
-		...mapGetters([
-			'getCommerceData',
-			'indeterminate',
-		]),
+		...mapGetters(['getCommerceData', 'indeterminate']),
 	},
 };
 </script>
@@ -71,7 +59,7 @@ export default {
 .text-subscription {
 	color: color(dark);
 	font-family: font(demi);
-	font-size:  size(medium);
+	font-size: size(medium);
 	margin-bottom: 45px;
 	text-align: center;
 
@@ -82,19 +70,18 @@ export default {
 }
 
 .text-subscription::before {
-		border-top: 1px solid color(base);
-		content: '';
-		color: color(dark);
-		height: 3px;
-		left: 10px;
-		position: absolute;
-		top: 9px;
-		width: 110px;
+	border-top: 1px solid color(base);
+	content: '';
+	color: color(dark);
+	height: 3px;
+	left: 10px;
+	position: absolute;
+	top: 9px;
+	width: 110px;
 	@media (max-width: 850px) {
 		left: 15px;
 		width: 80px;
 	}
-
 }
 
 .text-subscription::after {
@@ -139,6 +126,7 @@ export default {
 
 	@media (max-width: 850px) {
 		font-size: size(xlarge);
+		margin: 0;
 		max-width: 151px;
 		padding-top: 17px;
 		white-space: break-spaces;
@@ -162,6 +150,7 @@ export default {
 	max-width: 170px;
 
 	@media (max-width: 850px) {
+		margin: 0px;
 		padding-top: 17px;
 		text-align: center;
 	}