uniapp联系我们页的设计和实现

news2024/12/27 8:36:17

联系我们页

image-20240504203323805

代码

map文档:map | uni-app官网 (dcloud.net.cn)

<template>
	<view class="contact">
		<image class="img" src="http://www.itcast.cn/2018czydz/images/gywmban.jpg"></image>
		<view class="info">
			<view @click="phone">联系电话:400-618-9090 ( 点击拨打 )</view>
			<view>校区地址:浙江省杭州市下沙经济开发区4号大街187号盛泰时代山</view>
		</view>
		<map class="map" :longitude="longitude" :scale="scale" :latitude="latitude" :markers="markers"></map> 
        <!-- 地图控件
			longitude :中心经度
			latitude:中心纬度
			scale:缩放级别,取值范围为3-20
	 -->
	</view>
</template>

<script>
	export default {
		data() {
			return {
				longitude: 120.363172,//中心经度
				latitude: 30.312212,//中心维度
				scale: 13,//缩放级别
				markers: [{// 标记点
					longitude: 120.363172, //标记经度
					latitude: 30.312212,//标记维度
					iconPath: '../../static/hmlogo.png',//标记图标
					width: 30,//图标宽度
					height: 30//图标高度
				}]
			}
		},
		methods: {
			phone() {
				uni.makePhoneCall({//拨打电话内置方法
					phoneNumber: '400-618-9090'
				})
			}
		}
	}
</script>
<style lang="scss">
	.contact {
		.img {
			width: 750rpx;
			height: 320rpx;
		}
		.info {
			padding: 10rpx 20rpx;
			font-size: 30rpx;
			view {
				line-height: 80rpx;
				border-bottom: 1px solid #eee;
			}
		}
		.map {
			width: 750rpx;
			height: 750rpx;
		}
	}
</style>

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.coloradmin.cn/o/2251217.html

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈,一经查实,立即删除!

相关文章

算法竞赛进阶指南——位运算

算法竞赛进阶指南——位运算 与或非异或and&#xff0c;&or&#xff0c;|not&#xff0c;~xor&#xff0c;^ 在m位二进制数中&#xff0c;通常称最低位为第0位&#xff0c;从右到左以此类推&#xff0c;最高位是第m-1位 补码&#xff1a; unsigned int&#xff1a; 直接把…

【科研】9如何高效阅读和理解学术论文

【科研】9如何高效阅读和理解学术论文 写在最前面一、为什么需要系统的阅读方法&#xff1f;二、阅读论文的11步方法三、实践示例四、常见问题解答五、结语 &#x1f308;你好呀&#xff01;我是 是Yu欸 &#x1f30c; 2024每日百字篆刻时光&#xff0c;感谢你的陪伴与支持 ~ …

Java 泛型详细解析

泛型的定义 泛型类的定义 下面定义了一个泛型类 Pair&#xff0c;它有一个泛型参数 T。 public class Pair<T> {private T start;private T end; }实际使用的时候就可以给这个 T 指定任何实际的类型&#xff0c;比如下面所示&#xff0c;就指定了实际类型为 LocalDate…

Design Linear Filters in the Frequency Domain (MATLAB帮助文档)

Design Linear Filters in the Frequency Domain 这个帮助文档写得很好&#xff0c;简单明了&#xff0c;一句废话没有。 This topic describes functions that perform filtering in the frequency domain. 2-D Finite Impulse Response (FIR) Filters The Image Processi…

手机实时提取SIM卡打电话的信令声音-蓝牙电话如何适配eSIM卡的手机

手机实时提取SIM卡打电话的信令声音 --蓝牙电话如何适配eSIM卡的手机 一、前言 蓝牙电话的海外战略中&#xff0c;由于海外智能手机市场中政策的差异性&#xff0c;对内置eSIM卡的手机进行支持是非常合理的需求。Android系列手机中&#xff0c;无论是更换通信运营商&#xf…

软通动力携子公司鸿湖万联、软通教育助阵首届鸿蒙生态大会成功举办

11月23日中国深圳&#xff0c;首届鸿蒙生态大会上&#xff0c;软通动力及软通动力子公司鸿湖万联作为全球智慧物联网联盟&#xff08;GIIC&#xff09;理事单位、鸿蒙生态服务&#xff08;深圳&#xff09;有限公司战略合作伙伴&#xff0c;联合软通教育深度参与了大会多项重磅…

【论文笔记】Frequency Domain Model Augmentation for Adversarial Attack

Abstract 对于黑盒攻击&#xff0c;替代模型与受害模型之间的差距通常较大&#xff0c;表现为较弱的攻击性能。基于对抗样本的可迁移性可以通过同时攻击不同模型来提高的观察&#xff0c;提出了利用变换图像模拟不同模型的模型增强方法。 然而&#xff0c;现有的空间域变换并没…

【人工智能-科普】深度森林:传统机器学习与深度学习的创新结合

