|
|
@@ -1,536 +1,53 @@
|
|
|
-<!--
|
|
|
- 联系人主页，获取通讯录信息
|
|
|
-
|
|
|
- zzh 24.8.26 修改 name-btn边框宽度
|
|
|
- 方新力 24.8.28 修改字体大小，满6字换行，号码满7字换
|
|
|
- -->
|
|
|
-
|
|
|
<template>
|
|
|
- <!-- <movable-area class="floating-button" scale-area @change="updateFloatingButton">
|
|
|
- <movable-view class="floating-button-view" direction="all">
|
|
|
- 可滚动的字母列表
|
|
|
- <scroll-view class="alphabet-scroll" scroll-y>
|
|
|
- <view v-for="letter in alphabet" :key="letter" class="alphabet-item"
|
|
|
- :data-letter="letter" :class="{ active: currentLetter === letter }"
|
|
|
- @touchstart="scrollToLetter(letter)">
|
|
|
- {{ letter }}
|
|
|
- </view>
|
|
|
- </scroll-view>
|
|
|
- </movable-view>
|
|
|
- </movable-area> -->
|
|
|
-
|
|
|
- <view class="content">
|
|
|
- <view v-if="searchActive" class="navbar" style="padding-bottom: 20px;">
|
|
|
- <image @click="showBar()" class="icon" src="../../static/pics/search.png"></image>
|
|
|
- <image @click="navigateToPage('add')" class="icon" src="../../static/pics/add.png"></image>
|
|
|
- <image @click="navigateToPage('setting')" class="icon" src="../../static/pics/setting.png"></image>
|
|
|
-
|
|
|
- </view>
|
|
|
- <view class="navbar" v-else>
|
|
|
- <view class="uni-column">
|
|
|
- <view class="search-input">
|
|
|
- <input type="text" focus confirm-type="search" v-model="searchText" placeholder="输入号码或名字" @input="filterContacts" />
|
|
|
- </view>
|
|
|
- <view class="search-img" @click="showBar()">
|
|
|
- 取消
|
|
|
- </view>
|
|
|
- </view>
|
|
|
- </view>
|
|
|
- <view class="text-area">
|
|
|
- <view v-if="filteredContacts.length" v-for="(item, id) in filteredContacts" :key="id">
|
|
|
- <view class="name-btn">
|
|
|
- <view v-if="isLoudVisible" class="loud" @click="play(item.displayName || item.phoneNumbers[0].value)">
|
|
|
- <image style="width: 80%;height: 40%; margin-left: 35rpx;" src="../../static/pics/laba.png"></image>
|
|
|
- </view>
|
|
|
- <view class="con-mes" @click="goToDetails(item)">
|
|
|
- <text v-if="!item.displayName">{{ formatPhoneNumber(item.phoneNumbers[0].value) }}</text>
|
|
|
- <text v-else>{{ truncate(item.displayName) }}</text>
|
|
|
- </view>
|
|
|
- <view class="btn" @click="CallPhone(item.phoneNumbers[0].value)">
|
|
|
- <image class="Call" src="../../static/pics/call-out.png"></image>
|
|
|
- </view>
|
|
|
- </view>
|
|
|
- </view>
|
|
|
- <view v-else class="notFind">
|
|
|
- 该号码或联系人不存在
|
|
|
- </view>
|
|
|
- </view>
|
|
|
+ <view>
|
|
|
+ <text>设备型号: {{ model }}</text>
|
|
|
+ <text>硬件制造商: {{ manufacturer }}</text>
|
|
|
+ <text>Android 版本: {{ androidVersion }}</text>
|
|
|
+ <text>SDK 版本: {{ sdkVersion }}</text>
|
|
|
</view>
|
|
|
</template>
|
|
|
|
|
|
<script>
|
|
|
- // 辅助函数，用于获取字符串的所有拼音首字母
|
|
|
- function getInitials(str) {
|
|
|
- // 将字符串转换为拼音数组，每个汉字转换为对应的拼音首字母
|
|
|
- const initialsArray = pinyin(str, {
|
|
|
- style: pinyin.STYLE_FIRST_LETTER
|
|
|
+export default {
|
|
|
+ data() {
|
|
|
+ return {
|
|
|
+ model: '',
|
|
|
+ manufacturer: '',
|
|
|
+ androidVersion: '',
|
|
|
+ sdkVersion: ''
|
|
|
+ };
|
|
|
+ },
|
|
|
+ onReady() {
|
|
|
+ this.getDeviceInfo();
|
|
|
+ this.getAnd();
|
|
|
+ },
|
|
|
+ methods: {
|
|
|
+ getDeviceInfo() {
|
|
|
+ // 获取设备型号和制造商信息
|
|
|
+ this.model = plus.device.model; // 设备型号
|
|
|
+ this.manufacturer = plus.device.vendor; // 硬件制造商
|
|
|
+
|
|
|
+ },
|
|
|
+
|
|
|
+ getAnd() {
|
|
|
+ // 获取Android版本和SDK版本
|
|
|
+ uni.getSystemInfo({
|
|
|
+ success: (res) => {
|
|
|
+ this.androidVersion = res.system;
|
|
|
+ this.sdkVersion = res.osAndroidAPILevel ? res.osAndroidAPILevel : '未知';
|
|
|
+ }
|
|
|
});
|
|
|
-
|
|
|
- // 映射每个拼音首字母数组，只取每个数组的第一个字符（即首字母）
|
|
|
- const firstLettersOnly = initialsArray.map(initial => initial[0]);
|
|
|
-
|
|
|
- // 使用 join 方法将所有首字母拼接成一个字符串
|
|
|
- return firstLettersOnly.join('');
|
|
|
- }
|
|
|
- const FvvUniTTS=uni.requireNativePlugin('Fvv-UniTTS');
|
|
|
- import pinyin from "pinyin"; // 假设你使用了一个 pinyin 库，例如 pinyin
|
|
|
- export default {
|
|
|
- data() {
|
|
|
- return {
|
|
|
- searchText: '', // 用户输入的搜索文本
|
|
|
- list: [], // 原始联系人列表
|
|
|
- filteredContacts: [], // 过滤后的联系人列表
|
|
|
- num: '',
|
|
|
- isLoudVisible: true, // 初始状态为显示
|
|
|
- searchActive: true,
|
|
|
-
|
|
|
- };
|
|
|
- },
|
|
|
- onShow() {
|
|
|
- // 页面显示时直接调用
|
|
|
- this.ToGetMessage();
|
|
|
- /* this.ToGetHis(); */
|
|
|
- this.init();
|
|
|
- this.setLanguage();
|
|
|
- },
|
|
|
- beforeCreate() {
|
|
|
- const domModule = uni.requireNativePlugin('dom')
|
|
|
- domModule.addRule('fontFace', {
|
|
|
- 'fontFamily': "myIconfont",
|
|
|
- 'src': "url('../assets/typeface/almmdfdk.ttf')"
|
|
|
- });
|
|
|
- },
|
|
|
- methods: {
|
|
|
- toNum(e){
|
|
|
- console.log("num",e);
|
|
|
- this.num=e;
|
|
|
- },
|
|
|
- // 格式化电话号码
|
|
|
- formatPhoneNumber(value) {
|
|
|
- // 移除所有非数字字符
|
|
|
- value = value.replace(/\D/g, '');
|
|
|
-
|
|
|
- if (value.length === 11) {
|
|
|
- // 如果长度为11， 在第4和第9位插入空格
|
|
|
- return value.replace(/(\d{3})(\d{4})(\d{4})/, '$1 $2 $3');
|
|
|
- } else {
|
|
|
- // 如果长度不为11，每4个字符插入一个空格
|
|
|
- return value.replace(/(\d{4})(?=\d)/g, '$1 ');
|
|
|
- }
|
|
|
- },
|
|
|
- truncate(value) {
|
|
|
- if (value.length > 9) {
|
|
|
- return value.slice(0, 5) + '\n' + value.substring(5, 9) + '...';
|
|
|
- }
|
|
|
- else{
|
|
|
- return value.slice(0, 5) + '\n' + value.substring(5, 9)
|
|
|
- }
|
|
|
- return value;
|
|
|
- },
|
|
|
- onChange: function(e) {
|
|
|
- this.old.x = e.detail.x
|
|
|
- this.old.y = e.detail.y
|
|
|
- },
|
|
|
-
|
|
|
- init(){
|
|
|
- FvvUniTTS.init((callback) => {
|
|
|
- console.log(callback);
|
|
|
- },"com.iflytek.speechcloud");
|
|
|
-
|
|
|
- FvvUniTTS.onStart((res) => {
|
|
|
- console.log("onStart:" + res)
|
|
|
- });
|
|
|
-
|
|
|
- FvvUniTTS.onDone((res) => {
|
|
|
- console.log("onDone:" + res)
|
|
|
- });
|
|
|
-
|
|
|
- FvvUniTTS.onError((res) => {
|
|
|
- console.log("onError:" + res)
|
|
|
- });
|
|
|
- FvvUniTTS.getInstallTTS(res => {
|
|
|
- console.log(res)
|
|
|
- })
|
|
|
- },
|
|
|
- play(e){
|
|
|
- console.log("xinxi",e)
|
|
|
- FvvUniTTS.speak({
|
|
|
- text:e,
|
|
|
- id:2,
|
|
|
- });
|
|
|
-
|
|
|
- FvvUniTTS.getInstallTTS(res => {
|
|
|
- console.log(res+"11")
|
|
|
- })
|
|
|
- },
|
|
|
- setLanguage(){
|
|
|
- console.log("set lang : " + FvvUniTTS.setLanguage("CHINESE"));
|
|
|
- },
|
|
|
- setEngines(){
|
|
|
- let setEngine = "com.iflytek.speechcloud"
|
|
|
-
|
|
|
- //获取已安装的引擎
|
|
|
- FvvUniTTS.getInstallTTS(res => {
|
|
|
- if(res == null || res.length <= 0){
|
|
|
- return
|
|
|
- }
|
|
|
- console.log(res)
|
|
|
- if(JSON.stringify(res).indexOf(setEngine) < 0){
|
|
|
- console.log("未安装该语音引擎")
|
|
|
- return
|
|
|
- }
|
|
|
- console.log("set engine : " + FvvUniTTS.setEngine(setEngine));
|
|
|
- FvvUniTTS.speak({
|
|
|
- text:"设置成功",
|
|
|
- id:2,
|
|
|
- });
|
|
|
- })
|
|
|
- },
|
|
|
- saveFile(){
|
|
|
- FvvUniTTS.saveAudioFile({
|
|
|
- text:"hello",
|
|
|
- id:3,
|
|
|
- path:"/sdcard/test/1.wav"
|
|
|
- })
|
|
|
- },
|
|
|
- setVoice(){
|
|
|
- FvvUniTTS.setPitch(100)
|
|
|
- FvvUniTTS.setSpeechRate(100)
|
|
|
- },
|
|
|
- navigateToPage(page) {
|
|
|
- switch (page) {
|
|
|
- case 'add':
|
|
|
- // 导航到添加页面
|
|
|
- uni.navigateTo({
|
|
|
- url: '/pages/add/add'
|
|
|
- });
|
|
|
- break;
|
|
|
- case 'setting':
|
|
|
- // 导航到设置页面
|
|
|
- uni.navigateTo({
|
|
|
- url: '/pages/setting/setting'
|
|
|
- });
|
|
|
- break;
|
|
|
- default:
|
|
|
- break;
|
|
|
- }
|
|
|
- },
|
|
|
-
|
|
|
- showBar() {
|
|
|
- this.searchActive = !this.searchActive;
|
|
|
- this.ToGetMessage();
|
|
|
- },
|
|
|
- // 获取联系人信息
|
|
|
- ToGetMessage() {
|
|
|
- var that = this;
|
|
|
- // 获取通讯录对象
|
|
|
- plus.contacts.getAddressBook(plus.contacts.ADDRESSBOOK_PHONE, function(addressbook) {
|
|
|
- addressbook.find(["displayName", "phoneNumbers"], function(contacts) {
|
|
|
- that.list = contacts;
|
|
|
- console.log(that.list)
|
|
|
-
|
|
|
- // 将联系人按自定义规则排序
|
|
|
- that.list.sort(function(a, b) {
|
|
|
- // 检查是否为汉字、英文、数字或符号
|
|
|
- const isChinese = (str) => /^[\u4e00-\u9fa5]+$/.test(str);
|
|
|
- const isEnglish = (str) => /^[A-Za-z]+$/.test(str);
|
|
|
- const isNumber = (str) => /^[0-9]+$/.test(str);
|
|
|
-
|
|
|
- // 获取首字母，如果 displayName 是空，则使用 phoneNumbers 的第一个号码
|
|
|
- let firstCharA = a.displayName ? a.displayName.trim()[0] : a.phoneNumbers[0].value;
|
|
|
- let firstCharB = b.displayName ? b.displayName.trim()[0] : b.phoneNumbers[0].value;
|
|
|
-
|
|
|
- // 将汉字转换为拼音以便比较
|
|
|
- if (isChinese(firstCharA)) {
|
|
|
- firstCharA = pinyin(firstCharA, { style: pinyin.STYLE_FIRST_LETTER })[0][0];
|
|
|
- }
|
|
|
- if (isChinese(firstCharB)) {
|
|
|
- firstCharB = pinyin(firstCharB, { style: pinyin.STYLE_FIRST_LETTER })[0][0];
|
|
|
- }
|
|
|
-
|
|
|
- // 确定排序的优先级
|
|
|
- if (isEnglish(firstCharA) && isEnglish(firstCharB)) {
|
|
|
- // 如果都是英文，按字母顺序排序
|
|
|
- return firstCharA.localeCompare(firstCharB);
|
|
|
- } else if (isChinese(firstCharA) && isChinese(firstCharB)) {
|
|
|
- // 如果都是汉字（已经转换为拼音首字母），按拼音排序
|
|
|
- return firstCharA.localeCompare(firstCharB);
|
|
|
- } else if ((isEnglish(firstCharA) || isChinese(firstCharA)) && (isNumber(firstCharB) || !isEnglish(firstCharB))) {
|
|
|
- // 如果 A 是英文或汉字，而 B 是数字或其他符号，则 A 在前
|
|
|
- return -1;
|
|
|
- } else if ((isNumber(firstCharA) || !isEnglish(firstCharA)) && (isEnglish(firstCharB) || isChinese(firstCharB))) {
|
|
|
- // 如果 A 是数字或其他符号，而 B 是英文或汉字，则 B 在前
|
|
|
- return 1;
|
|
|
- } else {
|
|
|
- // 若是其他情况（如两个字符都为数字或符号），按字符顺序排序
|
|
|
- return firstCharA.localeCompare(firstCharB);
|
|
|
- }
|
|
|
- });
|
|
|
-
|
|
|
- // 更新过滤后的联系人列表
|
|
|
- console.log("list",that.list);
|
|
|
- that.filteredContacts = that.list;
|
|
|
- console.error("更新过滤后的联系人列表",that.filteredContacts)
|
|
|
- }, function() {
|
|
|
- uni.showToast({
|
|
|
- title: '获取联系人失败',
|
|
|
- duration: 2000 // 在屏幕上显示的时间长度
|
|
|
- });
|
|
|
- }, { multiple: true }); // 应该检索多个联系人
|
|
|
- }, function(e) {
|
|
|
- uni.showToast({
|
|
|
- title: '获取通讯录对象失败:' + e.message,
|
|
|
- duration: 2000
|
|
|
- });
|
|
|
- });
|
|
|
- },
|
|
|
- // 拨打电话
|
|
|
- CallPhone(e) {
|
|
|
- // 调用HTML5 Plus框架提供的接口
|
|
|
- plus.device.dial(e, false);
|
|
|
- },
|
|
|
- filterContacts() {
|
|
|
- // 获取用户输入的文本，转换为小写
|
|
|
- const searchText = this.searchText.toLowerCase();
|
|
|
- console.log("输入内容",searchText)
|
|
|
- if (!searchText) {
|
|
|
- // 如果用户没有输入，显示所有联系人
|
|
|
- console.log("kong")
|
|
|
- this.filteredContacts = this.list;
|
|
|
-
|
|
|
- } else {
|
|
|
- // 过滤出匹配用户输入的联系人
|
|
|
- this.filteredContacts = this.list.filter(contact => {
|
|
|
- // 模糊查找逻辑：检查 displayName 或 phoneNumbers 是否包含用户输入的文本
|
|
|
- const isFuzzyMatch = (contact.displayName || '').toLowerCase().includes(searchText) ||
|
|
|
- contact.phoneNumbers.some(phone => phone.value.toLowerCase().includes(searchText));
|
|
|
-
|
|
|
- // 拼音首字母查找逻辑：检查拼音首字母序列是否包含用户输入的序列
|
|
|
- const displayNameFirstLetters = getInitials(contact.displayName || '');
|
|
|
- const isInitialsMatch = displayNameFirstLetters.includes(searchText);
|
|
|
-
|
|
|
- // 返回匹配结果，只有当模糊查找或拼音首字母查找任一条件满足时，才包含该联系人
|
|
|
- return isFuzzyMatch || isInitialsMatch;
|
|
|
- });
|
|
|
- }
|
|
|
- },
|
|
|
-
|
|
|
- search() {
|
|
|
- // 可以在这里添加更复杂的搜索逻辑
|
|
|
- this.filterContacts();
|
|
|
- },
|
|
|
- //进行页面跳转到联系人详情
|
|
|
- goToDetails(item){
|
|
|
- console.error('item',item)
|
|
|
- const phoneNumbers=item.phoneNumbers
|
|
|
- const phoneNumbersString=JSON.stringify(phoneNumbers)
|
|
|
- const phoenNumberCount=item.phoneNumbers.length;
|
|
|
- console.error("phonenumber",phoneNumbers)
|
|
|
- console.error("phoenNumberCount",phoenNumberCount)
|
|
|
- uni.navigateTo({
|
|
|
- url: `/pages/ContactDetails/ContactDetails?name=${encodeURIComponent(item.displayName)}&phoneNumbers=${encodeURIComponent(phoneNumbersString)}&count=${phoenNumberCount}`
|
|
|
- });
|
|
|
- },
|
|
|
- }
|
|
|
}
|
|
|
+ }
|
|
|
+};
|
|
|
</script>
|
|
|
|
|
|
<style>
|
|
|
-.floating-button {
|
|
|
- width: 50px; /* 根据需要调整尺寸 */
|
|
|
- height: 300px; /* 根据需要调整尺寸，确保字母列表可以容纳 */
|
|
|
- border-radius: 25px;
|
|
|
- background-color: rgba(0, 0, 0, 0.5);
|
|
|
- position: fixed;
|
|
|
- right: 20px;
|
|
|
- bottom: 20px;
|
|
|
- overflow: hidden; /* 确保内容在按钮范围内 */
|
|
|
- z-index: 1000; /* 一个较高的z-index值，确保它在最上层 */
|
|
|
-}
|
|
|
-
|
|
|
-.alphabet-scroll {
|
|
|
- width: 100%;
|
|
|
- height: 100%;
|
|
|
- background-color: #fff; /* 根据需要调整背景色 */
|
|
|
-}
|
|
|
-
|
|
|
-.alphabet-item {
|
|
|
- padding: 5px 10px;
|
|
|
- text-align: center;
|
|
|
- cursor: pointer;
|
|
|
-}
|
|
|
-
|
|
|
-.alphabet-item.active {
|
|
|
- background-color: #007AFF; /* 高亮颜色 */
|
|
|
- color: #fff;
|
|
|
-}
|
|
|
-
|
|
|
-
|
|
|
-.notFind{
|
|
|
- font-size: 50rpx;
|
|
|
+view {
|
|
|
+ padding: 20px;
|
|
|
}
|
|
|
-
|
|
|
-.null {}
|
|
|
-
|
|
|
-/* 其他样式保持不变 */
|
|
|
-.uni-column {
|
|
|
- width: 690rpx;
|
|
|
- height: 140rpx;
|
|
|
- border: 1px solid black;
|
|
|
- margin-top: 18rpx;
|
|
|
- border-radius: 20rpx;
|
|
|
- font-size: 50rpx;
|
|
|
- display: flex; /* 使用flex布局 */
|
|
|
- justify-content: space-between; /* 左右分布 */
|
|
|
- /* 其他样式保持不变 */
|
|
|
-}
|
|
|
-
|
|
|
-.search-input {
|
|
|
- width: 75%;
|
|
|
- /* 可以根据需要调整以下样式 */
|
|
|
- display: flex;
|
|
|
- align-items: center;
|
|
|
-}
|
|
|
-
|
|
|
-.search-img {
|
|
|
- width: 25%;
|
|
|
- /* 可以根据需要调整以下样式 */
|
|
|
- display: flex;
|
|
|
- border-left: 1px solid black;
|
|
|
- justify-content: center;
|
|
|
- align-items: center;
|
|
|
-}
|
|
|
-
|
|
|
-.search-input input {
|
|
|
- /* 根据需要调整输入框大小 */
|
|
|
- width: 90%; /* 例如90% */
|
|
|
- height: 90%; /* 例如80% */
|
|
|
- font-size: 50rpx;
|
|
|
- padding: 10px; /* 根据需要调整内边距 */
|
|
|
-}
|
|
|
-
|
|
|
-.search-img image {
|
|
|
- width: 50%; /* 例如30% */
|
|
|
- height: 50%; /* 保持与输入框一致的高度 */
|
|
|
- font-size: 50rpx;
|
|
|
-}
|
|
|
-
|
|
|
-.content {
|
|
|
- min-height: 100%;
|
|
|
- display: flex;
|
|
|
- flex-direction: column;
|
|
|
- justify-content: center;
|
|
|
- background-color: #f0efef;
|
|
|
-}
|
|
|
-
|
|
|
-.con-mes {
|
|
|
- line-height: 1.05; /* 行高为字体大小的0.2倍 */
|
|
|
- font-family: 'FangSong', '仿宋_GB2312', serif;
|
|
|
- font-size: 35px;
|
|
|
- font-weight: 700;
|
|
|
- display: flex;
|
|
|
- align-items: center;
|
|
|
- justify-content: center;
|
|
|
- text-align: center;
|
|
|
- white-space: pre-line; /* 保证换行符有效 */
|
|
|
- word-wrap: break-word; /* 确保长单词换行 */
|
|
|
- width: 410rpx;
|
|
|
- height: 200rpx;
|
|
|
- border: none;
|
|
|
- background-color: white;
|
|
|
-}
|
|
|
-
|
|
|
-.name-btn {
|
|
|
- display: flex;
|
|
|
- align-items: center;
|
|
|
- justify-content: space-between;
|
|
|
- width: 690rpx;
|
|
|
- height: 200rpx;
|
|
|
- border: 0.5px solid black;
|
|
|
- margin-top: 8rpx;
|
|
|
- margin-bottom: 10rpx;
|
|
|
- border-radius: 20rpx;
|
|
|
- font-size: 50rpx;
|
|
|
-}
|
|
|
-
|
|
|
-.text-area {
|
|
|
- padding-top: 145px;
|
|
|
- display: flex;
|
|
|
- flex-direction: column;
|
|
|
- align-items: center;
|
|
|
-}
|
|
|
-
|
|
|
-.loud {
|
|
|
- display: flex;
|
|
|
- justify-content: center;
|
|
|
- align-items: center;
|
|
|
- width: 100rpx;
|
|
|
- height: 200rpx;
|
|
|
- border-radius: 20rpx 0rpx 0rpx 20rpx;
|
|
|
- background-color: white;
|
|
|
-}
|
|
|
-
|
|
|
-.btn {
|
|
|
- display: flex;
|
|
|
- justify-content: center;
|
|
|
- align-items: center;
|
|
|
- width: 180rpx;
|
|
|
- height: 200rpx;
|
|
|
- background-color: #ecfff3;
|
|
|
- border-radius: 0rpx 20rpx 20rpx 0rpx;
|
|
|
-}
|
|
|
-
|
|
|
-.Call {
|
|
|
- width: 100rpx;
|
|
|
- height: 100rpx;
|
|
|
- object-fit: contain;
|
|
|
-}
|
|
|
-
|
|
|
-.navbar {
|
|
|
- display: flex;
|
|
|
- justify-content: space-around;
|
|
|
- align-items: flex-end;
|
|
|
- width: 100%;
|
|
|
- background-color: #f0efef;
|
|
|
- min-height: 120px;
|
|
|
- padding-bottom: 20px;
|
|
|
- position: fixed; /* 设置为固定定位 */
|
|
|
- top: 0; /* 与页面顶部的距离为0 */
|
|
|
- z-index: 999;
|
|
|
-}
|
|
|
-
|
|
|
-.icon {
|
|
|
- justify-content: space-around;
|
|
|
- width: 100rpx;
|
|
|
- height: 100rpx;
|
|
|
-}
|
|
|
-
|
|
|
-.uni-tabbar__iconfont {
|
|
|
- font-size: 50px; /* 自定义字体大小 */
|
|
|
- width: 80px;
|
|
|
- height: 80px;
|
|
|
- }
|
|
|
-
|
|
|
-/* 悬浮框css */
|
|
|
-movable-view {
|
|
|
- display: flex;
|
|
|
- align-items: center;
|
|
|
- justify-content: center;
|
|
|
- height: 150rpx;
|
|
|
- width: 150rpx;
|
|
|
- background-color: #007AFF;
|
|
|
- color: #fff;
|
|
|
-}
|
|
|
-
|
|
|
-movable-area {
|
|
|
- height: 300rpx;
|
|
|
- width: 100%;
|
|
|
- background-color: #D8D8D8;
|
|
|
- overflow: hidden;
|
|
|
-}
|
|
|
-
|
|
|
-.max {
|
|
|
- width:500rpx;
|
|
|
- height: 500rpx;
|
|
|
+text {
|
|
|
+ display: block;
|
|
|
+ margin-bottom: 10px;
|
|
|
}
|
|
|
</style>
|