文章目录 深度森林:传统机器学习与深度学习的创新结合一、什么是深度森林?二、深度森林的工作原理1. **特征提取和转换**2. **多层级训练**3. **最终分类**三、深度森林的关键组成部分1. **森林层(Forest Layer)**2. **级联结构(Cascade Structure)**3. **特征增强(Feat…

嵌入式硬件实战提升篇(三)商用量产电源设计方案 三路电源输入设计 电源管理 多输入供电自动管理 DCDC降压

引言&#xff1a;本文你能实际的了解到实战量产产品中电源架构设计的要求和过程&#xff0c;并且从实际实践出发搞懂电源架构系统&#xff0c;你也可以模仿此架构抄板到你自己的项目&#xff0c;并结合硬件篇之前的项目以及理论形成正真的三路电源输入设计与开发板电源架构块供…

网络——HTTP与HTTPS三次握手和四次挥手

HTTP协议本身并不直接处理TCP连接的建立和关闭&#xff0c;这些是由底层的TCP协议来完成的。但是&#xff0c;由于HTTP通常运行在TCP之上&#xff0c;因此理解TCP的三次握手&#xff08;用于建立连接&#xff09;和四次挥手&#xff08;用于关闭连接&#xff09;对于理解HTTP通…

了解Linux —— 理解其中的权限

前言 在了解Linux权限之前&#xff0c;先来探讨我们使用的shell 命令它到底是什么&#xff1f; Linux 是一个操作系统&#xff0c;我们称其为内核(kernel) &#xff0c;正常情况下&#xff0c;我们一般用户操作并不是去直接使用内核&#xff0c;而是通过kernel 的外壳程序&…

TYUT设计模式大题

对比简单工厂&#xff0c;工厂方法&#xff0c;抽象工厂模式 比较安全组合模式和透明组合模式 安全组合模式容器节点有管理子部件的方法&#xff0c;而叶子节点没有&#xff0c;防止在用户在叶子节点上调用不适当的方法&#xff0c;保证了的安全性&#xff0c;防止叶子节点暴露…

深入理解 AI 产品的核心价值——《AI产品经理手册》

现在&#xff0c;人们对AI 充满了兴趣和看法。这些年&#xff0c;我亲身经历了对AI 的感受和认识的此起彼伏。我还是学生时&#xff0c;就对AI 以及伴随而来的第四次工业革命感到无比激动和期待。然而&#xff0c;当我开始组织读书会&#xff0c;每月阅读有关AI 的书籍&#xf…

Vue 将推出「无虚拟DOM」版本,又是新的前端框架趋势?

文章目录 背景无虚拟DOM版的Vue3Vue Vapor 在线演练题外话&#xff1a;渲染流程 背景 随着 React 和 Vue 这些前端框架的爆火&#xff0c;他们的渲染方式&#xff0c;虚拟DOM&#xff0c;也跟着火了起来&#xff0c;大家都认为这是一种高性能批量更新DOM的方式但是近一两年有不…

IDEA自定义帆软函数步骤详解

前序&#xff1a; 在帆软里面有很多内置函数可以供我们使用&#xff0c;比如计算总和的SUM()函数, 计算绝对值的ABS()函数等等&#xff0c;但是很多时候随着业务的复杂性&#xff0c;这些函数已经不满足于我们复杂的计算要求&#xff0c;所以我们可以自定义一些函数来满足我们的…

pnpm的menorepo项目配置eslint和prettier

1、使用eslint脚手架安装相关依赖并生成对应配置文件 pnpm dlx eslint/create-config 自动安装了以下几个插件 生成的配置文件如下所示&#xff0c;和csdn其他教程里面不一样&#xff0c;这是因为eslint升级成9.xx版本了 需要node版本20以上 eslint 9.x 升级或使用指南&#xf…

计算机毕业设计Python+卷积神经网络股票预测系统 股票推荐系统 股票可视化 股票数据分析 量化交易系统 股票爬虫 股票K线图 大数据毕业设计 AI

温馨提示&#xff1a;文末有 CSDN 平台官方提供的学长联系方式的名片&#xff01; 温馨提示&#xff1a;文末有 CSDN 平台官方提供的学长联系方式的名片&#xff01; 温馨提示&#xff1a;文末有 CSDN 平台官方提供的学长联系方式的名片&#xff01; 作者简介&#xff1a;Java领…

AWS账号提额

Lightsail提额 控制台右上角&#xff0c;用户名点开&#xff0c;选择Service Quotas 在导航栏中AWS服务中找到lightsail点进去 在搜索框搜索instance找到相应的实例类型申请配额 4.根据自己的需求选择要提额的地区 5.根据需求来提升配额数量,提升小额配额等大约1小时生效 Ligh…

Netty的内存池机制怎样设计的?

大家好&#xff0c;我是锋哥。今天分享关于【Netty的内存池机制怎样设计的&#xff1f;】面试题。希望对大家有帮助&#xff1b; Netty的内存池机制怎样设计的&#xff1f; 1000道 互联网大厂Java工程师 精选面试题-Java资源分享网 Netty 的内存池机制设计是为了提高性能&…

bind实验

服务端 查看域名 [rootclient yum.repos.d]# hostname client 设置域名 [rootclient yum.repos.d]# hostnamectl set-hostname dns1.openlab.edu [rootclient yum.repos.d]# cd [rootclient ~]# hostname dns1.openlab.edu 安装bind包 [rootclient ~]# yum install bind -y…